React 入门学习笔记1
摘自阮一峰：React入门实例教程，转载请注明出处。
一. 使用React的html模板
使用React, 我们需要加载3个库，react.js, react-dom.js, 和browser.js.它们必须首先加载。
其中react是核心库，react-dom是提供与dom相关的功能。browser是将JSX语法转换为JS语法，但这一步很耗时间。
所以，模板结构大致如下：
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** 这里写我们的JSX代码，后面的代码全部加在这里 **
</script>
</body>
</html>
注意，<script>标签的type属性是text/babel。这是因为React使用独有的JSX语法，跟JavaScript不兼容。所以，凡是使用JSX的地方，都要加上
type="text/babel"
二. JSX语法
上面说我们使用React会用到JSX语法，什么是JSX？
HTML语言可以直接写在JavaScript中，不加任何引号，而这些HTML语言中又可以加JavaScript代码，只需要将js用{}包裹。这就是JSX语法，它允许HTML和
JavaScript混写。
语法规则：遇到HTML标签（以 < 开头），就用HTML规则解析；遇到代码块（以 { 开头），就用JavaScript 规则解析。
var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
三. ReactDOM.render()
ReactDOM.render是React的最基本的方法，用于将模板转为HTML语言，并插入指定的DOM节点。
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
四. 组件
React允许将代码封装成组件（就是一个类似html标签的东西），然后像插入普通的HTML标签一样，在网页中插入这个组件。
React.createClass方法用于生成一个组件类。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
注意，组件类的第一个字母必须是大写。否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。
组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
五. this.props.children 组件所有的子节点
this.props对象的属性与组件的属性一一对应。但是有一个例外，就是this.props.children属性，他表示组件的所有子节点。
this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>; //遍历它的两个子节点，对于每一个子节点，返回一个 <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
六. PropTypes 验证组件属性是否合法
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title=“ABC” />,
document.body
);
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。否则会报错。
此外，getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
上面代码会输出"Hello World"。
React 入门学习笔记1的更多相关文章
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- React 入门学习笔记2
摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...
- React 入门学习笔记整理（一）——搭建环境
使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...
- React 入门学习笔记整理（二）—— JSX简介与语法
先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...
- React 入门学习笔记整理（三）—— 组件
1.定义组件 1)函数组件 function GreateH(props){ return <div> <h2>hello,{props.name}</h2> &l ...
- React 入门学习笔记整理（四）—— 事件
1.事件定义 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 在类组件中定义函数,通过thi ...
- React 入门学习笔记整理（五）—— state
1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,set ...
- React 入门学习笔记整理（六）—— 组件通信
1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...
- React 入门学习笔记整理（七）—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
随机推荐
- Java Swing实战（二）下拉菜单组件JComboBox及其事件监听
接下来给"数据源配置"面板添加下拉框. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class Weimi ...
- Hive 编程指南—笔记
1. 基础 1.1 Hive 解决问题的背景? 用户如何从一个现有的数据基础架构转移到 Hadoop 上,而这个基础架构是基于传统的关系数据库和 SQL 的? Hive 提供了一个被称为 HQL 的 ...
- 为 HTTP/2 头压缩专门设计的 HPACK
HTTP/2 对消息头采用 HPACK 进行压缩传输,能够节省消息头占用的网络的流量.如何理解 HPACK 压缩呢? 如果我们约定将常用的请求头的参数用一些特殊的编号来表示,比如 GET ...
- js设置光标插入文字和HTML
原文链接:js设置光标插入文字和HTML 在一个textarea的某个光标位置插入文字或者在某个编辑器中插入图片html内容,我最近经常和这些打交道,但总是一团模糊,今天整理一下关于如何插入文字,设置 ...
- htm-文字标签和注释标签
文字标签:修改文字的样式 <font></font> 属性: size:文字的大小 取值范围 1-7,超出了7,默认还是7 color:文字颜色 两种表示方法 英文单词:re ...
- substr与substring的区别
在js中字符截取函数有常用的三个slice().substring().substr()了,下面我来给大家介绍slice().substring().substr()函数在字符截取时的一些用法与区别吧 ...
- ThreeJS两个点作为起始坐标画一个立方体
drawLineBox(new THREE.Vector3(100, 50, 0), new THREE.Vector3(200, 100, 100)); function drawLineBox(s ...
- PHP网站（Drupal7）响应过慢之“Wating(TTFB)时间过长”
直接上图: 这是Chrome浏览器自带的工具分析的.整个url请求的时间为2.59秒,最大的耗时在Wating(TTFB, Time To First Byte),消耗了2.59秒(应该是其他时间太短 ...
- Django 请求参数
Django 请求参数 1.获取URL路径中的参数 需求:假设用户访问127.0.0.1/user/1/2,你想获取1,2.应该怎么操作呢? (1)未命名参数(位置参数) # 在项目下的urls.py ...
- Eigen学习之Array类
Eigen 不仅提供了Matrix和Vector结构,还提供了Array结构.区别如下,Matrix和Vector就是线性代数中定义的矩阵和向量,所有的数学运算都和数学上一致.但是存在一个问题是数学上 ...