PDF《1.1 react基本概念》

1.

1 1.1.1 1.1.1.1 1.1.1.2 1.1.1.3 1.1.1.3.1 1.1.1.3.2 1.1.1.4 1.1.1.4.1 1.1.1.4.2 1.1.1.4.3 1.1.1.5 1.1.1.5.1 1.1.1.5.2 1.1.1.5.3 1.1.1.5.4 1.1.2 1.1.2.1 1.1.2.2 1.1.2.3 1.1.2.4 1.1.2.5 1.1.2.6 1.1.3 1.1.3.1 1.1.3.2 1.1.3.3 1.1.3.4 1.1.3.5 1.2 1.2.1 1.2.2 目录

1、介绍 1.1 react基本概念 1.1.1 JSX语法 1.1.2 React 组件的创建 1.1.3 React 数据流 state props 1.1.4 React 生命周期

1、挂载或卸载过程

2、数据更新过程

3、整体流程 1.1.5 React 与 DOM

1、ReactDOM

2、ReactDOM的不稳定方法

3、refs

4、React之外的DOM操作 1.2 redux基本概念 1.2.1 Redux简介 1.2.2 Redux middleware 1.2.3 Redux 异步流 1.2.4 Redux 与 路由 1.2.5 Redux 与 组件 1.2.6 Redux 应用实例 1.3 webpack基本功能 1.31 入口属性的配置 1.3.2 出口属性的配置 1.3.3 devserver 属性的配置 1.3.4 moudles属性的配置 1.3.5 plugins 属性的配置

2、开发环境搭建 2.1 用webpack2搭建react开发环境 2.2 package.json 文件的生成以及功能

1 介绍 本书带领小白从零开始学习react项目开发的技术栈选型、框架搭建、以及具体功能的实现. 适用人群:有一定的JavaScript基础. 如果你看本书很吃力,可以先学习一下ES6的语法. 学习本书过程中,新手可以结合官网的API来进行更加深入的学习. 本书贡献者: 1/2 蓝色的阳光

1、介绍

2 1.1 react基本概念

3 JSX语法 JSX语法类似XML,包含根元素,子元素. 下面这种是一个基本的XML格式. ..... 那么,JSX语法又是怎样的呢? 在web端,我们表示HTML通常用下面这种方式. 但是,面对一个复杂的网页,将所有html写到一个文件里面,维护会非常困难,这时候就可以考虑把一个庞大的HTML拆分成一个个组件,而jsx恰恰就是一种非常切 合实际问题的解决办法. jsx是一种简单的模板语言,我们用它来表示某一段UI组件. 现今前端界流行组件化开发,使用JavaScript来构建UI组件是一件很复杂的事情,在稍微复杂点的应用中,就会出现组件混乱的情况.幸运的是有人提出了jsx. jsx并不只是应用在react中,它主要有3种用途.

1、JSXDOM:用jsx创造一个dom组件. var text = 我只是文字 ;

var arr = [1, 2, 3];

document.body.appendChild( {text} { arr.map((ele, key) =>

{ele}) } );

//编译出来的HTML结构 我只是文字

1

2

3 我们可以看到,jsx的写法和XML非常像,它可以保留我们的HTML结构,而DOM元素里面的内容可以通过变量写入. jsx语法有几个特点. 必须有根元素 用大括号{ }表示变量 大括号内可以使用函数、表达式

2、Mercury JSX:创建虚拟DOM. 这个虚拟DOM和react中的类似,但不是应用在react中,你可以用JavaScript定义一个函数来返回一个HTML结构. 例子请前往:https://github.com/Raynos/mercury-jsx/blob/master/test/jsx/example.jsx

3、React JSX:创建react组件. 1.1.1 JSX语法

4 import React from '

react'

;

const MyComponents = { test(props) { return ( span>

{props.text} props.arr.map((ele, key) =>

{ele}) ) } } function T() { return } 首先,不要忘记import你的react插件,关于react组件的各种写法暂时不作分析,这里只需要关心JSX如何和react结合使用. 其次,定义一个组件,我们可以给这个组件用函数传参,在react中,我们通常用props从父组件传递属性到子组件. 最后,调用自定义react组件,参数通过配置的方式写入即可. 关于JSX语法讲解就这么多,如果你还有疑问,可以先留着,在我们正式搭建react框架之前,这些知识会让你打下良好的基础. 1.1.1 JSX语法