您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Part 1 - Create React App

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)。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进