React ----- 01 react初识

1.什么是react？

官方解释： 用于构建用户界面的JavaScript库。
对于web端开发人员而言，主要离不开三个技术。
html -> 构建页面结构
css -> 构建界面样式
javascript -> 构建页面内容和交互

jQuery -> vue react Anaular

2.react的特点

• 1.声明式编程

  • 声明式编程是目前整个大前端开发的模式：Vue、react，angular。
  • 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态区渲染我们的UI界面。

• 2.组件化开发

  • 把整个大的页面拆分为对应的小的组件。

• 3.多平台适配

  • web页面,移动端应用程序

3.命令式编程和声明式编程

• 命令式编程：每做一个操作，都是给计算机（浏览器）一步步命令。
• 声明式编程：它描述目标的性质，让计算机明白目标，而非流程。

4.开发react必须依赖三个库

• react： 包含react所必需的核心代码（包含了react + reactNative）

• react-dom； react渲染在不同平外所需要的核心代码

• babel： 将jsx转换为react代码的工具 （同步ES5，ES6语法）

• react-dom针对web和native所完成的事情不同。

  • web端：react-dom会将jsx最终渲染成真实dom，显示在浏览器
  • native： 渲染成对应的组件

<!-- 添加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>

5.react 第一份代码！（改变页面元素中的数据）

第一种：原生js写法

//1.定义数据
let msg = 'Hello World';

//2.显示元素
const title01 = document.getElementsByTagName('h2')[0];
title01.innerHTML = msg;

//3.改变数据
const btn = document.getElementsByTagName('button')[0];

btn.addEventListener('click',() => {
    title01.innerHTML = 'Hello React!'
})

第二种：使用react写法

<!-- 注意事项：使用jsx，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性 -->
<script type="text/babel">
    let msg = 'Hello world';
    function btnClick(){
        msg = 'Hello React!'
        console.log(msg);
        render();
    }
    

    function render(){
        ReactDOM.render(
    <div>
        <h2>{msg}</h2>
        <button onClick = {btnClick} >改变文本</button>    
    </div>,
    document.getElementById('app'));
    }
    render();

//使用函数多次执行react的区别在于，react中没有双向数据绑定。
</script>

第三种：使用react组件化写法

<script type="text/babel">
    // 封装APP组件
    class APP extends React.Component {
        constructor() {
            super();
            this.state = {
                message:"Hello World!"
            }
        }

        btnClick() {
            this.setState({
                message:"Hello React!"
            })
        }

        render() {
            return (
                <div>
                    <h2>{this.state.message}</h2>    
                    <button onClick={this.btnClick.bind(this)}>改变文本</button>
                </div>
            )
        }
    }

    //渲染组件
    ReactDOM.render(<APP/>,document.getElementById('app'))
</script>

心之所向，虽远吾亦向往之。