1、初始react

1、什么是react

• 是一个用于构建用户界面的 JavaScript 库
• 如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了 完整的 M 和 C 的功能

2、react的特点

• 声明式
• 基于组件
• 学习一次，随处使用

3、react的安装

• 安装命令：npm i react react-dom
• react 包是核心，提供创建元素、组件等功能
• react-dom 包提供 DOM 相关功能等

4、react的使用

• 引入 react 和 react-dom 两个 js 文件

- <script src="./node_modules/react/umd/react.development.js"></script>
- <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

• 创建 React 元素
• 渲染 React 元素到页面中

<div id="root"></div>
<script>
    // 2、创建React元素
    const title = React.createElement('h2', null, 'Hello React')
    ReactDOM.render(title, document.getElementById('root'));
</script>

• React.createElement() === 返回值：React元素
  • 第一个参数：要创建的React元素名称
  • 第二个参数：该React元素的属性
  • 第三个及其以后的参数：该React元素的子节点
• ReactDOM.render()
  • 第一个参数：要渲染的React元素
  • 第二个参数：DOM对象，用于指定渲染到页面中的位置

5、React脚手架的使用

• 初始化项目，命令：npx create-react-app + 项目名称
• 启动项目，在项目根目录执行命令：npm start

6、在脚手架中使用react

• 导入 react 和 react-dom 两个包
• 调用 React.createElement() 方法创建 react 元素
• 调用 ReactDOM.render() 方法渲染 react 元素到页面中