1-初识react

最新推荐文章于 2024-04-23 22:33:39 发布

sunnyboysix

最新推荐文章于 2024-04-23 22:33:39 发布

阅读量197

点赞数

分类专栏： react官网学习文章标签： react.js

本文链接：https://blog.csdn.net/sunnyboysix/article/details/127254806

版权

react官网学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

之前有过有学习过一段时间react但是长时间未使用基本上都忘记了，此次学习是基于16版本从最基础的学习起，坚持加油Hold住-2022-10-10

一命令式编程认识修改hello react

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-10 22:10:37
 * @LastEditTime: 2022-10-10 22:19:03
-->
<!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>

  <h2 class="title"></h2>
  <button class="btn">改变文本</button>

  <script>
    //传统开发是命令式编程  一步一步按照命令
    //1 定义变量
    let message = "hello world"

    //2 将数据现在h2的标签中
    const titleEl = document.getElementsByClassName('title')[0]
    titleEl.innerHTML = message

    //3 点击按钮，界面的数据发生改变
    const btnEl = document.getElementsByClassName("btn")[0]
    btnEl.addEventListener("click", e => {
      message = "hello React"
      titleEl.innerHTML = message
    })
  </script>
</body>
</html>

二使用react方式

<!--
 * @Description:
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-10 22:21:52
 * @LastEditTime: 2022-10-10 23:30:45
-->
<!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必须依赖三个库
    react: 包含react所必须的核心代码
    react-dom: react渲染在不同平台所需要的核心代码
    babel: 将jsx转换成React代码的工具
  -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js" crossorigin></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js" crossorigin></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <!-- 开始开发 -->
  <!-- 注意事项：使用jsx 并且希望script中的jsx的代码被解析，必须要再script标签上添加一个属性  -->
  <!-- jsx特点：多个标签在外层只能有一个标签 -->
  <script type="text/babel">
   //ReactDOM.render(渲染的内容， 挂在的对象)
   let message = "Hello World"

   function btnClick() {
    message = "Hello React"
    console.log("按钮发生了点击" + message)
    render()
   }
   function render() {
    ReactDOM.render(
      <div>
        <h2>{ message }</h2>
        <button onClick={ btnClick }>改变文本</button>
      </div>
      , document.getElementById("app"))
   }

   render()
  </script>

</body>
</html>

三组件化方式实现

<!--
 * @Description:
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-10 22:21:52
 * @LastEditTime: 2022-10-10 23:31:57
-->
<!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>

  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>

  <script type="text/babel">
    //封装组件
    class App extends React.Component {

      constructor() {
        super();
        //this.message = "Hello World"
        this.state = {
          message: "Hello World"
        }
      }
      render() {
        return (
          <div>
            <h2>{ this.state.message }</h2>
            <button onClick={this.btnClick.bind(this)}>改变文本</button>
          </div>
        )
      }
      btnClick() {
        this.setState({
          message: 'Hello React'
        })
        console.log("按钮发生了点击" + this.state.message)
      }
    }
    //渲染组件
    ReactDOM.render(<App />, document.getElementById("app"))
  </script>
</body>
</html>