react安裝及簡單使用
阿新 • • 發佈：2022-05-19
一、腳手架工具create-react-app安裝
使用以下命令進行安裝：
npm install -g create-react-app
二、create-react-app的使用
- 在需要建立專案的位置開啟命令列
- 輸入create-react-app + 專案名稱的命令，比如：
create-react-app todolist
- 當專案建立完成後，可以進入專案，並啟動：
cd todolist
npm start
三、腳手架工具生成的目錄結構
- 重要檔案：
- index.html
- index.js
- App.js
- 檔案內容：
- App.js
import React, { Component } from 'react';
/**
import {Component} from 'react'
相當於：
import {Component} from React // 因為react匯出React物件
由於解構賦值的原因，所以Component等於React.Component
*/
//所有的元件都要繼承Component
class App extends Component {
// 傳送頁面內容
render() {
return (
<div>
Hello World
</div>
);
}
}
// 匯出App模組
export default App;
- index.js
import React from 'react'; // 匯入React的作用是使用jsx語法
import ReactDOM from 'react-dom';
import App from './App'; // 接受
// 像js中使用標籤的語法，叫做jsx語法
ReactDOM.render(<App />, document.getElementById('root'));
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>TodoList</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
1.快速構建react專案：
npm install -g create-react-app // 全域性安裝create-react-app (只需要安裝一次)
create-react-app demo // 建立專案
cd demo // 進入專案目錄
建立的專案目錄結構：
-Demo // 專案名
-node_modules // 存放第三方包
-public
-favicon.ico
-index.html
-manifest.json
-src // 頁面程式碼都寫在這下面
-App.css
-App.js
-App.test.js
-index.css
-index.js //專案入口
-logo.svg
-serviceWorker.js
-setupTest.js
.gitignore
package.json
README.md
yarn.lock
2.初始化專案
在專案的根目錄下開啟命令列，輸入：
npm init -y // 專案初始化, 執行完後會生成 package.json檔案
3.安裝所需包
安裝react 的東西,以及antd
npm i --save react react-dom antd
安裝webpack 的三個基本項
npm i webpack webpack-cli webpack-command --save-dev
安裝webpack
npm i -D webpack // 安裝最新穩定版
安裝webpack 伺服器 webpack-dev-server,讓啟動更方便
npm i --save-dev webpack-dev-server
自動建立html檔案 html-webpack-plugin
npm i --save-dev html-webpack-plugin
清除無用檔案 clean-webpack-plugin,將每次打包多餘的檔案刪除
npm i --save-dev clean-webpack-plugin
樣式編譯loader外掛
npm i --save-dev style-loader css-loader // css相關loader
npm i --save-dev node-sass sass-loader // scss 相關loader
npm i --save-dev file-loader url-loader // 載入其他檔案，比如圖片，字型
安裝babel
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader
4.根目錄建立webpack.config.js檔案,程式碼如下
const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'inline-source-map',
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}, {
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(png|svg|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
}, {
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
devServer: {
contentBase: './build',
port: 8081, // 埠號
inline: true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlPlugin({
template: 'public/index.html'
})
]
}
5.在根目錄下新增檔案 .babelrc,程式碼如下
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
6.修改 package.json
"scripts": {
"start": "webpack-dev-server --open --mode production",
"watch": "webpack --watch",
"build": "webpack --mode production",
"dev": "webpack --mode development& webpack-dev-server --open --mode development",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
7.修改public / index.html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
8.修改src / index.js檔案
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
9.修改src / App.js檔案
import React, { Component } from 'react';
import './App.css'; // 引入樣式檔案
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="main">
<div>我是首頁</div>
</div>
);
}
}
export default App;
10.修改 src / App.css檔案
.main {
background: darkgray;
width: 500px;
height: 500px;
margin: 0 auto;
}
11.啟動專案
(1) 在專案根目錄下執行
npm run dev
(2) 如果裝有yarn，也可以用yarn執行
yarn start
執行結果：xxx
作者：年輕人多學點
連結：https://www.jianshu.com/p/931b5864a101
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。