React入门系列 - 2 编写第一个Hello world的React程序

时间 2019-11-30

标签 react 入门系列编写第一个 hello world 程序栏目 React 繁體版

原文原文链接

2.1 采用create react app 编写

create-react-app项目 [点击前往Github] 是facebook推出的入门初始化项目，适合新手第一次使用，无需进行各类配置，完美的实现了开箱即用理念。html

2.1.1 创建项目

npx create-react-app my-app
cd my-app
npm start
复制代码

npx命令是npm在5.x版本以后推出的一个加强功能，它帮助开发者能够临时下载项目进行执行以后，会自动删除这个临时下载的项目。不会在全局项目中生成文件。前端

上面的命令，表示，下载create-react-app项目，而且运行这个项目，在my-app目录中建立新项目。node

2.1.2 运行项目

建立完成以后，进入 my-app 目录。执行npm语句，进行本地开发预览。react

咱们进入这个建立好的文件夹my-app,执行npm run start便可进入本地开发预览了。webpack

如图所示，咱们已经在本地端口3000上运行了这个程序。快打开你的浏览器查看一下吧。git

2.2 手动配置webpack编写

这个章节有点超纲，有兴趣的同窗能够仔细阅读一下。这一节是针对有兴趣深刻了解的同窗的，若是你如今一会儿仍是没法理解这些知识，建议后面再来回顾。github

2.2.1 创建项目

咱们首先建立一个webpack-app文件夹。而后使用VS Code打开这个目录。使用Ctrl+~键打开控制台，若是没法打开说明热键已经被占用了。点击菜单的 查看 -> 终端。web

第一步先输入npm init 创建前端项目的配置文件。npm

直接一路回车到结束。json

2.2.2 安装必要的开发包

安装react,react-dom两个包

npm install --save-dev react react-dom
复制代码

安装webpack

npm install --save-dev webpack-cli webpack webpack-dev-server
复制代码

2.2.3 编写一个react的hello world

首先咱们编写一个HelloWorld的React组件

import React, { PureComponent } from 'react'

export default class index extends PureComponent {
  render() {
    return (
      <div> Hello world React! </div>
    )
  }
}

复制代码

可是这仅仅是一个组件，咱们须要一个HTML页面来容纳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>Helloworld React</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
复制代码

到这一步，React须要准备的东西已经完成了。

咱们须要来编写webpack对这个项目进行打包，而webpack对开发提供的DevServer的支持，让咱们来看一看，到底怎么作的。

咱们在项目根目录中建立一个名为'webpack.config.js'的文件。

const path = require('path')

module.exports = {
    mode:'development',
    entry: './src/index.js',
    context: __dirname,
    target: 'web',
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        hot: true,
        noInfo: true,
        port: 3000
    }
}
复制代码

配置完webpack.config.js文件以后，咱们将在packageInfo.json中的scripts节点加入一个新的命令。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
复制代码

咱们在终端运行npm run dev以后，你将会在控制台中看到以下内容。

webpack编译以后告诉咱们，它没法识别JSX格式。这个问题就延伸出了，咱们该如何对现代化的前端进行配置。

如今对于前端代码的转换，一般采用的是babel转译。咱们来看看编译react须要哪些插件。点此查看babel如何配置webpack

首先，咱们须要安装babel,在终端输入npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
咱们修改webpack.config.js文件，让他看起来像这样

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/entry.js',
    context: __dirname,
    target: 'web',
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, 'public'),
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(
            Object.assign({}, {
                inject: true,
                template: __dirname + '/public/index.html',
            })
        ),
    ]
}
复制代码

在根目录建立.bablerc文件，这个文件是用于配置babel编译的,在文件中输入如下内容。

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}
复制代码

不知道你是否注意到了，我修改了entry入口文件。由于仅仅一个React组件并没有法正常运行，咱们须要告知React框架，咱们将组件注入在哪一个DOM下，这个文件能够配置全局的Store、路由、全局的设定等。咱们在src目录下建立entry.js,下面是entry.js文件的源码。

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';

ReactDOM.render(<Index />, document.querySelector('#app')); 复制代码

代码很是的简单，就是调用ReactDOM将React组件渲染到了id为app的节点下。

OK,如今咱们再次运行npm run dev，你将会看到webpack编译成功的提示，咱们如今打开浏览器，输入http://localhost:3000，你将会看到运行编译成功的网页。

2.2.4 webpack加入HMR支持(热更新)

你们有没有发现，咱们如今这个项目修改了以后，是须要刷新整个页面的。并无那种很高端很大气的动态刷新？

如今咱们就将热更新加入咱们的项目中。

咱们将webpack.config.js文件作以下修改

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')

module.exports = {
    mode: 'development',
    entry: [
        'webpack/hot/dev-server',
        './src/entry.js'
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    context: __dirname,
    target: 'web',
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, 'public'),
        hot: true,
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(
            Object.assign({}, {
                inject: true,
                template: __dirname + '/public/index.html',
            })
        ),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}
复制代码

注意到了么，咱们新增了NamedModulesPlugin和HotModuleReplacementPlugin两个插件。还在devServer节点中加入了hot:true，而且追加了output节点。

而后，咱们将entry.js文件修改成这样：

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';

ReactDOM.render( < Index / > , document.querySelector('#app')); if (module.hot) { module.hot.accept() } 复制代码

咱们再次使用npm run dev运行项目，而后修改index.js文件中的字符串，你会发现，如今是无刷新更新页面内容了。

2.2.5 webpack优化打包速度

咱们在package.json的scripts节点中加入一条新语句"webpack":"webpack",而后来看一看如今项目默认的打包速度是多少时间。

耗时:2211ms

2.2.5.1 babel缓存

咱们修改webpack.config.js文件中的babel配置项

module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader?cacheDirectory=true"
        }]
    },
复制代码

在babel-loader后面加入了cacheDirectory=true，再次执行编译，第一次你会发现速度并无优化，这是由于尚未创建缓存文件，可是第二次速度就提高了20%。

耗时:1644ms (-500ms)

其余的包括抽取公共组件，加入hash等等策略咱们之后再细聊。

源码下载地址:github.com/yodfz/learn…

原文地址:www.yodfz.com/detail/35/2…