React

React简介

React 是一个用于构建用户界面的 JavaScript 库，用来为现代的网络构建用户界面。React起源于Facebook，由Facebook的软件工程师 Jordan Walke 开发，2012年部署于 Instagram，2013年开源。除此之外，React还有React Native框架，通过它让我们可以直接使用 JavaScript 来编写原生应用。

React的特点：

• 虚拟DOM
• 声明式
• 基于组件
• 支持服务器端渲染
• 快速、简单、易学

HelloWorld

React的常规开发方式并不是通过浏览器引入外部js脚本来使用，但在入门阶段我们暂且先使用这种方式来简单体会一下React。

使用React开发Web项目，我们需要引入两个js脚本：

react.development.js

• react 是react核心库，只要使用react就必须要引入
• 下载地址：https://unpkg.com/react@18.0.0/umd/react.development.js

react-dom.development.js

• react-dom 是react的dom包，使用react开发web应用时必须引入
• 下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js

const div = React.createElement("div" , {id:'btn'} , '我是React创建的div');
//React.creatElement();



const root = ReactDOM.creatRoot(document.gitElementById('root'));
//获取根元素对应的React元素，创建React根元素，需要一个DOM元素作为参数



root.render(div); // 将div渲染到根元素中

三个API

• React.createElement()
  • React.createElement(type, [props], [...children])

    1. 元素名（组件名）

    2. 元素中的属性（id，class）设置事件时要改为驼峰命名法

    3. 元素中的子元素（内容）

  • 用来创建React元素
  • React元素无法修改
• ReactDOM.createRoot()
  • createRoot(container[, options])
  • 用来创建React的根容器，容器用来放置React元素
• root.render()
  • root.render(element)
  • 当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。
  • 不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有子节点的情况下，将组件插入已有的 DOM 节点中。

文件链接

在index.js中，有这么一段代码

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

意思是将id为root的组件中所有的内容都替换为 中生成的html代码

App中的代码在App.js目录下

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img sr/c={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App; // 这行代码的意思是将App.js导出，所以能在其他js中import

而id为root的组件在public/index.html

body中只有这一行代码

<div id="root"> </div>

• React中的App.js 中的类（class） 改成了className，其他格式不变

props

• props代表外部所有属性的集合

• props是一个对象，里面有一个children属性代表所有索引中的内容

  abcdefg // children = abcdefg