【第一篇】零基础学习 React.js之——Hello World

时间  2019-11-26
标签 第一篇 零基础 学习 react.js react hello world 栏目 React 繁體版
原文   原文链接

前言

若是你没有接触过 React.js，那么机会来了，我将从零开始教你如何开始 React.js，话很少说，上车吧！本篇介绍如何用 React.js 输出 Hello world。javascript

简绍

什么是 React.js

“A JavaScript library for building user interfaces”，这是 React 官网给本身一句话的归纳。简单来讲，React 就是一个使用 JavaScript 构建可组合的用户界面引擎。它的主要做用在于构建 UI ，虽然有人说其属于 MVC 的 V（视图）层，但在 React 官方博客中阐明 React 不是一个 MVC 框架，而是一个用于构建组件化 UI 库，是一个前端界面开发工具。css

关键词：可组合、组件化html

React 的来源

React 源于 Facebook 内部 PHP 框架 XHP 的一个分支，在每次有请求进入时会渲染整个页面。而 React 的出现就是为了把这种从新渲染整个页面的 PHP 式工做流带入到客户端应用。 在使用 React 构建用户界面时，只需定义一次，就能将其复用在其余多个地方。状态改变，无需做出任何操做，它会自动高效地更新界面。今后只须要关心维护应用内的状态，而再也不须要不断关注 DOM 节点。从复杂的 DOM 操做中解脱出来，让工做重心回归状态自己。前端

遵循传统，在学习 React 开始前先带领你们简单学会几种方式输出 Hello World。java

【第一种】不涉及工程化的 Hello World

一个不涉及工程化的 Hello World 是这样的node

jsfiddle.net/allan91/2h1…react

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello World</h1>, //JSX格式
        document.getElementById("root")
      );
    </script>
</body>

</html>
复制代码

上面代码很简单，直接引用 CDN (Content Delivery Network) 上的 react.min.js、react-dom.min.js 和 babel.min.js 这三个脚本便可直接使用。惟一须要注意的就是 script 的 type 属性须要写为 “text/babel”。浏览器打开这个 html 便可展现 Hello World。webpack

注1：CDN (Content Delivery Network) 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，经过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，下降网络拥塞，提升用户访问响应速度和命中率。git

注2：react.main.js 是 React 的核心代码包；react-dom.min.js 是与 DOM 相关的包，主要用于把虚拟 DOM 渲染到文档变为真实 DOM，固然还有其它一些方法；babel.min.js是用来编译还不被浏览器支持的代码的编译工具。其中 min 表示这是被压缩过的 JS 库。 或者将 JS 代码写在外面，好比根目录新建 main.js：github

ReactDOM.render(
        <h1>Hello World</h1>, //JSX格式
        document.getElementById("root")
);
复制代码

而后在html文件内引入：

<script type=“text/babel” src=“./main.js”></script>
复制代码

【第二种】基于 Webpack 的 Hello World

首先要确保读者的开发设备上已经安装过 NodeJs，新建一个项目：

mkdir react-hello-world
cd react-hello-world
npm init -y
复制代码

项目中使用的是 webpack 4.x，不一样于 webpack 3.x，webapck-cli 在 4 中被分离了，因此须要同时安装它们两个库，在项目根目录执行：

npm i webpack webpack-cli -D
复制代码

注：上面命令代码中 npm install module_name —D 即 npm intsll module_name —save-dev。表示写入 package.json 的 devDependencies，devDependencies 里面的插件用于开发环境，不用于生产环境。npm install module_name —S 即 npm intsll module_name —save。dependencies 是须要发布到生产环境的。 安装完 webpack，须要有一个配置文件让 webpack 知道要作什么事，这个文件取名为 webpack.config.js。

touch webpack.config.js
复制代码

而后配置内容以下

// ./webpack.config.js 
var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');

var config = {
  entry: APP_DIR + '/index.jsx',	// 入口
  output: {
    path: BUILD_DIR,		// 出口
    filename: 'bundle.js'	// 出口文件名
  }
};

module.exports = config;
复制代码

这是 webpack 使用中最简单的配置，只包含了打包的入口和出口。 APP_DIR 表示当前项目的入口路径，BUILD_DIR表示当前项目打包后的输出路径。入口须要新建一个应用的入口文件 index.jsx，先直接在文件中用 JS 打印一下：

console.log('Hello World’); 复制代码

用终端在根目录执行：

./node_modules/.bin/webpack -d
复制代码

上面的命令在开发环境运行以后会在根目录生成一个新的文件 build 文件夹，里面包含了 webpack 打包的 bundle.js 文件。 接下来建立 index.html，用于在浏览器执行 bundle.js：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
</head>

<body>
    <div id=“app”></div>

    //  bundle.js 是 webpack 打包后生成的文件
    <script src="build/bundle.js" type="text/javascript"></script>
</body>

</html>
复制代码

如今读者能够在浏览器打开 index.html 文件，在控制台能看到 ./src/index.jsx 打印的内容：Hello World 。

为了提升效率和使用最新的 ES 语法，一般使用 JSX 和 ES6 来进行开发。但 JSX 和 ES6 语法在浏览器中还不被支持，因此须要在 webpack 中配置相应的 loader 模块来编译它们。只有这样，打包出来的 bundle.js 文件才能被浏览器识别和运行。

接下来安装 babel:

npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react
复制代码

上面安装的包分别是：

  • babel-core 是用于调用 Babel 的 API 进行转码的包；
  • babel-loader 是执行转义的核心包；
  • babel-preset-env 是一个新的 preset，能够根据配置的目标运行环境自动启用须要的babel插件；
  • babel-preset-react 用于转义 React 的 JSX 语法。

在 webpack.config.js 中配置 loader：

var webpack = require("webpack");
var path = require("path");

var BUILD_DIR = path.resolve(__dirname, "build");	// 构建路径
var APP_DIR = path.resolve(__dirname, "src");	// 项目路径

var config = {
  entry: APP_DIR + "/index.jsx",	// 项目入口
  output: {	
    path: BUILD_DIR,	// 输出路由
    filename: "bundle.js"	// 输出文件命名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,	// 编译后缀为js和jsx格式文件
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"	// 使用babel-loader这个loader库
        }
      }
    ]
  }
};

module.exports = config;
复制代码

建立 .babelrc 文件：

touch .babelrc
复制代码

配置相应内容来告诉 babel-loader 去使用 ES6 和 JSX 插件：

{
  "presets" : ["env", "react"]
}
复制代码

至此为止，已经配置完开发该项目基础工做。下面来正式开始使用 React 来编写前端代码。

npm 安装 react 和 react-dom：

npm install react react-dom -S 
复制代码

用下面代码替换 ./src/index.jsx 中的 console：

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React</p>;
  }
}

render(<App/>, document.getElementById(‘app'));
复制代码

根目录执行：

./node_modules/.bin/webpack -d
复制代码

如今浏览器打开 index.html 将会在页面展现 Hello World。固然真实开发中不能每次一修改前端代码就去执行一次 webpack 编译打包，能够执行以下命令来监听文件变化：

./node_modules/.bin/webpack -d —-watch
复制代码

终端将会显示：

myfirstapp Jack$ ./node_modules/.bin/webpack -d --watch

webpack is watching the files…

Hash: 6dbf97954b511aa86515
Version: webpack 4.22.0
Time: 839ms
Built at: 2018-10-23 19:05:01
    Asset      Size  Chunks             Chunk Names
bundle.js  1.87 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.jsx] 2.22 KiB {main} [built]
    + 11 hidden modules
复制代码

这就是 webpack 的监听模式，一旦项目中的文件有改动，就会自动执行 webpack 编译命令。不过浏览器上展现的 html 文件不会主动刷新，须要读者手动刷新浏览器。若是想实现浏览器自动刷新，可使用 react-hot-loader （github.com/gaearon/rea…

真实项目开发中，通常使用 npm 命令来执行 ./node_modules/.bin/webpack -d —watch 这个命令来开发。这须要在 package.json 中配置：

{
  // ...
    "scripts": {
        "dev": "webpack -d --watch",
        "build": "webpack -p",
        "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
复制代码

如今只须要在根目录执行命令就能执行开发与构建：

npm run dev
npm run build
复制代码

以上为真实项目中一个较为完整的项目结构，读者能够在此基础上根据项目的须要自行拓展增长其它功能。源码地址为：github.com/khno/react-… 分支为master。

项目完整的结构以下：

.
├── build
│     └── bundle.js
├── index.html
├── package-lock.json
├── package.json
├── src
│     └── index.jsx
├── .gitignore
├── .babelrc
└── webpack.config.js
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程