React Learning notes page Toggle Render __react

Learning react just started, intend to use Nodejs+react+mysql to build a personal blog, the original plan is to the left to achieve a navigation bar click to switch from the background to get content to render.

As a result, when you write the index entry file, you suddenly realize that Nodejs routing first distributes HTTP requests to different logical modules to process and then returns the corresponding content to the browser, so you can write this before using the Ejs template engine

we can interpret Ejs as a JS function, followed by the function of the parameters, natural Ejs is free to read their own parameters.

In this way ejs can directly obtain data from the server, and then spliced into HTML and then to the browser rendering.

However, react can not be used as a function, react the combination of multiple components and then injected into the HTML to render (not very understanding of the react component rendering principle, so this does not examine)

React data is bound to the assembly through This.state or This.props

The final trouble is how to pass the data from the back end to the react component like Ejs.

The first thought was to write the data JSON format to the file, but it was a problem when react to fetch the data from the file.

Later, I read the information and saw React-router, and it dawned.

normal Web application page switching

1. Click on the link through Ajax to initiate the request, the back-end distribution request after the required data stitching into HTML to send to the browser (back-end rendering).

2. The browser obtains the new HTML content to parse its content after, determines needs also to load the JS and the CSS and so on file finally renders the page content.

and react in the first load can be the page to switch all load complete, switch through the React-router link component to intercept the request (not sent to the server) and then through the router component to determine who to display.

so back to the original question, the point is react how to get the data from the back end.

In fact, after react-router this problem is very good to solve, before this problem is mainly because of the same as Ejs to the same time to the HTML and data sent to the browser, thinking is still stuck in the use of Ejs template engine time, react since already loaded all DOM , then we just need to send the data to the browser.

we can write Ajax in Componentdidmount, and when React-router decides which component to render the page, When this component is first rendered, it loads Ajax to obtain the data and then renders the data via this.state or This.props.

conclusion: Ajax in react no longer need to receive HTML text, but only need to receive data can be rendered, equivalent to the subsequent loading is the front-end rendering, which with the template engine has the essential difference (frame is the frame, thinking is different), So when you visit the React page, it's the first time you load slowly (because you want to load all the pages), but the page will be very fluent in subsequent browsing.

The understanding of react a step further and continue to learn ^o^.