React 可以直接下載使用,下載包中也提供了很多學習的實例。
本教程使用了 React 的版本為 v17.0.2,你可以在官網(wǎng) http://facebook.github.io/react/ 下載最新版。
你也可以直接使用 React CDN 庫,地址如下:
<script src="https://unpkg.com/react@17/umd/react.production.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" rel="external nofollow" rel="external nofollow" ></script>
使用實例
實例
以下實例展示了一個h1標題的輸出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>學編程,就到W3Cschool</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
嘗試一下 ?
實例解析:
實例中我們引入了三個庫:? react.production.min.js
? 、?react-dom.production.min.js
? 和 ?babel.min.js
?:
- react.production.min.js - React 的核心庫
- react-dom.production.min.js - 提供與 DOM 相關的功能
- babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 的瀏覽器上執(zhí)行 React 代碼。
- Babel 內嵌了對 JSX 的支持。
- 通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平
注意:在瀏覽器中使用Babel來編譯JSX效率是非常低的,一般來說前端開發(fā)工作者在頁面部署到網(wǎng)站前先使用babel進行編譯。
ReactDOM.render(
<h1>學編程,就到W3Cschool</h1>,
document.getElementById('example')
);
以上代碼將一個 h1 標題,插入 id="example" 節(jié)點中。
注意:
如果我們需要使用 JSX,則 <script> 標簽的 type 屬性需要設置為 text/babel。
通過 npm 使用 React
如果你的系統(tǒng)還不支持 Node.js 及 NPM 可以參考我們的 Node.js 教程。
我們建議在 React 中使用 CommonJS 模塊系統(tǒng),比如 browserify 或 webpack,本教程使用 webpack。
國內使用 npm 速度很慢,你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com
這樣就可以使用 cnpm 命令來安裝模塊了:
$ cnpm install [name]
更多信息可以查閱:http://npm.taobao.org/。
還有一款新的構建工具非常值得一試——vite,給你帶來更快的構建體驗,相關教程可以前往vite教程進行了解!
使用webpack搭建React
第一步、安裝全局包
$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g
第二步、創(chuàng)建根目錄
創(chuàng)建一個根目錄,目錄名為:reactApp,再使用 npm init 初始化,生成 package.json 文件:
$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) youj-react-test
version: (1.0.0)
description: W3Cschool教程 react 測試
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/laolan/www/reactApp/package.json:
{
"name": "youj-react-test",
"version": "1.0.0",
"description": "W3Cschool教程 react 測試",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
第三步、添加依賴包及插件
因為我們要使用 React, 所以我們需要先安裝它,--save 命令用于將包添加至 package.json 文件。
$ npm install react --save
$ npm install react-dom --save
同時我們也要安裝一些 babel 插件
$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015
第四步、創(chuàng)建文件
接下來我們創(chuàng)建一些必要文件:
$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js
注:touch是linux下創(chuàng)建新文件的命令,在Windows中可以使用ni命令替換touch命令。即
ni index.html ni App.jsx ni main.js ni webpack.config.js
第五步、設置編譯器,服務器,載入器
打開 webpack.config.js 文件添加以下代碼:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [ {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
- entry: 指定打包的入口文件 main.js。
- output:配置打包結果,path定義了輸出的文件夾,filename則定義了打包結果文件的名稱。
- devServer:設置服務器端口號為 7777,端口后你可以自己設定 。
- module:定義了對模塊的處理邏輯,這里可以用loaders定義了一系列的加載器,以及一些正則。當需要加載的文件匹配test的正則時,就會調用后面的loader對文件進行處理,這正是webpack強大的原因。
現(xiàn)在打開 package.json 文件,找到 ?"scripts"
?中的? "test" "echo \"Error: no test specified\" && exit 1"
? 使用以下代碼替換:
"start": "webpack-dev-server --hot"
替換后的 package.json 文件 內容如下:
{
"name": "youj-react-test",
"version": "1.0.0",
"description": "W3Cschool教程 react 測試",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
現(xiàn)在我們可以使用? npm start
?命令來啟動服務。?--hot
?命令會在文件變化后重新載入,這樣我們就不需要在代碼修改后重新刷新瀏覽器就能看到變化。
第六步、index.html
設置?<div id = "app">
? 為我們應用的根元素,并引入 index.js 腳本文件。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>React App - W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
第七步、App.jsx 和 main.js
這是第一個 react 組件。后面的章節(jié)我們會詳細介紹 React 組件。這個組件將輸出 Hello World!!!。
App.jsx 文件代碼
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!<br />
歡迎來到W3Cschool教程學習?。?!
</div>
);
}
}
export default App;
我們需要引入組件并將其渲染到根元素 App 上,這樣我們才可以在瀏覽器上看到它。
main.js 文件代碼
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
注意:
如果想要組件可以在任何的應用中使用,需要在創(chuàng)建后使用 export 將其導出,在使用組件的文件使用 import 將其導入。
第八步、運行服務
完成以上配置后,我們即可運行該服務:
$ npm start
通過瀏覽器訪問 http://localhost:7777/,輸出結果如下:
完整實例下載
以上測試實例各文件代碼下載地址:reactApp.zip。
更多建議: