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

栏目: 编程语言 · 发布时间: 5年前

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

一、初始化项目

新建文件夹，文件名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');

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
```

三、优化开发环境

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
```

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

四、在项目中使用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入门：从零搭建一个React项目》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Algorithms Unlocked

Thomas H. Cormen / The MIT Press / 2013-3-1 / USD 25.00

Have you ever wondered how your GPS can find the fastest way to your destination, selecting one route from seemingly countless possibilities in mere seconds? How your credit card account number is pro......一起来看看《Algorithms Unlocked》这本书的介绍吧!

码农工具

UNIX 时间戳转换

HSV CMYK 转换工具

HSV CMYK互换工具