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%。