React入门：从零搭建一个React项目

jiezi

6 年前

一、初始化项目

新建文件夹，文件名 firstreact 文件夹名称不要用 react，node 这类关键字，后面使用插件时会发生错误。

init 项目环境，项目信息可默认或自行修改
mkdir firstreact
cd firstreact
npm init

二、安装 webpack

新建 gitignore 文件，用于忽略安装的包文件，文件内容: node_modules

安装 webpack，注意：我此处安装的 webpack 版本是 4.28.4，webpack4 和 webpack2, webpack3 的一些配置不同，具体参考 webpack 文档 webpack 中文文档
npm i –save-dev webpack

三、配置 webpack 环境

新建文件夹，文件名：src

src 目录下新建文件 hello.js, 文件内容：
module.exports = function () {
var element = document.createElement(‘h1’);

element.innerHTML = ‘Hello React’;

return element;
};

src 目录下新建文件 index.js，文件内容：
var hello = require(‘./hello.js’);

document.body.appendChild(hello());

新建文件 webpack.config.js，一个最基础的 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.js
webpack

安装 html-webpack-plugin，该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。
npm i –save-dev html-webpack-plugin

html-webpack-plugin 配置，webpack.config.js 内容如下
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.html
webpack

安装 webpack-dev-server 和 webpack-cli，提供一个简单的 web 服务器，并且能够实时重新加载。
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’);

配置 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

三、优化开发环境

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’);

根目录下新建.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

目前为止完成了一个最基础的项目结构，后面需要使用其他框架的话再此基础上修改。在这过程中因各个插件工具的版本不同可能会发生不同错误，遇到错误时，请查询相关文档。

四、在项目中使用 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