1、React初识，先看一下官方的React介绍

目前国内最流行的三大框架:Vue、React、Angular。 React是一个用于构建用户界面的JavaScript库，由Facebook开源并维护。它提供了一种声明式的编程模型，可以帮助开发者更高效地构建复杂的用户界面。React采用组件化的设计思想，将用户界面拆分成多个独立的组件，每个组件都有自己的状态和生命周期，可以被复用和组合。

React的主要特点包括：

1. 声明式编程：开发者只需要声明需要渲染的内容，React会自动处理页面的更新。
2. 组件化设计：将页面拆分成多个独立的组件，每个组件都有自己的状态和生命周期，可以被复用和组合。
3. 虚拟DOM：React使用虚拟DOM来提高性能和操作效率，可以在不重新渲染整个页面的情况下更新特定部分的内容。
4. 单向数据流：React采用单向数据流的设计思想，父组件可以通过props传递数据给子组件，子组件通过回调函数将数据传递回父组件。
5. 高性能：React采用虚拟DOM和优化算法等方式来提高性能和操作效率。

React可以与其他框架和库进行配合使用，例如Redux、React Router等，可以帮助开发者更好地管理数据和路由等方面的功能。

2、为什么学React？

React是一个流行的JavaScript库，广泛用于构建用户界面。学习React有以下几个好处：

1. 提高开发效率：React采用声明式编程模型，可以帮助开发者更高效地构建复杂的用户界面。
2. 组件化设计：React将用户界面拆分成多个独立的组件，每个组件都有自己的状态和生命周期，可以被复用和组合。
3. 虚拟DOM：React使用虚拟DOM来提高性能和操作效率，可以在不重新渲染整个页面的情况下更新特定部分的内容。
4. 单向数据流：React采用单向数据流的设计思想，父组件可以通过props传递数据给子组件，子组件通过回调函数将数据传递回父组件。
5. 大量资源和社区支持：React拥有广泛的资源和社区支持，可以帮助开发者更好地学习和使用该库。

3、JSX基础语法

JSX是一种JavaScript的语法扩展，可以让开发者在JavaScript代码中直接编写HTML样式的代码。它可以让代码更加直观和易于理解。 示例代码如下：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a JSX example.</p>
    </div>
  );
}

export default App;

在上面的代码中，使用了JSX语法来创建一个React组件。在JSX中，可以直接使用HTML标签和属性，同时也可以在JavaScript代码中使用花括号来嵌入表达式。

4、两种创建虚拟DOM的方式

React中有两种常见的创建虚拟DOM的方式：JSX和纯JavaScript。

① JSX

使用JSX可以让开发者在JavaScript代码中编写类似HTML的代码，从而更加直观和易于理解。JSX可以通过Babel等工具将其转换为纯JavaScript代码。

示例代码如下：

const element = <h1>Hello, React!</h1>;

在上面的代码中，使用JSX来创建一个React元素。

② 纯JavaScript

使用纯JavaScript来创建虚拟DOM可以避免使用JSX带来的一些开销，同时也可以更加灵活地控制虚拟DOM的创建过程。

示例代码如下：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, React!'
);

在上面的代码中，使用React.createElement方法来创建一个React元素。

5、模块与组件

在React中，模块和组件是两个常见的概念。

① 模块

模块是一种封装和组织代码的方式，可以将相关的代码放在同一个文件或目录中，并通过导入和导出来实现代码的复用和组合。在React中，可以使用ES6模块化的语法来定义和导出组件。

示例代码如下：

import React from 'react';

function MyComponent() {
  return <h1>Hello, React!</h1>;
}

export default MyComponent;

在上面的代码中，定义了一个名为MyComponent的组件，并通过export default来将该组件导出。

② 组件

组件是React中最基本的构建块，可以将用户界面拆分成多个独立的、可复用的部分。每个组件都有自己的状态和生命周期，可以被复用和组合，从而实现更加灵活和可维护的代码。

示例代码如下：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default MyComponent;

在上面的代码中，定义了一个名为MyComponent的组件，并通过继承React.Component来定义该组件的生命周期和状态等。

6、模块化与组件化的理解

模块化和组件化是两个相似但又有区别的概念。

① 模块化

模块化是一种封装和组织代码的方式，可以将相关的代码放在同一个文件或目录中，并通过导入和导出来实现代码的复用和组合。模块化的好处在于可以提高代码的可维护性和可复用性，从而实现更加灵活和高效的开发。

② 组件化

组件化是一种将用户界面拆分成多个独立的、可复用的部分的方式，每个组件都有自己的状态和生命周期，可以被复用和组合。组件化的好处在于可以提高代码的可维护性和可复用性，同时也可以让代码更加灵活和易于理解。

7、React的依赖介绍

React的主要依赖包括：

1. react：React的核心库，包括React元素和组件等基础功能。
2. react-dom：用于将React组件渲染到DOM中，并提供一些DOM操作的功能。
3. prop-types：用于对组件的属性进行类型检查和限制。
4. react-router：用于实现前端路由功能，可以让单页应用更加灵活。
5. redux：用于管理React应用中的状态，可以让应用的数据流更加清晰和可维护。
6. styled-components：用于实现CSS-in-JS的功能，可以让组件的样式更加灵活和易于维护。

开发React必须依赖三个库:

react:包含react所必须的核心代码
react-dom:react渲染在不同平台所需要的核心代码
[babel](https://so.csdn.net/so/search?q=babel&spm=1001.2101.3001.7020):将jsx转换成React代码的工具, jsx语法浏览器是不识别的

第一次接触React会被它繁琐的依赖搞蒙，居然依赖这么多东西: (直接放弃?)

对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个包。
其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里;

为什么要进行拆分呢?原因就是推出react-native

react包中包含了react web和react-native所共同拥有的核心代码。
react-dom针对web和native所完成的事情不同:
 · web端:react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
 · native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button，iOS中的UIButton)。

Babel和React的关系

babel是什么呢?

Babel ，又名 Babel.js。
是目前前端使用非常广泛的编译器、转移器。
比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。

React和Babel的关系:

默认情况下开发React其实可以不使用babel。
但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
那么我们就可以直接编写jsx(JavaScript XML)的语法，并且让babel帮助我们转换成React.createElement。

React的依赖引入

所以，我们在编写React代码时，这三个依赖都是必不可少的。

那么，如何添加这三个依赖:

方式一:直接CDN引入
方式二:下载后，添加本地依赖
方式三:通过npm管理(后续脚手架再使用)

暂时我们直接通过CDN引入，来演练下面的示例程序:

这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>