Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to build the running environment of React. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

There are two ways, one is to use npm, the other is not to use npm. Let's take a look at the ways not to use npm first.

Introduce React without npm

For this approach, we first need to download the library files for React and React-dom. It is then introduced into the html file.

Hello React!

ReactDOM.render (

Hello, world!

Document.getElementById ('content')

);

In the above example, the XML syntax in Javascript is called JSX, and for this syntax, the type must be "text/babel" in the tag. But this syntax cannot be parsed directly by the browser, so you need the third file above, browser.min.js, to convert this Js into native Js code, and then react.js and react-dom.js parse their own syntax to execute. Of course, there is a knowledge point involved, that is, babel. As for the detailed understanding of babel, which is not covered in this article, we can think of it as a converter, of course, this conversion is done through browser.min.js.

Next, we can separate the JSX code from the above html and write it into a separate file, src/hw.js.

ReactDOM.render (

Hello, world!

Document.getElementById ('content')

);

Therefore, the above html can be updated to the following code:

Hello React!

It should be noted that in this case, some browsers (such as Google browser) cannot load src/hw.js and can only be loaded through the http address. This is said on the official website, I have not verified it, but it is best to introduce the above file through the absolute address of url.

In fact, the most time-consuming way to do this is the process of converting JSX to Javascript syntax through babel. So we usually put this step on the server. In other words, we generally do not use buile/browser.min.js directly on the client side to convert JSX. So before the browser parsing, it has been directly converted by the server, and the client can directly call the converted file.

Server-side conversion

First, we should install babel on the server first.

# npm install-global babel-cli

# npm install babel-preset-react

And then start converting the src/hw.js file we created earlier.

These are all the contents of the article "how to build the running environment of React". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.