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

一、初始化项目

  1. 新建文件夹,文件名firstreact 文件夹称号不要用react,node这类关键字,背面运用插件时会发作毛病。
  2. init项目环境,项目信息可默许或自行修正

    mkdir firstreact
    cd firstreact
    npm init

二、装置webpack

  1. 新建gitignore文件,用于疏忽装置的包文件,文件内容: node_modules
  2. 装置webpack, 注重:我此处装置的webpack版本是4.28.4,webpack4和webpack2, webpack3的一些设置差别,详细参考webpack文档webpack中文文档

    npm i --save-dev webpack

三、设置webpack环境

  1. 新建文件夹,文件名:src
  2. src目次下新建文件hello.js,文件内容:

    module.exports = function () {
      var element = document.createElement('h1');
    
      element.innerHTML = 'Hello React';
    
      return element;
    };
  3. src目次下新建文件index.js,文件内容:

    var hello = require('./hello.js');
    
    document.body.appendChild(hello());
  4. 新建文件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;
  5. 实行webpack。实行完成后,根目次下会新增一个dist文件夹,文件夹下是打包出来的js文件bundle.js

    webpack
  6. 装置html-webpack-plugin,该插件将为你天生一个 HTML5 文件, 个中包含运用 script 标签的 body 中的一切 webpack 包。

    npm i --save-dev html-webpack-plugin 
  7. 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;
  8. 再次实行webpack,此时dist目次下天生了一个新文件index.html

    webpack
  9. 装置webpack-dev-server和webpack-cli,供应一个简朴的 web 效劳器,而且可以及时从新加载。

    npm install --save-dev webpack-dev-server webpack-cli
  10. 修正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;
  11. 设置webpack启动的快体式格局,此处webpack4在启动效劳是请求设置mode,示知 webpack 运用响应形式的内置优化。未设置会报一个正告。mode选项支撑“development”“production”“none”,详细信息请阅文档 修正package.json文件:

    ············
      "scripts": {
        "start": "webpack-dev-server --mode=development --port 3000 --hot",
        "build": "webpack --mode=production"
      }
    ···········
  12. 启动效劳,效劳启动后翻开浏览器接见http://localhost:3000/

    npm run dev
三、优化开辟环境
  1. 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'
            }),
        ]
  2. 装置:

    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;
  3. 根目次下新建.babelrc文件,设置文件内容以下

    {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ]
    }
  4. 在src目次下新建文件index.less,文件内容以下

    body{
      h1{
        color: green;
      }
    }
  5. 修正src目次下的index.js文件:

    import hello from './hello.js';
    import './index.less';
    
    document.body.appendChild(hello());
  6. 再次启动效劳

    npm run start

目前为止完成了一个最基本的项目构造,背面须要运用其他框架的话再此基本上修正。在这过程当中因各个插件东西的版本差别可能会发作差别毛病,碰到毛病时,请查询相干文档。

四、在项目中运用React

  1. 装置react。

    npm i --save-dev react react-dom
  2. 修正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'));
  3. 在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>
    1. 对应修正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
    原文作者:牛什么莹
    原文地址: https://segmentfault.com/a/1190000018216741
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞