Part 1 - Create React App

Li,Ming J M

于 2022-03-21 15:48:12 发布

阅读量315

点赞数 1

本文链接：https://blog.csdn.net/ljm_lijingming/article/details/123570694

版权

Javascript 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

Step 1

安装 NodeJS

Step 2

假定根目录在F://React//ReactApp

打开cmd，依次输入一下命令：

1、F:

3、cd F://React//ReactApp

4、npm init

5、输入下面的信息：

{
"name": "package.json",
"version": "1.0.0",
"description": "reactapp",
"main": "index.js",
"scripts": {
"test": "test"
},
"keywords": [
"reactapp"
],
"author": "ming",
"license": "ISC"
}

6、最后输入 y 确认，此时在目录里面会生成一个文件：package.json

Step 3

我们需要手动在根目录创建几个文件夹和文件，如下图：

其中，index.js先留空白，index.html 代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react app</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Step 4

1、在cmd中运行命令：npm install react react-dom

2、打开index.js，输入以下代码：

import React from 'react'
import reactDom from 'react-dom'
import ReactDom from 'react-dom'

reactDom.render(
    <h1>react app</h1>,
    document.getElementById('app')
)

Step 5

1、在cmd中运行命令：npm install -g webpack webpack-cli

2、在config文件夹中创建webpack.config.js，添加如下代码：

const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)

module.exports={
    entry:{
        reactapp:'./index.js'
    },
    output:{
        filename:'[name].js',
        path:rootpath,
        publicPath:publicPath
    },
    mode:'development',
    module:{
        rules:[
            {
                test:/\.(js)$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.css$/,
                exclude:/node_modules/,
                use:['style-loader','css-loader']
            }
        ]
    },
    resolve:{
        modules:['node_modules'],
        extensions:['.js','.json']
    }
}

Step 6

1、安装babel,在cmd中运行命令：npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-transform-react-jsx

2、在根目录下创建babel.config.json，添加如下代码：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets":{
                    "browsers":[
                        "> 1%",
                        "last 2 versions"
                    ]
                },
                "useBuiltIns":"usage",
                "corejs":3,
                "modules":"auto"
            },
            "@babel/preset-react"
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-react-jsx"
    ]
}

Step 7

到此时，我们已经完成了整个项目的简单搭建，在cmd中运行命令：npm run build，

这时在项目根目录会生产一个build文件夹，里面有个reactapp.js,此时，我们代开index.html，在里面应用这个reactapp.js包即可，如下图所示：

此时，我们在browser中打开预览index.html,如下所示：（此处用live server预览，也可以直接双击打开预览）

Step 8

我不想生产的reactapp.js是手动inject到index.html里面的，我想自动inject到html

这时，我们要安装html-webpack-plugin

1、在cmd中npm install html-webpack-plugin

2、修改webpack.config.js

const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)

const HtmlWebpackPlugin= require('html-webpack-plugin')

module.exports={
    entry:{
        reactapp:'./index.js'
    },
    output:{
        filename:'[name].js',
        path:rootpath,
        publicPath:publicPath
    },
    mode:'development',
    module:{
        rules:[
            {
                test:/\.(js)$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.css$/,
                exclude:/node_modules/,
                use:['style-loader','css-loader']
            }
        ]
    },
    resolve:{
        modules:['node_modules'],
        extensions:['.js','.json']
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html',
            inject:true
        })
    ]
}

3、这时，再次运行npm run build，我们会发现，在build folder里，reactapp.js会自动注入到了index.html里面。

此时在browser里面预览，一样得到之前的预览效果。

总结：此时，这个项目基本框架已完成了，如果你看过vue或者是react 的cli创建出来的项目，基本也是这样创建出来的，当然，上面的步骤只是非常简单的创建一个基本的项目框架，并不能跟vue或react cli 框架模板相提并论，这里只是演示在不适用vue或者react cli创建模板时，我们如何自己手动创建一个工程化web项目。

后面我会继续往这个项目里面集成webpack-dev-server,sass/css，基于class的组件编程，异步加载bundle，Development/Production Environments，proxy request api(dev)，js/css分包（webpack optimization）

再后面我想写一下自己怎么去实现一个route (vue/react的route)。