React Getting Started - Building a React Operating Environment

Current Location：Home > Learning > WEB FRONT-END > React >

Vue React JavaScript Angular CSS HTML

React Getting Started - Building a React Operating Environment

Author：JIYIK Last Updated：2025/03/02 Views：

Currently, React, a front-end framework developed by Facebook, is very popular. It is said that its performance is much better than other front-end tools. With more and more people paying attention to it, React is considered to be the mainstream tool for Web development in the future.

For me, I used to work on the backend. But now Javascript is so powerful, I think mastering a front-end framework is an essential skill for a programmer. Since React is so popular, it is natural to choose React.

When I started learning React, it took me a long time just to set up the environment. This is mainly because it is a new technology and there are few tutorials on how to use it. However, for introductory articles, I personally recommend this React introductory tutorial by Ruan Yifeng .

Next, we will mainly introduce how to build the React runtime environment (I always feel that the title called Building the React Runtime Environment is not so accurate, because React can be said to be a front-end framework, or a class library. The runtime environment naturally requires the support of the browser. Instead of calling it building the runtime environment, it is better to call it how to reference React).

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

Import React without using npm

For this method, we need to first download the React and React-dom library files and then import them into the HTML file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById(‘content’)
      );
    </script>
  </body>
</html>

In the above example, the XML syntax in Javascript is called JSX. For this syntax, <script>its type must be "text/babel" in the tag. However, this syntax cannot be parsed directly by the browser, so the third file browser.min.js is needed 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, this article will not introduce it. We can think of it as a converter. Of course, this conversion is performed through browser.min.js.

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

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(‘content’)
);

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src=”src/hw.js”></script>
  </body>
</html>

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

For this method, the most time-consuming process is actually the process of converting JSX into Javascript syntax through babel. Therefore, we usually execute this step on the server. In other words, we usually do not use buile/browser.min.js directly on the client to convert JSX. Therefore, the server has already converted it before the browser parses it, and the client can directly call the converted file.

Server-side conversion

First we should install babel on the server side

$ npm install –global babel-cli
$ npm install babel-preset-react

Then start converting our previously created src/hw.js file

$ babel –presets react src –watch –out-dir build

The build/hw.js file is generated by the above command. This file contains ordinary JavaScript syntax code.

It should be noted here that src is the folder where resource files are stored, that is, the source code we wrote, and build is the folder where files imported by the client are stored, that is, the generated files. And --watch is to monitor whether there are changes in the resource files in the src folder, and automatically generate the corresponding files if there are changes.

Now our HTML code can be updated to the following content.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
   
  </head>
  <body>
<div id="content"></div>

    <script type="text/javascript" src=”build/hw.js”></script>
  </body>
</html>

The above is the way we don't use npm, which seems to be quite troublesome. For convenience, we can use React in the npm way.

Use npm to reference React

Using this method, there are two ways to manage, one is browserify and the other is webpack . Since I used webpack directly when I first started learning, I have never used browserify. In order not to mislead you, I will skip browserify here and use webpack directly.

The first thing we should do is create a new project/react

$ mkdir /react
$ cd /react
$ npm init   # Initialize the project. This step will give you some options to enter. After entering, a package.json file will be generated in the project directory.

Then install the react library, react-dom library and some tools.

$ npm install –save react react-dom
$ npm install –save-dev babel-preset-react

Next is to install webpack.

$ npm install –save-dev webpack

After the installation is complete, a node_modules directory will be generated under the project directory. All installed modules are under this directory, including webpack. The webpack commands are also under this directory. It is very inconvenient to use. I personally like to create a new bin directory under the project directory to store shortcuts for all commonly used commands. Take our webpack as an example.

$ ln –s /react/node_modules/webpack/bin/webpack.js /react/bin/webpack

In this way, as long as we are in the project directory, we can use the bin/webpack command. Before starting to use webpack to package the project, we need to do the most important step, which is to write the webpack configuration file webpack.config.js, the content is as follows

module.exports={
    entry: {
        module:'./src/index.js',
    },
    output:{
        path: './build',
        filename: 'bundle.js',
    },
    module:{
        loaders:[
            {
                test: /\.js$/,
                loader: 'babel',
                query:{
                    presets:['react']
                }
            }
        ],
    }
}

For the syntax of webpack configuration files, please refer to the tutorial on the official website .

Next we start writing our code src/index.js

var React = require('react');
var ReactDOM = require('react-dom');
 
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘content’)
);

Finally start packing

$ bin/webpack

After the execution is completed, we can see a build folder under the project directory, which contains a js file bundle.js.

We can also use --watch to monitor whether the resource files in src have changed, and if there are changes, they will be automatically packaged.

$ bin/webpack –watch

Then, our HTML can be changed to the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
  </head>
  <body>
<div id="content"></div>
<!--  Here, type will also be changed to text/javascript or omitted.  -->
    <script type="text/javascript" src=”build/bundle.js”></script>
  </body>
</html>

Isn’t it easier to manage? Neither react nor react-dom need to be introduced in HTML.

The above are two ways to build a React runtime environment. Since I have just started using React, please correct me if there are any inaccuracies or omissions.

Previous: None

Next：React Project Management

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >