my-init-react-app

从零创建一个React应用，不使用脚手架工具。
Github链接

创建说明

一组JavaScript构建工具链通常由这些组成：

一个 package 管理器，比如 Yarn 或 npm。它能让你充分利用庞大的第三方 package 的生态系统，并且轻松地安装或更新它们。
一个打包器，比如webpack或 Parcel。它能让你编写模块化代码，并将它们组合在一起成为小的 package，以优化加载时间。
一个编译器，例如 Babel。它能让你编写的新版本 JavaScript代码，在旧版浏览器中依然能够工作。

从头开始打造你自己的 JavaScript 工具链，这个教程重新创建了一些 Create React App 的功能。

文件结构

.
├── LICENSE
├── README.md
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   └── index.js
├── webpack.config.js
├── .gitignore
└── .babelrc

实现过程：

以下是在mac终端中实现的，具体文件的内容可直接粘贴本项目对应的文件

初始化npm项目，生成package.json。
初始化git，创建.gitignore忽略指定文件(node_modules等)。
添加public/index.html。
安装Babel，创建.babelrc进行配置。
安装webpack，创建webpack.config.js进行配置。
安装react、react-dom、热更新react-hot-loader。
添加src/index.js、src/App.js、src/App.css。
配置package.json，修改启动命令。
启动项目。

具体步骤：

准备：确保本机上已经安装npm、node、(git)

如果你不打算添加版本控制，所有git操作均可忽略。

初始化npm项目，生成package.json。

npm init -y

初始化git，创建.gitignore忽略指定文件(node_modules等)。

git init
touch .gitignore

.gitignore

#这个文件是让git过滤的列表

#过滤依赖
/node_modules

#过滤生产
/dist/
/build/

#苹果系统的隐藏文件
.DS_Store

添加public/index.html。

mkdir public
cd public
touch index.html

index.html

<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>React Starter</title>
</head>

<body>
  <div id="root"></div>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <script src="../dist/bundle.js"></script>
</body>

</html>

这里引入的bundle.js后面会用到。

安装Babel，创建.babelrc进行配置。

cd ..
npm install -D @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected].
touch .babelrc

.babelrc

{
  "presets": ["@babel/env", "@babel/preset-react"]
}

安装webpack，创建webpack.config.js进行配置。

npm install -g -D webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
touch webpack.config.js

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

安装react、react-dom、热更新react-hot-loader。

npm install -D react react-dom react-hot-loader

添加src/index.js、src/App.js、src/App.css。

mkdir src
cd src
touch index.js
touch App.js
touch App.css

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React, { Component} from "react";
import {hot} from 'react-hot-loader';
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello</h1>
      </div>
    );
  }
}

export default hot(module)(App);

App.css

.App {
  margin: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid red;
}

配置package.json，修改启动命令。

在package.json里配置scripts字段。

"scripts": {
    "start": "webpack-dev-server --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

启动项目。

npm start

在浏览器键入http://localhost:3000以启动项目

参考资料

Creating a React App… From Scratch.
Webpack - webpack-dev-server: command not found
推送提交到远程仓库

从零创建一个React应用，不使用脚手架工具。(自定义Create React App)