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
推送提交到遠程倉庫