React 入门实例教程

夏木~2023-09-09 15:55

目录

[一、HTML 模板](#一、HTML 模板)

二、ReactDOM.render()

[三、JSX 语法](#三、JSX 语法)

四、组件

五、this.props.children

六、PropTypes

七、获取真实的DOM节点

八、this.state

九、表单

十、组件的生命周期

constructor()

componentWillMount()

render()

componentDidMount()

[组件生命周期 - 运行阶段（Updating）](#组件生命周期 - 运行阶段（Updating）)

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

[组件生命周期 - 卸载阶段（Unmounting）](#组件生命周期 - 卸载阶段（Unmounting）)

componentWillUnmount()

十一、Ajax

补充：

JSX的注意点

React组件

React创建组件的两种方式

JavaScript函数创建

class创建

[给组件传递数据 - 父子组件传递数据](#给组件传递数据 - 父子组件传递数据)

props和state

props

state

评论列表案例

style样式

state和setState

组件绑定事件

[React中的事件机制 - 推荐](#React中的事件机制 - 推荐)

事件绑定中的this

通过bind绑定

通过箭头函数绑定

受控组件

[React 单向数据流](#React 单向数据流)

组件通讯

react-router

基本概念说明

使用步骤

注意点

路由参数

路由跳转

fetch

[fetch 基本使用](#fetch 基本使用)

跨域获取数据的三种常用方式

JSONP

代理

[CORS - 服务器端配合](#CORS - 服务器端配合)

redux

核心

本周由于刚入职的公司需要写react，自己也从网上借鉴了一些资料整合到自己的博客中，以便下次学习的时候方便回忆！

一、HTML 模板

使用 React 的网页源码，结构大致如下。

html 复制代码 
    <!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          // ** Our code goes here! **
        </script>
      </body>
    </html>

上面代码有两个地方需要注意。首先，最后一个