React起手式

引入React

1. CDN引入React
   bootcdn

// 引入 React

// 引入 ReactDOM

cjs 和 umd 的区别

• cjs 全称是 Common JS，是 Node.js 支持的模块规范
• umd 是统一模块定义，兼容各种模块规范(含浏览器)
• 理论上优先使用 umd，同时支持 Node.js 和浏览器
• 最新的模块规范是使用import和export关键字

2. 通过webpack引入React

yarn add react react-dom
import React from 'react'
import ReactDOM from 'react-dom'

React元素和函数组件

• React 元素

App1 = React.createElement('div',null,n)

createElement的返回值 element可以代表一个 div，element为虚拟DOM对象

• React 函数组件

App2 = ()=> React.createElement('div',null,n)

函数组件可以多次执行，返回element的函数，每次得到最新的虚拟div

使用 React实现 +1

// html

  

    
    


//js
console.log(window.React);
console.log(window.React.createElement);
console.log(window.ReactDOM);
console.log(window.ReactDOM.render);

const React = window.React;
const ReactDOM = window.ReactDOM;

let n = 0;
// const App = React.createElement("div",null,[n,
const App =()=> React.createElement("div",null,[n,
  React.createElement("button",{
    onClick:()=>{
      n += 1;
      console.log(n);
      //ReactDOM.render(App,document.querySelector("#app"));
      ReactDOM.render(App(),document.querySelector("#app"));
    }
  },"+1"
)                                           
])
//ReactDOM.render(App, document.querySelector("#app"));
ReactDOM.render(App(), document.querySelector("#app"));

点击 +1 按钮，n值未变，只需将App变为函数，每次render重新读取n的值

jsx语法

• 使用CDN
  引入babel.min.js，把