Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

React is a JavaScript library for building user interfaces(UI).

This article takes the CentOS7.9 64bit environment as an example to introduce the installation of Node.js (Node for short) and React.js (React for short), and the Helloworld program.

Table of contents

Node.js installation

First Node.js example

React.js installation and use

A. Reference React in HTML

B、create-react-app

Node.js installation

Download and decompress in Linux to complete the installation. After the installation is complete, configure the PATH environment variable to the profile.

wget https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-x64.tar.xz

tar -xvf node-v14.17.6-linux-x64.tar.xz

#下载并解压即完成安装。安装完成后，可配置将PATH环境变量配置到profile中

After installation, check the version:

First Node.js example

Create a new js file through vim HelloWorld.js , the content is as follows (introduce http module, create http service, and specify the listening port to start.)

const http = require('http');

const server = http.createServer( (req, resp) => {
    resp.statusCode = 200;
    resp.setHeader('Content-Type', 'text/plain');
    resp.end('Hello World!!!');
});

server.listen(9988);

console.log('Server running ...');

Start the server:
```
node HelloWorld.js
```
browser access

React.js installation and use

React is a JavaScript UI graphics library. React can be gradually adopted from the beginning of its birth, so you can introduce more or less React features as needed . Whether you want to experiment with React, use it to add a little interactivity to simple HTML pages, or start a complex application powered entirely by React. So you can use React in two ways: by referencing React in HTML, and by creating a New React App. The following takes React 17 version as an example to illustrate

A. Reference React in HTML

According to the official link provided as follows:

  <!-- ... other HTML ... -->

  <!-- Load React. -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

 <!-- Note: 若在生产环境：①需要将上面 "development.js" 替换为"production.min.js"。 ②并去掉最后一行对babel的引用，因为在浏览器中使用 Babel 来编译 JSX 效率是非常低的 -->

  <!-- ... other HTML ... -->

Introduced three React libraries: react.js, react-dom.js and babel.js:

react.js - The core library for React
react-dom.js - Provides DOM related functionality
babel.min.js - Babel can transpile ES6 code to ES5 code, so that we can execute React code on browsers that currently do not support ES6. Babel has built-in support for JSX. Not recommended for use in production environments. When using Babel, you need to <script> tag by adding type="text/babel" attribute to it

Example: Create a new HTML file via first_react.html . The content is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
  <!-- Load React. -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

The body above uses JSX syntax, so Babel needs to be applied and will be type设置为"text/babel" .

B、create-react-app

create-react-app is a tool promoted by React, through which the React development environment can be quickly built without configuration. It uses Webpack and Babel internally, but users don't need to pay attention to any details of them.

Version requirements: Node >= 8.10 and npm >= 5.6

Install tools. After the installation is complete, an executable file named create-react-app will be generated in the node software directory (the executable file is actually a link, pointing to the installed create-react-app module):
```
# 全局安装create-react-app工具
npm install -g create-react-app
```

Create a project using the create-react-app tool:


# 使用工具创建一个项目
create-react-app my-first-app

The directory structure of the created project is as follows:

Run the newly created project:

cd my-first-app;
npm run start

After running, the effect is as follows:

1. Node.js and React.js installation and Helloworld

Node.js installation

First Node.js example

React.js installation and use

A. Reference React in HTML

B、create-react-app

Guess you like