React特点
-
声明式设: React采用声明范式，可以轻松描述应用。
-
高效: React通过对DOM的模拟，最大限度地减少与DOM的交互。
-
灵活: React可以与已知的库或框架很好地配合。
-
JSX: JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
-
组件: 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
-
单向响应的数据流: React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
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>
<!-- 生产环境中不建议使用 -->
<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>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
使用实例
<!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>
通过 npm 使用 React
npm install react
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：
$ cnpm install -g create-react-app
$ create-react-app react-demo
$ cd react-demo/
$ npm start
项目的目录结构如下：
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 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。
尝试修改 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>欢迎进入React的世界</h2>
</div>
<p className="App-intro">
你可以在 <code>src/App.js</code> 文件中修改。
</p>
</div>
);
}
}
export default App;
screenShut 2018-08-22 12.50.05.png
网友评论