React前端框架完整版.docVIP

React

前端框架

第一章

学习目标：

React简介

helloworld

JSX

元素渲染生命周期组件事件

1React简介

React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。React起源于Facebook

的内部项目，用来架设Instagram的网站，并于2013年5月开源。

React主要用于构建UI，很多人认为React是MVC中的V（视图）。

React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React的生态体系比较庞大，它在web端，移动端，桌面端、服务器端，VR领域都有涉及。react可以说

是目前为止热⻔，生态完善，应用范围广的前端框架。react结合它的整个生态，它可以横跨web端，

移动端，服务器端，乃至VR领域。可以毫不夸张地说，react已不单纯是一个框架，而是一个行业解决方

案。

React特点:

声明式设计：React采用声明范式，可以轻松描述应用。

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

灵活：React可以与已知的库或框架很好地配合。

JSX：JSX是JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。

组件：通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是它为什

么比传统数据绑定更简单。

2helloworld

我们先在html中引入react，来学习react的核心技术。

步骤1：添加一个DOM容器到HTML

divid=app/div

步骤2：添加Script标签

!--引入react--

scriptsrc=/react@17/umd/react.development.jscrossorigin

/script

scriptsrc=/react-dom@17/umd/react-dom.development.js

crossorigin/script

!--引入babel--

scriptsrc=/babel-standalone/6.26.0/babel.min.js

/script

步骤3：编写react代码

scripttype=text/babel

console.log(ReactDOM.render);

ReactDOM.render(h1helloworld/h1,document.getElementById(app));

/script

完整代码：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=width=device-width,initial-scale=1.0

titleDocument/title

scriptsrc=/react@17/umd/react.development.jscrossorigin

/script

scriptsrc=/react-dom@17/umd/react-dom.development.js

crossorigin/script

scriptsrc=/babel-standalone/6.26.0/babel.min.js

/script

/head