【前端知识】React基础巩固(三)——依赖库

React基础巩固(三)——依赖库

React依赖的三个库

  1. react:包含react所必需的核心代码
  2. react-dom:react渲染在不同平台所需要的核心代码(web端:将jsx渲染成真实dom,显示在浏览器;native端:将jsx渲染成原生控件)
  3. babel:将jsx转换成React代码的工具(将jsx转换成React.createElement)
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>Documenttitle>
  head>
  <body>
    <div id="root">div>

    
    
    
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    >script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    >script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>

    
    <script crossorigin src="../lib/react.js">script>
    <script crossorigin src="../lib/react-dom.js">script>
    <script src="../lib/babel.js">script>

    
    npx create-react-app my-app 
    cd my-app 
    npm start
    
    <script type="text/babel">
      // 编写React代码 (jsx语法)
      // jsx语法 -> 普通js语法 -> babel
      // 渲染Hello World
      // React18之前:ReactDOM.render
      // ReactDOM.render(

hello world

, document.querySelector("#root"));
// React18之后: // const app = ReactDOM.createRoot(document.querySelector("#app")); // app.render(

Hello React

);
const root = ReactDOM.createRoot(document.querySelector("#root")); // 文本变量 let message = "hello world"; // 监听按钮的点击 function btnClick() { // 修改message message = "hello react"; // 重新渲染界面 rootRender(); } // 封装渲染函数 function rootRender() { // 渲染 root.render( <div> <h2>{message}</h2> <button onClick={btnClick}>修改文本</button> </div> ); } rootRender();
script> body> html>

你可能感兴趣的:(前端知识,React,前端,react.js,javascript)