Node.js安装

在Linux中下载、解压完成安装。安装完成后，可配置将PATH环境变量配置到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中

安装完毕后，查看版本：

第一个Node.js例子

通过vim HelloWorld.js新建一个js文件，内容如下（引入http模块，创建http服务，并指定监听端口启动。）

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 ...');

启动该服务器：
```
node HelloWorld.js
```
浏览器访问

React.js安装使用

React是JavaScript的UI图形library库，React 从诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用。因此可以通过两种方法使用React：在HTML中引用React、通过Create a New React App。下文以React 17版本为例进行说明

A、在HTML引用React

按照官方提供的链接如下：

  <!-- ... 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 ... -->

引入了React三个库： react.js 、react-dom.js 和 babel.js：

react.js - React 的核心库
react-dom.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。不建议在生产环境上使用。使用Babel时需要在<script> tag by adding type="text/babel" attribute to it

例子：通过first_react.html新建一个HTML文件。内容如下：

<!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>

上文中body使用JSX语法，因此需要应用Babel并且将type设置为"text/babel" 。

B、create-react-app

create-react-app是React推进的工具，通过该工具无需配置即可快速构建React开发环境。它在内部使用Webpack和Babel，但使用者无需关注它们任何细节。

版本要求： Node >= 8.10 和 npm >= 5.6

安装工具。安装完毕后，会在node软件并目录生成名为create-react-app的可执行文件（该可执行文件实际为链接，指向安装的create-react-app模块）：
```
# 全局安装create-react-app工具
npm install -g create-react-app
```

使用create-react-app工具创建一个项目：


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

创建的项目目录结构如下：

运行新创建的项目：

cd my-first-app;
npm run start

运行后，效果如下图：

一、Node.js和React.js安装及Helloworld

Node.js安装

第一个Node.js例子

React.js安装使用

A、在HTML引用React

B、create-react-app

猜你喜欢