React特點(diǎn)
聲明式設(shè): React采用聲明范式泊脐，可以輕松描述應(yīng)用慎冤。
高效: React通過(guò)對(duì)DOM的模擬，最大限度地減少與DOM的交互多艇。
靈活: React可以與已知的庫(kù)或框架很好地配合温艇。
JSX: JSX 是 JavaScript 語(yǔ)法的擴(kuò)展因悲。React 開(kāi)發(fā)不一定使用 JSX ，但我們建議使用它中贝。
組件: 通過(guò) React 構(gòu)建組件囤捻，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開(kāi)發(fā)中。
單向響應(yīng)的數(shù)據(jù)流: React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流蝎土，從而減少了重復(fù)代碼视哑，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。
React 安裝
React 可以直接下載使用誊涯。
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產(chǎn)環(huán)境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
官方提供的 CDN 地址：
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生產(chǎn)環(huán)境中不建議使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
使用實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
通過(guò) npm 使用 React
npm install react
使用 create-react-app 快速構(gòu)建 React 開(kāi)發(fā)環(huán)境
create-react-app 是來(lái)自于 Facebook挡毅，通過(guò)該命令我們無(wú)需配置就能快速構(gòu)建 React 開(kāi)發(fā)環(huán)境。
create-react-app 自動(dòng)創(chuàng)建的項(xiàng)目是基于 Webpack + ES6 暴构。
執(zhí)行以下命令創(chuàng)建項(xiàng)目：
$ cnpm install -g create-react-app
$ create-react-app react-demo
$ cd react-demo/
$ npm start
項(xiàng)目的目錄結(jié)構(gòu)如下：
react-demo/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
manifest.json 指定了開(kāi)始頁(yè)面 index.html跪呈，一切的開(kāi)始都從這里開(kāi)始，所以這個(gè)是代碼執(zhí)行的源頭取逾。
嘗試修改 src/App.js 文件代碼：
src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>歡迎進(jìn)入React的世界</h2>
</div>
<p className="App-intro">
你可以在 <code>src/App.js</code> 文件中修改耗绿。
</p>
</div>
);
}
}
export default App;
