淘先锋技术网

首页 1 2 3 4 5 6 7

    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 

运行后,效果如下图: