react灵活的生态圈

Small Application

Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styling: plain CSS and inline style Asynchronous Requests: fetch Higher Order Components: optional Formatting: none Type Checking: none or PropTypes State Management: local state Routing: none or conditional rendering Authentication: Firebase Database: Firebase UI Components: none Time: moment or date-fns Testing: Jest

Medium Application

Boilerplate: create-react-app with eject Utility: JavaScript ES6 + Lodash or Ramda Styling: CSS modules or Styled Components Asynchronous Requests: fetch or axios Higher Order Components: maybe + optional recompose Formatting: Prettier Type Checking: none or Flow State Management: local state and very optional Redux Routing: React Router Authentication: Firebase Database: Firebase UI Components: none or Semantic UI Time: moment or date-fns Testing: Jest with Enzyme

Large Application

Boilerplate: create-react-app with eject or own boilerplate project Utility: JavaScript ES6 + Lodash or Ramda Styling: CSS modules or Styled Components Asynchronous Requests: axios Higher Order Components: maybe + optional recompose Formatting: Prettier Type Checking: Flow State Management: local state and Redux or MobX Routing: React Router Authentication: Solution with an own Express/Hapi/Koa Node.js Server with Passport.js Database: Solution with an own Express/Hapi/Koa Node.js Server with a SQL or NoSQL Database UI Components: Semantic UI or own implementation of UI components Time: moment or date-fns Testing: Jest with Enzyme

基本要求npm/node

Node包管理器(npm/node/package/manager)可以让你通过命令行安装第三方node包。这些包可能是一系列的工具函数、库、或者是集成的框架

零配置搭载react

npm install -g react-reate-app

运行

npm start

运行测试

npm test

构建项目产品文件

npm run build

ES6中的constlet

const声明的变量不能被重新赋值或者是重新声明。可以使用它创建不可变数据结构。但如果创建的这个变量是数组或者是对象的时候,里面持有的内容可以被更新。 当一个变量需要被重新赋值的时候,应该使用let去声明它

ReactDOM

简单地说,ReactDOM.render()会使用JSX替换HTML中一个DOM节点,这样可以很容易地React集成到每一个其他的应用中。ReactDOM.render() 有两个传入参数,第一个是准备渲染的JSX,第二个参数指定了React应用在HTML中放置的位置。

模块热替换

模块热替换(HMR)是一个帮助你在浏览器中重新加载应用的工具,并且无需让浏览器刷新页面。 在src/index.js中添加一些配置代码

if(module.hot){module.hot.accept();}

代码改变后,浏览器就不会刷新页面,但是应用还是会重新加载并且正确的输出

JSX中复杂的JavaScript

定义一个列表

 import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
const list = [{
title: 'React',
url: 'https://facebook.github.io/react',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
}, {
title: 'Redux',
url: 'https://github.com/reactjs/redux',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1,
}];

在JSX中使用HTML中的JavaScript是强大的,可以使用map来将一个列表转换成另外一个列表。记得在React中添加一个辅助属性,给列表的每个成员加上一个关键字(key)属性,这样就可以在列表发生变化的时候识别其中成员的添加、更改和删除的状态。不要错误地使用列表成员在数组的索引作为关键字,列表的成员索引是完全不稳定的

class App extends Component {
render() {
return (
<div className = "App">
{list.map(function(item){
return(
<div key = {item.objectID}>
<span>
<a href= {item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
);
})}
</div>
);
}
}

export default App;

ES6 箭头函数

箭头函数表达式比普通的函数表达式更加简洁

//函数表示式
function(){...}
//箭头函数
() => {...}

注意:如果函数只有一个参数,就可以移除参数的括号,但是如果有多个参数,就必须保留这个括号

//允许
item =>{...}
(item) =>{...}
(item,key) =>{...}
//不允许
item,key =>{...}

上例可以改写为

class App extends Component {
render() {
return (
<div className = "App">
{list.map(item =>{
return(
<div key = {item.objectID}>
<span>
<a href= {item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
);
})}
</div>
);
}
}

另外在ES6的箭头函数中,可以简洁函数体来替换块状函数体(用花括号{}表示),简洁函数体的返回不用显示声明,这样就可以移除掉return表示式,那再改简洁

class App extends Component {
render() {
return (
<div className = "App">
{list.map(item =>
<div key = {item.objectID}>
<span>
<a href= {item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
)}
</div>
);
}
}

ES6类

javaScript ES6中引入了类的概念。类通常在面向对象编程语言中被使用,可以根据使用情况一边使用函数式编程一边使用面向对象编程 尽管React为了例如不可变数据结构等的特征而拥抱函数式编程,但是它还是使用类来声明组件,这些组件就被称为ES6组件,React混合使用了两种编程范式中的有益部分

例如下面这个Developer类

class Developer{
constructor(firstname,lastname){
this.firstname = firstname;
this.lastname = lastname;
}

getName(){
return this.firstname + '' +this.lastname;
}
}

类都有一个用来实例化自己的构造函数,这个构造函数可以用来传入参数来赋予给类的实例。此外,类可定义函数,因为这个函数被关联给了类,所有它被称为方法,通常它被当称为类的方法。 实例化上面的Develper类,以及使用它的方法

const Lbh = new Developer('Lai','binhong'); console.log(Lbh.getName());

React 使用JavaScript ES6类来实现 ES6组件

import React, {Component} from 'react';
class App extends Component {
render(){
...
}
}

App类继承自Component,你可以声明App组件,但是这个组件需要继承自另一个组件,继承的意思就是在一个面向对象编程的语言中,你要需要遵循继承原则, 它可以把功能从一个类传递到另一个类

这个App类就从Component类中继承了它的功能,这个Component类是从一个基本ES6类中继承来的ES6组件类。它 有一个React组件所需要的所有功能。渲染(render)方法就是其中可以使用的一个功能。 这个Component 类封装了所有React类需要的细节。 React Component类暴露出来的方法都是公共的接口,这些方法有一个方法必须被重写,其他的则不一定要被重写。render()方法是必须要被重写的方法,因为你定义了一个React组件的输出,它必须被定义。

《react 学习之道》书籍地址:https://leanpub.com/the-road-to-learn-react-chinese/

The Road to learn React书籍学习笔记(第一章)的更多相关文章

  1. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  2. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  3. The Road to learn React书籍学习笔记(第四章)

    高级React组件 本章将重点介绍高级 React 组件的实现.我们将了解什么是高阶组件以及如何实现它们.此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能. 引用 DOM ...

  4. GIT学习笔记——第一章

    git之vim编辑器退出命令 # 学习笔记 张文军微博主页  张文军码云主页   张文军新浪云主页  张文军博客主页 ## 刚学习git,好多东西没接触过,进入vim后不知道如何出来了,网上找了很多都 ...

  5. 《跟我学Shiro》学习笔记 第一章:Shiro简介

    前言 现在在学习Shiro,参照着张开涛老师的博客进行学习,然后自己写博客记录一下学习中的知识点,一来可以加深理解,二来以后遗忘了可以查阅.没有学习过Shiro的小伙伴,也可以和我一起学习,大家共同进 ...

  6. JavaScript高级程序设计学习笔记第一章

    作为学习javascript的小白,为了督促自己读书,写下自己在读书时的提炼的关键点. 第一章: 1.JavaScript简史:Netscape Navigator中的JavaScript与Inter ...

  7. C语言学习笔记第一章——开篇

    本文章B站有对应视频 (本文图片.部分文字引用c primer plus) 什么是C语言 顾名思义,c语言是一门语言,但是和我们所讲的话不同,它是一门编程语言,是为了让机器可以听懂人的意思所以编写的一 ...

  8. 《Python基础教程(第二版)》学习笔记 -> 第一章 基础知识

    写笔记的原因:书也看了一遍,视频也看了,但总是感觉效果不好,一段时间忘记了,再看又觉得有心无力,都是PDF的书籍,打开了就没有心情了,上班一天了,回家看这些东西,真的没多大精力了,所以,我觉得还是把p ...

  9. PRML学习笔记第一章

    [转] PRML笔记 - 1.1介绍 模式识别的目标 自动从数据中发现潜在规律,以利用这些规律做后续操作,如数据分类等. 模型选择和参数调节 类似的一族规律通常可以以一种模型的形式为表达,选择合适模型 ...

随机推荐

  1. Java Knowledge series 2

    JVM Analysis & Design The object-oriented paradigm is a new and different way of thingking about ...

  2. SQL获得连续的记录的统计

    SELECT TYEAR, MIN(TDATE) AS STARTDATE, MAX(TDATE), COUNT(TYEAR) AS ENDNUM --TYEAR年,STARTDATE连续记录的开始时 ...

  3. ZIP文件流压缩和解压

    前面写了一篇文章 "ZIP文件压缩和解压", 介绍了" SharpZipLib.Zip " 的使用, 最近的项目中,在使用的过程中, 遇到一些问题. 比如, 现 ...

  4. springboot文件上传: 单个文件上传 和 多个文件上传

    单个文件上传 //文件上传统一处理 @RequestMapping(value = "/upload",method=RequestMethod.POST) @ResponseBo ...

  5. centos系统下安装Nginx

    参考链接 CentOS 7 用 yum 安装 Nginx Nginx负载均衡配置 下载并安装 #使用以下命令 sudo yum install -y nginx #sudo表示使用管理员权限运行命令 ...

  6. 对react vd 性能的理解

    相信大家都知道react vd的性能是很好的,速度挺快的,真实dom操作很慢的,但是结果完全相反: 后来我就做了个测试,从两个方面去测试,在页面初始渲染1w条数据,react渲染耗时超过了1秒 在12 ...

  7. Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

    ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index- ...

  8. Sublime Text3 + Markdown + 实时预览

    Sublime Text3是一款给力的文本编辑器,通过安装插件可以编辑Markdown文本,在编辑Markdown文本的同时可以实时预览编辑效果. 安装准备: 找到菜单栏:Preferences → ...

  9. java集合框架——Set

    一.Set概述 Set集合的特点是元素不允许重复,而且是无序的(添加和取出的顺序不一致). Set接口中的方法和Collection接口中的方法几乎相同,略. Set接口下常用的两个类:HashSet ...

  10. IOS 自定义代理delegate方法

    创建一个自定义代理 @class MJTgFooterView; /** 1.协议名称: 控件类名 + Delegate 2.代理方法普遍都是@optional 3. */ @protocol MJT ...