一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

1、React实现HelloReact

第一步：添加React依赖三个库

• react：react核心代码
• react-dom：渲染在不同平台的核心代码
• babel：将jsx转换成react代码的工具

添加方法

• CDN引入

<!-- 添加React依赖 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

• 下载后，添加本地依赖

<!-- react本地依赖 -->
<script src='../react/react.development.js'></script>
<script src='../react/react-dom.development.js'></script>
<script src='../react/babel.min.js'></script>

• npm管理(脚手架使用)

第二步：开始写代码

• 写jsx代码需要在script标签注明类型

<script type='text/bable'></script>

• crossorigin属性：拿到跨域脚本的错误信息

• jsx代码特性：多个标签的最外层(根）只能有一个，可以用一个div包裹起来添加

• 修改HTML标题

let message = 'Hello React'
ReactDOM.render(<h2>{message}</h2>, document.getElementById('app'))

• 组件化修改HTML标题(World->React)

// 封装组件
class APP extends React.Component {
    constructor(){
        super();
        this.state = {
            message: 'Hello World'
        }
    }
    render() {
        return(
            <div>
               <h2>{this.state.message}</h2>
               <button onClick = {this.bntClick.bind(this)}>改变文本</button>
            </div>
        )
    }
    bntClick() {
        this.setState({
            message: 'Hello React'
        }) 
    }
}
// 渲染组件
ReactDOM.render(<APP/>, document.getElementById('app'))

notes:

• 拆分原因是开发了react-native，分离了react-dom
• react-dom针对web和native所完成的事情不同：
  • web端：将jsx渲染成真实DOM
  • native端：将jsx渲染成原生控件(Android, iOS）

2、Bable

• 编辑器、转移器
• 作用：
  • 将ES6编写的源码转成大多数浏览器支持的ES5语法
  • 将jsx（JavaScript XML）转成React.createElement源码