React框架-Web开发框架

1.React概述

React起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

React是一个用于构建用户界面的JavaScript库。React是一套UI引擎，是DOM的抽象层，并不是web应用的完整解决方案。它遵循组件设计模式、声明式编程范式和函数式编程的概念，使用虚拟DOM有效的操作DOM，并且遵循从高阶组件到低阶组件的单向数据流，从而使前端应用程序达到高效。

是JavaScript的库，可以简化可视化界面的开发;

是基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写;

核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。

2.React框架特点

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。

2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。

3.React开发环境搭建

1、基本应用（传统应用）：在页面文件中导入React的核心库（.js文件），可以引入官网上的地址，也可以自己下载之后本地引入。

（1）核心库：react.development.js

<!-- 官网地址 -->

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

<!-- 本地引入 -->

<script src="../react的js库/react.development.js"></script>

(2)与DOM相关的库：react-dom.development.js

<!-- 官网地址 -->

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<!-- 本地引入 -->

<script src="../react的js库/react-dom.development.js"></script>

（3）babel编译器库：将ES6转换成ES5

<!-- 官网地址 -->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 本地引入 -->

<script src="../react的js库/babel.min.js"></script>

2、脚手架开发：搭建React项目，根据不同的需求开发组件

（1）create-react-app：属于FacdBook，快速的、不做任何配置的构建React开发环境

npm install -g create-react-app

1

（2）create-react-app构建的react开发环境是基于webpack+ES6