react 一個(gè)UI框架
React用于構(gòu)建用戶界面的 JavaScript 庫.
react 特點(diǎn)
- mvvm
- 聲明式
- 組件化
- 生態(tài)強(qiáng)大
學(xué)習(xí)前置基礎(chǔ)
- html\css\js免費(fèi)視頻教程
- es6+
- webpack教程
- nodejs基礎(chǔ)|sass|ajax|...
簡單html的方式編寫react demo快速入門
我們可以直接把React的當(dāng)做一個(gè)JS的庫來用（生產(chǎn)環(huán)境不要這么用），如下是第一個(gè)helloword demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 第一步： 引入react的cdn的js庫 -->
<!-- react的核心庫 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- react渲染到瀏覽器上的支持庫（react可以渲染到其他的平臺） -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- babel的轉(zhuǎn)換的js庫，生產(chǎn)環(huán)境不要使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<title>aicoder.com reactdemos</title>
</head>
<body>
<!-- 第二步：添加html容器 -->
<!-- 這個(gè)是react的容器 -->
<div id="app">
</div>
<!-- 第三步：添加babel的script腳本，這個(gè)是核心的React的核心 -->
<!-- 注意：type必須是text/babel -->
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world! aicoder.com </h1>,
document.getElementById('app')
);
</script>
</body>
</html>
ReactDOM.render方法是把JSX語法生成的dom渲染到頁面上去。此方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是渲染的html標(biāo)簽，第二個(gè)參數(shù)是渲染到頁面的哪個(gè)節(jié)點(diǎn)上。
這里牽扯到JSX語法，后續(xù)會講到。
React腳手架創(chuàng)建項(xiàng)目快速入門
快速構(gòu)建一個(gè)React的前端項(xiàng)目最好的就是用腳手架快速生成一個(gè)項(xiàng)目架構(gòu)目錄，并做好基礎(chǔ)的配置。建議使用Create React App。
安裝Create React App
# 建議全局安裝
$ npm install -g create-react-app
# yarn
$ yarn global add create-react-app
測試是否安裝成功：
$ create-react-app -V
2.1.3
快速初始化一個(gè)react項(xiàng)目
npx create-react-app myapp
cd myapp
npm start
[圖片上傳失敗...(image-390cdd-1551090954092)]
此時(shí)打開http://localhost:3000/就能看到基本的一個(gè)簡單的web頁面。
釋放webpack的配置文件
由于create-react-app腳手架生成的項(xiàng)目所有的配置都內(nèi)置在代碼中，我們看不到webpack配置的細(xì)節(jié)，需要通過一個(gè)命令，把所有配置都顯示的展現(xiàn)在項(xiàng)目中。
npm run eject
除非您對webpack已經(jīng)非常熟悉，請不要這么操作！
其他的構(gòu)建輔助腳本
# 構(gòu)建項(xiàng)目
npm run build
yarn build
# 運(yùn)行測試
npm run test
yarn test
# 另外一種構(gòu)建方式
# required npm 6.0+
npm init react-app my-app
yarn create react-app my-app
HelloWorld
項(xiàng)目的默認(rèn)目錄：
├── package.json
├── public # 這個(gè)是webpack的配置的靜態(tài)目錄
│ ├── favicon.ico
│ ├── index.html # 默認(rèn)是單頁面應(yīng)用，這個(gè)是最終的html的基礎(chǔ)模板
│ └── manifest.json
├── src
│ ├── App.css # App根組件的css
│ ├── App.js # App組件代碼
│ ├── App.test.js
│ ├── index.css # 啟動(dòng)文件樣式
│ ├── index.js # 啟動(dòng)的文件（開始執(zhí)行的入口）?。。?！
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock
index.js就是項(xiàng)目啟動(dòng)啟動(dòng)的入口。
import React from 'react'; // 引入react核心庫（必須）
import ReactDOM from 'react-dom'; // 引入react在瀏覽器上運(yùn)行的需要的支持庫
import './index.css';
import App from './App'; // 引入App組件
import * as serviceWorker from './serviceWorker'; // 注冊serviceWork
// 此行代碼的意思：把App組件的內(nèi)容經(jīng)過Ract的編譯生成最終的html掛載到 root的dom節(jié)點(diǎn)生。
ReactDOM.render(<App />, document.getElementById('root')); // !!!核心代碼
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
核心代碼就是下面一行：把App組件的內(nèi)容經(jīng)過Ract的編譯生成最終的html掛載到 root的dom節(jié)點(diǎn)生。
ReactDOM.render(<App />, document.getElementById('root')); // !!!核心代碼
那么我們看一下App組件的代碼：
import React, { Component } from 'react'; // 引入react的組件根對象
import logo from './logo.svg';
import './App.css';
class App extends Component { // 創(chuàng)建App組件類型，繼承Component
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
您需要有es6的語法的基礎(chǔ)。
在App.js中就做了以下幾件事：
- 引入React庫
- 定義App類型（繼承自React.Component)
- 在App類中定義render方法
- 在render方法中返回要渲染的html（jsx語法）
然后我們修改如下App.js為：
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hi, aicoder.com</h1>
</div>
);
}
}
export default App;
此時(shí)頁面會自動(dòng)刷新為：
Hi, aicoder.com
JSX語法
JSX， 一種 JavaScript 的語法擴(kuò)展。JSX 用來聲明 React 當(dāng)中的元素。
比如定義一個(gè)變量：
// jsx語法是js和html的組合，本質(zhì)還是js，最終會編譯成js
const element = <h1>Hello, world!</h1>;
JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。
