React是2013年，Facebook开源的JavaScript框架

React初始（1）

React的特点：

  • 声明式编程
  • 组件化开发
  • 多平台适配

React开发依赖

开发React必须依赖三个库：

  • react：包含react所必须的核心代码
  • react-dom：react渲染在不同平台所需要的核心代码
  • babel：将jsx转换成React代码的工具

引入React依赖

方式1：cdn引入

方式2：下载到本地引入

方式3：npm下载

初步使用react

<body>

  <div id="app"></div>

  <!-- react依赖 -->
  <!-- crossorigin的作用是远程的文件里面的错误在本地也能显示出来 -->
  <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 编写react代码 type格式必须是text/babel 作用是让babel解析jsx语法 -->
  <script type="text/babel">
    let message = "Hello World";
    // ReactDom.render('渲染内容（也可以是组件）',要挂载的对象（挂载到那个html元素）); //默认情况下渲染的内容会覆盖原来的内容
    // <h2></h2>:jsx
    ReactDOM.render(<h2>{message}</h2>, document.getElementById('app')); // ReactDOM里面有个函数render
    // 通过{}引入外部变量或者表达式和vue不同的是vue是用{{}}
  </script>
</body>
<body>

  <div id="app"></div>

  <!-- react依赖 -->
  <!-- crossorigin的作用是远程的文件里面的错误在本地也能显示出来 -->
  <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 编写react代码 type格式必须是text/babel 作用是让babel解析jsx语法 -->
  <script type="text/babel">
    let message = "Hello World";

    function btnClick() {
      message = "Hello React";
      render();
    }

    // 这里和vue一样，最外部必须是一个根元素
    function render() {
      ReactDOM.render(
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>按钮</button>
        </div>,
        document.getElementById('app')
      );
    }

    //点击后数据改了，但是页面并没有发生改变，这里要重新渲染dom

    render();
  </script>
</body>

react点击修改文字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app"></div>

  <!-- react依赖 -->
  <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 编写react代码 type格式必须是text/babel 作用是让babel解析jsx语法 -->
  <script type="text/babel">

    // 封装组件 
    class App extends React.Component {
      // 在类里面定义属性
      constructor() {
        super();  // 必须调用一下super
        // this.message = "Hello World";
        this.state = {
          message: "Hello World"
        }
      }

      // 组件里面的内容渲染render里面
      render() {
        // return <h2>Hello</h2> 如果只有一个根可以不用加括号，如果有多个可以加，这里的()没别的含义，仅代表它们是一个整体
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.btnClick.bind(this)}>改变文字</button>
          </div>
        )
      }

      btnClick() {
        // console.log(this);
        // this.message = "Hello React";  // 不行！！ 不要手动去改 
        this.setState({
          message: "Hello React"
        });

        // this.state里面定义数据，通过this.setState去改变数据
      }
    }

    // 渲染组件
    ReactDOM.render(<App />, document.getElementById('app')); // 组件名首字母必须大写
  </script>
</body>

</html>
文章目录