这是我参与「第五届青训营」伴学笔记创作活动的第 17 天

前言

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

React 发展历史

产生背景

由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。衍生的React Native 项目，目标更是宏伟，希望用写Web App的方式去写Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI ，就能同时运行在服务器、浏览器和手机。

框架用途

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

框架特点

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

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

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

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

React应用

React 脚手架
xxx脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目
React 提供了一个用于创建 React 项目的脚手架库：create-react-app
项目整体技术架构为：react + webpack + es6 + eslint
使用脚手架开发的项目特点：模板化、组件化、工程化

样式模块化

使用预编译语言比如：Less、Scss
把 css 名改为 index.module.css

import xx from './index.module.css' <h2 className={xx.xx}>

组件化编码流程

拆分组件：拆分页面，抽取组件
实现静态组件，使用组件实现静态页面效果
实现动态组件

动态显示初始化数据（数据类型、数据名称、保存在哪个组件）

交互（从绑定事件监听开始）

学习响应式系统与 React（1）｜ 青训营笔记

前言