react 一个UI框架
React用于构建用户界面的 JavaScript 库.
react 特点
- mvvm
- 声明式
- 组件化
- 生态强大
学习前置基础
简单html的方式编写react demo快速入门
我们可以直接把React的当做一个JS的库来用（生产环境不要这么用），如下是第一个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的转换的js库，生产环境不要使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<title>aicoder.com reactdemos</title>
</head>
<body>
<!-- 第二步：添加html容器 -->
<!-- 这个是react的容器 -->
<div id="app">
</div>
<!-- 第三步：添加babel的script脚本，这个是核心的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渲染到页面上去。此方法接受两个参数，第一个参数是渲染的html标签，第二个参数是渲染到页面的哪个节点上。
这里牵扯到JSX语法，后续会讲到。
React脚手架创建项目快速入门
快速构建一个React的前端项目最好的就是用脚手架快速生成一个项目架构目录，并做好基础的配置。建议使用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
快速初始化一个react项目
npx create-react-app myapp
cd myapp
npm start
[图片上传失败...(image-390cdd-1551090954092)]
此时打开http://localhost:3000/就能看到基本的一个简单的web页面。
释放webpack的配置文件
由于create-react-app脚手架生成的项目所有的配置都内置在代码中，我们看不到webpack配置的细节，需要通过一个命令，把所有配置都显示的展现在项目中。
npm run eject
除非您对webpack已经非常熟悉，请不要这么操作！
其他的构建辅助脚本
# 构建项目
npm run build
yarn build
# 运行测试
npm run test
yarn test
# 另外一种构建方式
# required npm 6.0+
npm init react-app my-app
yarn create react-app my-app
HelloWorld
项目的默认目录：
├── package.json
├── public # 这个是webpack的配置的静态目录
│ ├── favicon.ico
│ ├── index.html # 默认是单页面应用，这个是最终的html的基础模板
│ └── manifest.json
├── src
│ ├── App.css # App根组件的css
│ ├── App.js # App组件代码
│ ├── App.test.js
│ ├── index.css # 启动文件样式
│ ├── index.js # 启动的文件（开始执行的入口）！！！！
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock
index.js就是项目启动启动的入口。
import React from 'react'; // 引入react核心库（必须）
import ReactDOM from 'react-dom'; // 引入react在浏览器上运行的需要的支持库
import './index.css';
import App from './App'; // 引入App组件
import * as serviceWorker from './serviceWorker'; // 注册serviceWork
// 此行代码的意思：把App组件的内容经过Ract的编译生成最终的html挂载到 root的dom节点生。
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组件的内容经过Ract的编译生成最终的html挂载到 root的dom节点生。
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 { // 创建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"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
您需要有es6的语法的基础。
在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;
此时页面会自动刷新为：
Hi, aicoder.com
JSX语法
JSX， 一种 JavaScript 的语法扩展。JSX 用来声明 React 当中的元素。
比如定义一个变量：
// jsx语法是js和html的组合，本质还是js，最终会编译成js
const element = <h1>Hello, world!</h1>;
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
