学习笔记：React概述

一、概述

1.1、基本概念

react 基础的原理库，主要涉及实现的理念
react.js 基于react的，用来website网页开发
reactNactive 基于react，应用于原生应用开发，即混合应用开发
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码

• 使用场景：react 主要用来做页面开发，相当于MVC中的view层。

1.2、react的重要特性：

• 组件化开发。
• 数据流，其实现单向数据流的绑定。
• 虚拟Dom(virtualDom)概念。

1.3、说说React对前端页面刷新逻辑优化

-> 1、全局刷新整个网页
-> 2、局部刷新部分网页（基于ajax操作Dom，进行局部刷新）
-> 3、虚拟Dom（Diff算法，得到Dom差异，有更改的Dom才更新）

React核心原理是构建虚拟DOM树，通过diff算法，计算得到需要更新的节点，而不是刷新整棵DOM，提高性能。

1.4、开发准备

1、前端基础知识：html、css、JavaScript
2、JSX语法知识
3、ES6相关知识
4、熟悉React框架的API

二、开发环境搭建

2.1、开发工具，ATOM方案

• 开发环境安装
  本人主要是通过create-react-app脚手架安装和创建项目。
  React环境搭建

• 开发工具ATOM方案
  安装插件open in browser 、atom html preview、autocomplete path

2.2、关于JSX语法简介

• JSX标签也就是HTML标签，在JavaScript中使用这些标签的时候，可以不用“”包含起来。
• 语法糖，让你可以在js中直接使用html语法，页面层次直观明了、效率更高。
• JSX最终会被编译成JavaScript代码。（由 browser.min.js 库代码完成）

2.3、使用create-react-app创建项目相关说明

• node-modules，整个项目的依赖包

• 关键文件
  index.js，整个应用的入口文件
  App.js，根组件文件

• react-scripts
  通常情况下，我们创建spa应用时是使用npm安装项目依赖，在通过配置webpack.config.js进行配置，搭建好环境后在src编写源代码。
  而create-react-app是自动构建，在package.json中只有react-scripts作为依赖，而在reacr-scripts中已经配置好了项目所有需要的。

• react-scripts的工作原理

三、基本的使用

• step 1、定义组件
  下面例子将在root标签加入element组件代码。

// 将element标签渲染到root标签下
const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is my first react demo!</h>
    </div>
);

• step 2、使用函数方式ReactDOM.render(e, p);创建React组件

// html代码中的某个标签
<div id="root"></div>

ReactDOM.render(element, document.getElementById('root'));

学习实例

• ReactDemo

---

参考

菜鸟网络-React教程
React官网
网课：《蓝鸥React Native零基础入门到项目实战》