了解react.js
React 是一個用于構建用戶界面的 JAVASCRIPT 庫。
React主要用于構建UI,很多人認為 React 是 MVC 中的 V(視圖)。
React 起源于 Facebook 的內部項目,用來架設 Instagram 的網站,并于 2013 年 5 月開源。
React 擁有較高的性能,代碼邏輯非常簡單,越來越多的人已開始關注和使用它。
React特點
1.聲明式設計 ?React采用聲明范式,可以輕松描述應用。
2.高效 ?React通過對DOM的模擬,最大限度地減少與 DOM的交互。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ,但我們建議使用它。
5.組件 ? 通過 React 構建組件,使得代碼更加容易得到 復用,能夠很好的應用在大項目的開發中。
6.單向響應的數據流 ? React 實現了單向響應的數據流,從而減少了重復代碼,這也是它為什么比傳統數據綁定更簡單。
React 安裝
1. React 的版本為 15.4.2,你可以在官網 [http://facebook.github.io/react/](http://facebook.github.io/react/) 下載最新版。
2.通過 npm 使用 React
$npm install -g cnpm --registry=https://registry.npm.taobao.o
$npm config set registry https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模塊了:
$ cnpm install [name]
使用 create-react-app 快速構建 React 開發環境
create-react-app 是來自于 Facebook,通過該命令我們無需配置就能快速構建 React 開發環境。
create-react-app 自動創建的項目是基于 Webpack + ES6 。
執行以下命令創建項目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
在瀏覽器中打開 http://localhost:3000/ ,結果如下圖所示:
安裝成功后.png
項目的目錄結構如下:
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
嘗試修改 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>歡迎觀看顏文字的簡書</h2>
</div>
<p className="App-intro">
你可以在 <code>src/App.js</code> 文件中修改。
</p>
</div>
);
}
}
export default App;
修改后,打開 http://localhost:3000/ (一般自動刷新),輸出結果如下:
修改后.png
聯系郵箱:1095541234@qq.com