React 使用方式
文章目錄
一.cdn 鏈接的方式
通過cdn鏈接的方式,不涉及項目構建的使用
1.掛載點
<!--1.掛載點-->
<div id="app"></div>
2.引入所需要的包
reactreact核心內容react-dom用來渲染真實dom的一個庫- babel 用來編譯不被瀏覽器支持的代碼編譯工具
<!--
2.引入所需要的包
react react核心內容
react-dom 用來渲染真實dom的一個庫
-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- babel-standalone 直接用在瀏覽器上的。 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
3.寫React代碼
-
ReactDom.render()
render非常重要的一個方法,一個react項目,只調用一次
2個參數
1.渲染在頁面上的內容(react元素或html或虛擬dom)
2.要渲染在頁面的位置(掛載點)
<!-- 需要指定type="text/babel" 才能被babel解析 -->
<script type="text/babel">
/**
* ReactDom.render(); render非常重要的一個方法,一個react項目,只調用一次
* 2個參數
* 1.渲染在頁面上的內容(react元素或html或虛擬dom)
* 2.要渲染在頁面的位置(掛載點)
*/
ReactDOM.render(
<h1>使用CDN方式使用React</h1>, //jsx語法
document.getElementById('app')
);
</script>
需要注意的是:script的type屬性需要指定爲text/babel.才能保證咱們的代碼被babel解析
4.擴展CDN
CDN是指構建在網絡之上的內容分發網絡,依靠部署在各地邊緣服務器,通過中心平臺的負載均衡,內容分發,調度等功能模塊,使用戶就近獲取所需內容,降低網絡擁塞,提高用戶訪問響應速度和命中率
二.基於webpack搭建配置環境
1.前期的必要配置
1.安裝相關插件
1.初始化
npm init -y //初始化
2.安裝webpack以及支持熱更新
npm install --save-dev webpack webpack-cli webpack-dev-server //webpack相關以及熱更新
- webpack-dev-server 支持熱更新
3.安裝react相關
npm install --save react react-dom //react核心插件和react-dom渲染dom
-
react react核心插件
-
react-dom 渲染真實dom
4.安裝babel相關
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
- @babel/core 調用Babe的API進行轉碼的包
- babel-loader 執行轉義的核心包
- @babel/preset-env 新的預設,可以根據配置的目標運行環境自動啓用需要的Babel插件
- @babel/preset-react 用於轉義React的JSX語法
5.安裝打包相關插件
npm install --save-dev html-webpack-plugin clean-webpack-plugin
-
html-webpack-plugin 用於簡化創建的HTML文件,它會在body中用script標籤來包含我們生成的所有bundleswen文件
-
clean-webpack-plugin 用於在生成環境中編譯文件時,會先刪除build或dist目錄文件,然後生成新的文件
原因是:隨着文件的增加,刪除,打包的dist文件內可能會產生一些不再不要的靜態資源,我們並不希望將這些靜態資源部署到服務器上佔用空間,所以每次打包前,清理dist目錄
6.安裝相應的loader
-
處理後綴爲.css文件的loader
npm install --save-dev style-loader css-loader -
處理後綴爲.less的loader
npm install --save-dev less-loader -
處理後綴爲.scss的loader
cnpm install --save-dev node-sass sass-loader -
處理css兼容的loader
npm install --save-dev postcss-loader postcss -
處理文件copy到目標文件夾的loader
npm install --save-dev url-loader file-loader
url-loader可以設置圖片大小限制，當圖片超過限制時，其表現行爲等同於 file-loader而當圖片不超過限制時，則會將圖片以base64的形式打包進css文件，以減少請求次數
PS:css文件方面根據實際項目使用情況,使用相應的loader,處理css兼容的時候,需要在根目錄下新建一個postcss.config.js
module.exports = {
plugins: [
// require('autoprefixer')('last 100 versions' )
require('autoprefixer')(
{ overrideBrowserslist:
[
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie> 8',
'iOS >= 8',
'Android >= 4.4'
]
}
)
]
}
7.創建webpack.config.js
8.創建babel配置文件(babelrc)
根目錄下創建一個.babelrc的文件,然後配置相應的內容來告訴babel-loader使用ES6和JSX插件
{
//配置相應內容來告訴babel-loader使用ES6和JSX插件
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
9.src文件夾放源代碼
一般我們所有的源代碼都是放在src文件夾
創建main.js,作爲入口文件
10.public文件夾 放靜態資源文件
創建index.html 裏面加個<div id='app'></div>作爲模版
注意:上面步驟命令代碼中的–save-dev和–save所代表的意思是什麼
- npm install --save-dev packageName 是要寫入package.json的devDependencies中的,用於開發環境
- npm install --save packageName 是要寫入pageckage.json的dependcies中的,用於生產環境
--save-dev可以簡寫 -D --save可以簡寫 -S
2.配置webpack.config.js
//引入path模塊
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//入口絕對路徑
const APP_DIR = path.resolve(__dirname, 'src');
//出口絕對路徑
const BUILD_DIR = path.resolve(__dirname, 'dist');
const config = {
//入口
entry: APP_DIR + '/main.js',
//出口
output: {
path: BUILD_DIR,
//出口文件名
filename: 'bundle.js'
},
//模式 生產環境或開發環境
mode: 'development', // production||development
module: {
//配置loader
rules: [
{
//編譯後綴爲js和jsx格式文件
test: /\.(js|jsx)$/,
use: {
//使用babel-loader這個loader庫
loader: "babel-loader"
}
},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ["style-loader", 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ["style-loader", 'css-loader', 'postcss-loader', 'sass-loader'] },
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000" },
{ test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader" }
]
},
//熱更新
devServer: {
port: 9000,
//以哪個文件夾作爲發佈的網站目錄
contentBase: './public',
//自動打開瀏覽器
open: true,//自動打開瀏覽器
hot: true,//實時刷新(開啓熱更新)
},
resolve: {
//設置別名
alias: {
//將src文件設置一個別名
'@': path.resolve(__dirname, './src')
}
},
//插件
plugins: [
new HtmlWebpackPlugin({
// 頁面需要使用模版符號來輸出 <%= htmlWebpackPlugin.options.title %>
title: '首頁',
//基於這個index.html模版,否則不會生成 <div id='app'></div>
template: path.resolve(__dirname, './public/index.html')
}),
//清除文件
new CleanWebpackPlugin(),
//用於熱更新,這兩個插件不用引入,因爲是webpack內置的
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
module.exports = config;
2.使用React編碼
在入口文件中,使用react編碼
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>使用webpack方式使用React</h1>, //jsx語法
document.getElementById('app')
);
3.執行打包
在package.json中配置如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js",
"start":"npm run dev"
},
- dev是開發環境運行
- build是打包上線時運行 記住打包上線時還需要修改webpack.config.js中的mode爲生產環境
- start 方便使用npm start執行
4.文件目錄
|-- react-webpack
|-- .babelrc babel配置文件
|-- package-lock.json
|-- package.json 主要的包文件
|-- postcss.config.js 處理css兼容的文件
|-- readme.md
|-- webpack.config.js 主要的webpack配置文件
|-- dist 打包後的目錄
|-- public 靜態資源文件
| |-- index.html
|-- src 源代碼
|-- main.js 項目主入口
|-- assets 靜態資源
|-- scss.css
|-- style.css
三.採用官方腳手架(2種方法)
1.全局安裝腳手架一次
cnpm install -g create-react-app
https://github.com/facebook/create-react-app
1.創建項目
create-react-app < ProjectName >
2.啓動項目
npm start
2.使用npx創建腳手架
npx create-react-app < ProjectName >
npx 命令，先檢查局部中有沒有create-react-app, 如果有， 跟上面一樣創建和啓動項目
如果沒有，再檢查全局下有沒有這個命令， 如果有， 跟上面一樣創建和啓動項目
如果都沒有，自動局部安裝 create-react-app ，然後跟上面一樣創建和啓動項目