Ref: React 入门实例教程

这算什么,react学习例子的十二门徒?哈哈


如何运行别人的react项目?

Ref: 【React全家桶入门之CODE】项目代码与使用方法

使用git克隆项目到本地:git clone https://github.com/awaw00/react-curd.git

现在你得到的是整个项目最新版本的代码。

(1) 执行npm i roadhog json-server -g 安装全局工具。

(2) 执行npm i 来安装项目依赖。

(3) 执行npm run server 启动服务器,然后再执行npm run dev 启动客户端。

【npm start启动服务器即可】

HTML 模板,以及ReactDOM.render()

可以将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录

$ babel src --out-dir build

JSX 语法

遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;

遇到代码块(以 { 开头),就用 JavaScript 规则解析。

数组变量

组件

组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage

组件类只能包含一个顶层标签,否则也会报错。

因为 class 和 for 是 JavaScript 的保留字,所以:

(1) class 属性需要写成 className ;

(2) for 属性需要写成 htmlFor ;

this.props.children

这里需要注意, this.props.children 的值有三种可能:

(1) 如果当前组件没有子节点,它就是 undefined ;

(2) 如果有一个子节点,数据类型是 object ;

(3) 如果有多个子节点,数据类型就是 array 。

所以,处理 this.props.children 的时候要小心。

PropTypes

获取真实的DOM节点

获取用户的输入,必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。

为了做到这一点,文本输入框必须有一个 ref 属性,

然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

除了 Click 事件以外,还有 KeyDown 、CopyScroll 等,完整的事件清单请查看官方文档

this.state

将组件看成是一个状态机,(1) 一开始有一个初始状态,(2) 然后用户互动,导致状态变化,(3) 从而触发重新渲染 UI 。

(1) this.props 表示那些一旦定义,就不再改变的特性;

(2) this.state 表示会随着用户互动而产生变化的特性;【liked】

表单

用户在表单填入的内容,所以不能用 this.props 读取。

textarea 元素、select元素、radio元素都属于这种情况,更多介绍请参考官方文档

组件的生命周期

will 函数在进入状态之前调用,did 函数在进入状态之后调用。

componentWillMount()
componentDidMount() componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState) componentWillUnmount() 

此外,React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

Ajax

组件的数据来源,通常是通过 Ajax 请求从服务器获取,

可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI。

上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。

我们甚至可以把一个Promise对象传入组件。

ReactDOM.render(
// 从Github的API抓取数据,然后将Promise对象作为属性,
// 传给 RepoList组件
<RepoList
promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
/>,
document.body
);

组件代码:

var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
}, componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}, render: function() {   // 如果Promise对象正在抓取数据(pending状态),组件显示"正在加载";
  // 如果Promise对象报错(rejected状态),组件显示报错信息;
  // 如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据。
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});

[React] 03 - Intro: react.js in twelve demos的更多相关文章

  1. [React] 02 - Intro: why react and its design pattern

    为啥使用React,给我个理由 过去 需要手动更新DOM.费力地记录每一个状态:既不具备扩展性,又很难加入新的功能,就算可以,也是有着冒着很大的风险. 不过,使用这种开发方式很难打造出极佳的用户体验. ...

  2. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  3. [React] 01 - Intro: javaScript library for building user interfaces

    教学视频: http://www.php.cn/code/8217.html React 教程: http://www.runoob.com/react/react-tutorial.html 本篇是 ...

  4. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...

  5. react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

    react / config\webpack.config.js 编译后去掉map 减小体积 shouldUseSourceMap = false

  6. 【03】react 之 创建component

    React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...

  7. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  8. React笔记:React基础(2)

    1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...

  9. [React] 从零开始的react

    组件 1. 无状态组件 在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母(便于区分,也可以不是). 无状态组件是纯展示组件,仅仅只是用于数据的展示,只根据传入的p ...

随机推荐

  1. Cocos Creator的小点

    声明的时候,变量如此:但用的时候就变成了border,找了很久的问题,一直没找到啊,后来就发现命名的时候和内置的一定不要太相似否则后悔的只能是自己: cc.Class({ extends: cc.Co ...

  2. ROS知识(24)——ros::spin()和spinOnce的含义及其区别

    1.ros::spin()和spinOnce含义 如果在节点中如果订阅了话题,那么就必须要调用ros::sping()或者ros::spinOnce()函数去处理话题绑定的回调函数,否则该节点将不会调 ...

  3. C++泛型编程(1)--自己实现C++迭代器/遍历器 iterator

    1.原理 迭代器又称为遍历器,用于访问容器中的数据,迭代器旨在算法和容器之间搭建访问的桥梁,从而使算法和数据分离,不用关心数据具体的存储细节.具体的原理描述请参考以下两个博客: [1].C++迭代器 ...

  4. pt-query-digest简介使用

    简介        pt-query-digest 是用于分析mysql慢查询的一个工具,与mysqldumpshow工具相比,py-query_digest 工具的分析结果更具体,更完善. 有时因为 ...

  5. 利用java8对设计模式的重构

    java8中提供的很多新特性可以用来重构传统设计模式中的写法,下面是一些示例: 一.策略模式 上图是策略模式的类图,假设我们现在要保存订单,OrderService接口定义要做什么,而NoSqlSav ...

  6. mysql yum安装

    # 下载yum源的rpm包wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm# 安装rpm包rpm - ...

  7. App架构师实践指南二之App开发工具

    App架构师实践指南二之App开发工具     1.Android Studio 2.编译调试---条件断点.右键单击断点,在弹出的窗口中输入Condition条件.---日志断点.右键单击断点,在弹 ...

  8. ds18b20采集温度并上报服务器

    交叉编译器:arm-linux-gcc-4.5.4 Linux内核版本:Linux-3.0 主机操作系统:Centos 6.5 开发板:FL2440 温度传感器:ds18b20 注:此程序的客户端是在 ...

  9. C# SpinLock实现

    关于SpinLock自旋锁网上已经有很多说明,这里也copy了一部分,我这里主要关注微软的实现,学习人家的实现方式. 如果由于垃圾回收,基于对象的锁对象开销太高,可以使用SpinLock结构..NET ...

  10. [Python设计模式] 第6章 衣服搭配系统——装饰模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序,可以给人搭配嘻哈风格(T恤,垮裤,运动鞋)或白领风格( ...