# react-demos
**Repository Path**: code33/react-demos
## Basic Information
- **Project Name**: react-demos
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-07
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# React Demos
mdf by jyo on 2019-08-07
This is a collection of simple demos of React.js.
These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library.
## Install
yarn global add http-server
run as cmd
hs
address request
```
127.0.0.1:8080/demo01/index.html
```
## 基本内部原理
参考:
https://juejin.im/post/5b2e3b9451882574934c3c8d
1个 ReactComponent 初始化触发5个钩子函数
```
1. getDefaultProps() // 单次,设置props
2. getInitialState() // 单次,在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。
3. componentWillMount() // 单次,ajax数据的拉取操作，定时器的启动。
4. render() // 单次,渲染操作,进行diff算法，更新dom树都在此进行。此时就不能更改state了。
5. componentDidMount() // 单次,动画的启动，输入框自动聚焦
```
1个 ReactComponent 更新时触发的钩子函数
```
6. componentWillReceivePorps(nextProps) // 更新,组件初始化时不调用,组件接受新的props时调用。不管父组件传递给子组件的props有没有改变，都会触发。即父组件对子组件进行调用传递时进行触发.
7. shouldComponentUpdate(nextProps, nextState) // 更新,React性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态值一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。
8. componentWillUpdate(nextProps, nextState) //组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
9. render() // 不多说
10. componentDidUpdate() // 组件更新完成
```
组件卸载
```
componentWillUnmount() // 定时器的清除,React 管理 DOM，你每个组件 render() 返回的东西会被 React 整理到一个树里面，按照它们之间相互依赖的关系，把相应的组件 mount 起来。然后可能父组件状态变化之后， render() 不返回某个子组件了，那么这个子组件就会被 React unmount 掉。
```
## redux 入门教程
参考:
https://juejin.im/post/5b755537e51d45661d27cdc3
## react 优雅的使用 redux
参考:
https://juejin.im/post/5a43902af265da4319568eab
## Related Projects
- [Flux Demo](https://github.com/ruanyf/extremely-simple-flux-demo)
- [Webpack Demos](https://github.com/ruanyf/webpack-demos)
- [React Router Tutorial](https://github.com/reactjs/react-router-tutorial)
- [CSS Modules Demos](https://github.com/ruanyf/css-modules-demos)
- [React Testing Demo](https://github.com/ruanyf/react-testing-demo)
- [A boilerplate for React-Babel-Webpack project](https://github.com/ruanyf/react-babel-webpack-boilerplate)
## How to use
First copy the repo into your disk.
```bash
$ git clone git@github.com:ruanyf/react-demos.git
```
Then play with the source files under the repo's demo* directories.
## HTML Template
```html
```
## Index
1. [Render JSX](#demo01-render-jsx)
1. [Use JavaScript in JSX](#demo02-use-javascript-in-jsx)
1. [Use array in JSX](#demo03-use-array-in-jsx)
1. [Define a component](#demo04-define-a-component)
1. [this.props.children](#demo05-thispropschildren)
1. [PropTypes](#demo06-proptypes)
1. [Finding a DOM node](#demo07-finding-a-dom-node)
1. [this.state](#demo08-thisstate)
1. [Form](#demo09-form)
1. [Component Lifecycle](#demo10-component-lifecycle)
1. [Ajax](#demo11-ajax)
1. [Display value from a Promise](#demo12-display-value-from-a-promise)
1. [Server-side rendering](#demo13-server-side-rendering)
---
## Demo01: Render JSX
[demo](http://ruanyf.github.io/react-demos/demo01/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html)
The template syntax in React is called [JSX](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). It is allowed in JSX to put HTML tags directly into JavaScript codes. `ReactDOM.render()` is the method which translates JSX into HTML, and renders it into the specified DOM node.
```js
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);
```
Attention, you have to use `