淘先锋技术网

首页 1 2 3 4 5 6 7

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

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

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

    本文以CentOS7.9 64bit环境为例介绍Node.js（简称Node）与React.js（简称React）的安装，和Helloworld程序。

目录

Node.js安装 

第一个Node.js例子

React.js安装使用

A、在HTML引用React

B、create-react-app

Node.js安装 

  1. 在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中
  2.  安装完毕后，查看版本：

第一个Node.js例子

  1.  通过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 ...');
  2. 启动该服务器： 
    node HelloWorld.js
  3. 浏览器访问

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

  1. 安装工具。安装完毕后，会在node软件并目录生成名为create-react-app的可执行文件（该可执行文件实际为链接，指向安装的create-react-app模块）： 
    # 全局安装create-react-app工具
npm install -g create-react-app
  2. 使用create-react-app工具创建一个项目： 
    ​
# 使用工具创建一个项目
create-react-app my-first-app

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

运行新创建的项目：

cd my-first-app;
npm run start

运行后，效果如下图：