• React 基础案例

    React的特点：

    1、声明式编程

    2、组件化开发

    3、多平台适配yuan

    原生实现：

    1.     <h2 class="title">h2>
    2.     <button class="btn">改变文本button>
    3.  
    4.     <script>
    5.       let msg = "Hello World";
    6.       const titleEl = document.querySelector(".title");
    7.       titleEl.innerHTML = msg;
    8.       const btnEl = document.querySelector(".btn");
    9.       btnEl.addEventListener("click", (e) => {
    10.         msg = "Hello React";
    11.         titleEl.innerHTML = msg;
    12.       });
    13.     script>

    React实现：

    React开发必须依赖三个库

    1、react：包含react所必须的核心代码

    2、react-dom：react渲染在不同平台所需要的核心代码

    3、babel：将jsx转换成React代码的工具

    （1）引入依赖

    1、直接CDN引入

    2、下载后，添加本地依赖

    3、npm管理（脚手架使用）

    1.   <body>
    2.     
    3.     <script
    4.       src="https://unpkg.com/react@16/umd/react.development.js"
    5.       crossorigin
    6.     >script>
    7.     <script
    8.       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    9.       crossorigin
    10.     >script>
    11.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js
    12.     ">script>
    13.     <div id="app">appdiv>
    14.     
    15.     
    16.     <script type="text/babel">
    17.       let msg = "Hello World";
    18.       function btnClick() {
    19.         msg = "Hello React";
    20.         render();
    21.       }
    22.       // 渲染的内容，挂载的对象
    23.       function render() {
    24.         ReactDOM.render(
    25.           <div>
    26.             <h2>{msg}h2>
    27.             <button onClick={btnClick}>改变文本button>
    28.           div>,
    29.           document.getElementById("app")
    30.         );
    31.       }
    32.       render();
    33.     script>
    34.   body>

    代码组件化 

    1. <body>
    2.     
    3.     <script
    4.       src="https://unpkg.com/react@16/umd/react.development.js"
    5.       crossorigin
    6.     >script>
    7.     <script
    8.       src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    9.       crossorigin
    10.     >script>
    11.     <script src="https://unpkg.com/babel-standalone@6/babel.min.js
    12.     ">script>
    13.     <div id="app">appdiv>
    14.     
    15.     
    16.     <script type="text/babel">
    17.       // 封装App组件 想让app是个组件必须先继承
    18.       class App extends React.Component {
    19.         // 构造器定义属性
    20.         constructor() {
    21.           super(); // 初始化父类实例，才可以使用this
    22.           // 当数据变化引起页面的变化，不能直接定义在对象里面,必须写在state对象里面
    23.           this.state = {
    24.             msg: "Hello World",
    25.           };
    26.         }
    27.         render() {
    28.           return (
    29.             <div>
    30.               <h2>{this.state.msg}h2>
    31.               <button onClick={this.btnClick.bind(this)}>改变文本button>
    32.             div>
    33.           );
    34.         }
    35.         btnClick() {
    36.           //直接修改页面不会发生变化 this.state.msg = "Hello React";
    37.           // 必须通过一个函数执行 数据更新操作render函数
    38.           this.setState({
    39.             msg: "Hello React",
    40.           });
    41.         }
    42.       }
    43.       ReactDOM.render(<App />, document.getElementById("app"));
    44.     script>
    45.   body>

    （2）使用脚手架

    原生使用的是命令式编程，react使用的是声明式编程

    命令式编程：每做一个操作，都是计算机（浏览器）一步步命令

    声明式编程：表明想要做什么，应该做什么，但是不指定具体怎么做

  • 相关阅读:
    【华为机试真题 JAVA】最大嵌套括号深度-100
    学了一天java，我总结了这些知识点
    机器人控制器编程实践指导书旧版-实践四 步进电机（执行器）
    Fabric.js在vue2中使用
    结构化数据和非结构化数据
    jvm关闭时的钩子函数
    滴滴线下仿真环境实践：从方案设计到持续运营
    java.lang.Float类下equals()方法具有什么功能呢？
    LLM概览：从起源至LangChain的资源整合，及对NLP领域的深远影响（LLM系列01）
    周四见｜物流人的一周资讯
  • 原文地址：https://blog.csdn.net/m0_60376759/article/details/138076876