React入門：從零搭建一個React項目

時間 2019-11-09

標籤 react 入門搭建一個項目欄目 React 简体版

原文原文鏈接

1、初始化項目

新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關鍵字，後面使用插件時會發生錯誤。
init項目環境，項目信息可默認或自行修改css
```
mkdir firstreact
cd firstreact
npm init
```

2、安裝webpack

新建gitignore文件，用於忽略安裝的包文件，文件內容: node_modules
安裝webpack， 注意：我此處安裝的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不一樣，具體參考webpack文檔webpack中文文檔html
```
npm i --save-dev webpack
```

3、配置webpack環境

新建文件夾，文件名：src

src目錄下新建文件hello.js,文件內容：node

module.exports = function () {
  var element = document.createElement('h1');

  element.innerHTML = 'Hello React';

  return element;
};

src目錄下新建文件index.js，文件內容：react

var hello = require('./hello.js');

document.body.appendChild(hello());

新建文件webpack.config.js，一個最基礎的webpack配置以下：webpack

const webpack = require('webpack');
const path = require('path');
var config = { 
    entry: [ './src/index.js' ], // 打包入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'bundle.js' 
    } // 打包輸出文件
};
module.exports = config;

執行webpack。執行完成後，根目錄下會新增一個dist文件夾，文件夾下是打包出來的js文件bundle.jsgit
```
webpack
```
安裝html-webpack-plugin，該插件將爲你生成一個 HTML5 文件，其中包括使用 script 標籤的 body 中的全部 webpack 包。es6
```
npm i --save-dev html-webpack-plugin
```

html-webpack-plugin配置，webpack.config.js內容以下web

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

var config = { 
    entry: [ './src/index.js' ], // 打包入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'bundle.js' 
    },// 打包輸出文件
    plugins: [
        new HtmlwebpackPlugin({ 
            title: 'Hello React', 
        })
    ]
};

module.exports = config;

再次執行webpack，此時dist目錄下生成了一個新文件index.htmlnpm
```
webpack
```
安裝webpack-dev-server和webpack-cli，提供一個簡單的 web 服務器，而且可以實時從新加載。json
```
npm install --save-dev webpack-dev-server webpack-cli
```

修改webpack.config

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

var config = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:3000',
        './src/index.js'
    ], // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }, // 打包輸出文件
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello React'
        }),
    ]
};
module.exports = config;

配置webpack啓動的快方式，此處webpack4在啓動服務是要求設置mode，告知 webpack 使用相應模式的內置優化。未設置會報一個警告。mode選項支持「development」「production」「none」，具體信息請閱文檔修改package.json文件：
```
············
  "scripts": {
    "start": "webpack-dev-server --mode=development --port 3000 --hot",
    "build": "webpack --mode=production"
  }
···········
```
啓動服務，服務啓動後打開瀏覽器訪問http://localhost:3000/
```
npm run dev
```

3、優化開發環境

css編譯和js編譯。如今開發時通常css都會使用擴展css語法，如less或sass，這時就須要在項目中安裝css編譯插件。此處以less爲例。es6和es7語法也須要babel編譯。

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

var config = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:3000',
        './src/index.js'
    ], // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }, // 打包輸出文件
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'babel-loader' }
                ]
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello React'
        }),
    ]

安裝：

npm i --save-dev less css-loader style-loader less-loader
npm i --save-dev babel-loader  @babel/core @babel/preset-env @babel/preset-react

修改webpack.config.js

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

var config = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:3000',
        './src/index.js'
    ], // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }, // 打包輸出文件
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'babel-loader' }
                ]
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello React'
        }),
    ]
};
module.exports = config;

根目錄下新建.babelrc文件，配置文件內容以下

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

在src目錄下新建文件index.less，文件內容以下
```
body{
  h1{
    color: green;
  }
}
```

修改src目錄下的index.js文件：

import hello from './hello.js';
import './index.less';

document.body.appendChild(hello());

再次啓動服務
```
npm run start
```

目前爲止完成了一個最基礎的項目結構，後面須要使用其餘框架的話再此基礎上修改。在這過程當中因各個插件工具的版本不一樣可能會發生不一樣錯誤，遇到錯誤時，請查詢相關文檔。

4、在項目中使用React

安裝react。
```
npm i --save-dev react react-dom
```

修改src目錄下index.js，文件內容以下：

import React from 'react';
import ReactDOM from 'react-dom';

import './index.less';

class APP extends React.Component  {
    render() {
        return (<h1>Hello React</h1>)
    }
}

ReactDOM.render(<APP/>, document.getElementById('content'));

在src目錄下新建index.html，在html增長掛載節點content。文件內容以下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="content"></div>
</body>
</html>

對應修改webpack.config.js文件，爲htmlWebpackPlugin修改template

············

    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello React',
            template: './src/index.html'
        }),
    ]
    
············

目錄結構爲：

│  .babelrc
│  .gitignore
│  package.json
│  webpack.config.js
│      
└─src
        hello.js
        index.html
        index.js
        index.less

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。