React how to get data from the backend and render it to the front end?

Beginner react, understand the wrong please point out: D

We know that the traditional backend development is to embed the data in the page structure and parse it in the server, for example:

//test.php    
  
   

Once the test.php is accessed, the server-side PHP interpreter interprets the code inside, converts it to Hello, and returns it to the browser.

So the problem comes, I now have a react component, but in the react component can not directly embed PHP and other back-end code, (because the front end is complete parsing/rendering), so I would like to ask how better with embedded back-end data?

The way to think of it is:

• Ajax asynchronous request, get results and insert?

• The backend outputs the data to a JSON file, reads the JSON from the front and renders the page? (If the data changes, wouldn't it be a hassle to maintain the JSON file?) ）

Would you like to ask how you deal with this problem?

Reply content:

Beginner react, understand the wrong please point out: D

We know that the traditional backend development is to embed the data in the page structure and parse it in the server, for example:

//test.php    
  
   

Once the test.php is accessed, the server-side PHP interpreter interprets the code inside, converts it to Hello, and returns it to the browser.

So the problem comes, I now have a react component, but in the react component can not directly embed PHP and other back-end code, (because the front end is complete parsing/rendering), so I would like to ask how better with embedded back-end data?

The way to think of it is:

• Ajax asynchronous request, get results and insert?

• The backend outputs the data to a JSON file, reads the JSON from the front and renders the page? (If the data changes, wouldn't it be a hassle to maintain the JSON file?) ）

Would you like to ask how you deal with this problem?

Ajax and JSON for the Reactjs is mainly the expression of different forms, but eventually will become JS object, depending on the specific circumstances and choose.

For example, we set up a page to filter the service that the site can provide, which is probably as follows

Class Servicelist extends react.component{constructor (props) {super (props) this.state={//We Make            Use the services inside the state to save all service//At the beginning of the content is empty services:[],//The view here determines what service we want to show View: "Type_a"}} render () {///When the React library runs to the Render method, it iterates through all the items in the state of the service let serv            Iceshows = This.state.services.map ((service,index) =>{//If the type of the service matches the current view, add him to the array to be displayed                            if (Service.type = = = This.state.view) {return {service}}}) return (                {//Here, we show what to display}    {serviceshows}) }//You can see that our class is constructed with the state in its own state where services is an empty array, and we need to populate him with content//view the Component Life cycle page of the React document (this page is important, be sure to understand when each function will be triggered), find it built We use the Componentdidmount function to obtain the required data after each component is displayed//and then do the Componentdidmount () {//component to render the service empty first, and you can understand that the page frame is rendered first Come out//after rendering, call us here This function uses Ajax method to go to the server to fetch data let XHR = new XMLHttpRequest ()//server as you like, you can use PHP, you can also use node, as long as the implementation of the standard Get method//For Post,put,delete and other methods of the same//and very significant  However, if your data does not need to be extracted from the database, or long-term unchanged, also not afraid of leaks//that you can request a JSON file Xhr.open ("GET", "http://your.server.com/api/services", true)//Select whether to send the information for authentication with GET request Xhr.withcredentials = True Xhr.send () Xhr.onreadystatechan                    GE = () =>{if (xhr.readystate = = Xmlhttprequest.done) {if (Xhr.status = = 200) {                    You can of course use other methods to encode your return information, but for the world of JS, what is more convenient than JSON?                    Let gotservices = Json.parse (xhr.responsetext)///OK, we have a service list that overrides the current element's services data using the SetState method            This.setstate ({services:gotservices})} }else{alert ("Ajax Failed")}}}//Then we have rendered the page, obtained the data from the server, and put the data where it should be,//or    What can we do to make this element of our writing show the new data? Don't worry, react controls all the setstate methods,//When he finds out you'reAfter a new state has been set on an element, he will tell that element to execute the render method again,//Then you can go to the Render method,    This time he was this.state.services because of the content of the different things will naturally render a different content//how to clearly feel the last two times the existence of the rendering? On your server side, make a 5-second delay on the interface of the AJAX request,//You will obviously see that the new content is being brushed out at the moment you get the return result.

React.js's own positioning is "A JavaScript Library for building user interface", and its documentation says many people use it as a V of MVC. As a result, React.js doesn't care how you embed back-end data. In other words, how we work with a standard HTML element and back end can apply the same idea to the components created by React.js.

For example, one input , you can:

Way to get variables from PHP $name .

A react.js component can also be shaped like:

ReactDOM.render(React.createElement(HelloMessage, { name: "
  
   " }), mountNode);

With standard elements you can use AJAX to get a value and then (for example, with JQuery) to manipulate:

$.ajax(...)  .done(function(data){    $('#name').val(data.name);  });

When using React.js, you can also use your own defined method to update the component when AJAX returns.

How does it bother to maintain JSON information? In PHP echo $var; and echo json_encode($var); the degree of trouble is a magnitude.

The backend uses Nodejs or PHP to do restful API, the front end react with jquery Ajax to get the data, and then add the data to This.state, and then in the render this.state data display, User interaction that block is also Ajax get data re-update this.state then react automatically updates the DOM interface

That's it, I'm a rookie, @-@.

With Ajax, the page template is loaded, and then the data is loaded, but the request is repeated several times

Rudely outputting data directly to the SCIRPT tag on the back end, as a global object, read anywhere

React.js combined with Fetch.js

