React入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42853241/article/details/88541858

React是Facebook开发的一款用于构建用户界面的JavaScript库，强调组件化、高效和灵活。它采用声明式设计，通过虚拟DOM提高性能，并利用JSX实现JS与HTML的混搭。React自2013年开源以来，迅速成为前端开发的重要工具。

什么是React?

React 是一个用于构建用户界面渐进式的 JavaScript 库。
本身只处理UI，不关心路由，不处理Ajax
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图），数据驱动视图
React 由Facebook开发，用来架设 Instagram 的网站，于 2013 年 5 月开源。
第一个真正意义上把组件化思想带到前端开发领域
编程性更好，更底层，更灵活

React 特点

1.声明（配置）式设计 −React采用声明范式，可以轻松描述应用。

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

3.灵活 −React可以与已知的库或框架很好地配合，他是一种渐进式JS库，本身只处理UI。

4.JSX − 种预编译型JS语言，允许JS和HTML混搭，模板中就是JS逻辑

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

6.单向响应的数据流 − React 实现了单向响应的数据流（没有双向数据绑定），从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

发展历史

Facebook用来架设ins所开发
2013年开源
随后发布React Native

核心概念

组件化：将视图分成一块一块的
虚拟DOM：更高效
JSX：扩展语言
React核心理念： 组件化，不支持管理DOM模板，必须把所有模板都放在组件中

React 安装

云端编程环境（只用于demo测试）
脚手架工具：creat-react-app（目前不推荐使用，类似于vue-cli），集成了webpack构建工具等环境
本地简单开发测试环境（没有模块化支持）官网：https://reactjs.org/
手动搭建模块化webpack开发环境

你可以直接使用W3Cschool教程的 React CDN 库，地址如下：

<script src="//www.w3cschool.cn/statics/assets/react/react.min.js"></script>
<script src="//www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script>
<script src="//www.w3cschool.cn/statics/assets/react/babel.min.js"></script>

初始化和安装依赖

$ mkdir react-demos
$ cd react-demos
$ yarn init -y
$ yarn add react react-dom @babel/standalone

@babel/standalone的作用是可以在浏览器中调用babel的API完成EcmaScript 6-EcmaScript 5的转换；独立的编译工具，支持调用它的API完成EcmaScript 6-EcmaScript 5的转换

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">

//下面这句话的作用是将h1标签渲染到指定页面入口中
//这种JS和HTML混写的方式为JSX语法
//这种语法必须通过babel编译完浏览器才能执行

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')  //将一个 h1 标题，插入 id="example" 节点中。
);
</script>
 
</body>
</html>
//输出Hello, world!

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime
包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。