React的认识（40）

React介绍

React 是一个用于构建用户界面的 JAVASCRIPT 库。

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

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

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

React特点

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

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

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

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

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

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

React 运用

官方提供的CDN地址：
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的

或者下载react.development.js、react-dom.development.js、browser.js

npm i react react-dom -S

引入包import React from 'react'

使用create-react-app 快速构建React开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

因为国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm

create-react-app 自动创建的项目是基于 Webpack + ES6 。

    $ cnpm install -g create-react-app
    $ create-react-app my-app
    $ cd my-app/
    $ npm start

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

        npx create-react-app my-app
        cd my-app
        npm start

npx：它是 npm 5.2+ 附带的 package 运行工具

项目的目录结构如下：

    my-app/
        README.md
        node_modules/
        package.json
        .gitignore
        public/
            favicon.ico
            index.html
            manifest.json
        src/
            App.css
            App.js
            App.test.js
            index.css
            index.js
            logo.svg

推荐的工具链
React 团队主要推荐这些解决方案：

如果你是在学习 React 或创建一个新的单页应用，请使用 Create React App。
如果你是在用 Node.js 构建服务端渲染的网站，试试 Next.js。
如果你是在构建面向内容的静态网站，试试 Gatsby。
如果你是在打造组件库或将 React 集成到现有代码仓库，尝试更灵活的工具链。

Next.js
Next.js 是一个流行的、轻量级的框架，用于配合 React 打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案，并且假定你使用 Node.js 作为服务器环境。

在线编译工具

https://codepen.io/

JSX简介

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

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX的优点：

1、JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化

2、JSX 是类型安全的，在编译过程中就能发现错误

3、使用 JSX 编写模板更简单快速

更加熟悉，语法跟HTML非常相似（90以上相似度）

更加语义化，允许自定义标签及组件。

更加直观，标签处理方式，更加可读。

抽象化，React的升级，不需要改动任何JSX代码。

关注点分离,模块化，JSX以干净且简洁的方式保证了组件中的标签与所有业务逻辑的互相分离。

JSX的基本语法：

JSX必须严格闭合。

JSX一个标签就是一个组件，当存在两个组件在同一级是，必须使用一个标签（组件）包起来。

自定义组件使用是必须首字母大写，数字母不大写直接解析为同名html标签。

JSX的注释方式：

或括号注释,跟javascript差不多：{/*   */}

内联属性注释

JSX表示对象

    const element = (
        <h1 className="greeting">
            Hello, world!
        </h1>
    );

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

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

// 注意：这是简化过的结构

    const element = {
        type: 'h1',
        props: {
            className: 'greeting',
            children: 'Hello, world!'
        }
    };

前端三大主流框架：

AngularJS：出来较早的前端框架，学习曲线比较陡，NG1学起来比较麻烦，NG2-NG5开始，进行了一系列的改革，也提供了组件化开发的概念；从NG2开始，也支持使用TS进行编程；

Vue.js：最火的一门前端框架，它是中国人开发的，对我们来说，文档要友好一些；

React.js：最流行的一门框架，因为他的设计很优秀；

react-axios/fetch请求

axios安装

使用yarn安装

        npm i -g yarn
        yarn add axios

使用npm安装

        npm i axios -D

Redux
（搭载React使用）

Redux是JavaScript状态容器，提供可预测化的状态管理。

cnpm i redux -D
cnpm i react-redux -D