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) 初始化组件的状态.绑 ...
随机推荐
- 通过SourceTree连接SSL有问题的自建gitlab服务器
我用的是 SourceTree 作为Git客户端的,用它连接一个HTTPS证书过期的自建git服务,会收到下面错误: abort: error: _ssl.c:507: error:14090086: ...
- IDEA 的 properties 文件的属性字段如何链接到调用的文件
想要达到的效果: ctrl + 鼠标点击:弹出如下所有使用的文件 问题: 有些 IDEA 使用 ctrl + 鼠标点击不能看到使用的文件. 解决办法: ctrl + 鼠标点击,然后选择设置按钮 然后 ...
- MQ之如何做到消息幂等 （转 优秀）
一.缘起 MQ消息必达,架构上有两个核心设计点: (1)消息落地 (2)消息超时.重传.确认 再次回顾消息总线核心架构,它由 发送端.服务端.固化存储.接收端 四大部分组成. 为保证消息的可达性,超时 ...
- LINUX创建LVM、PV、VG、LV ORACLE服务器方案划分
为裸盘分区 查看硬盘分区 fdisk -l 进入分区管理 fdisk /dev/sda 创建PV 创建PV pvcreate /dev/sda1 pvcreate /dev/sdb1 pvcreate ...
- jedis、jedisPool、jedisCluster的使用方法
jedis 连接redis(单机): 使用jedis如何操作redis,但是其实方法是跟redis的操作大部分是相对应的. 所有的redis命令都对应jedis的一个方法 1.在macen工程 ...
- mysql 的varchar类型小记
参考链接:MySQL的varchar长度问题 今天用mysql做一个demo,创建了个表: -- 借款表 CREATE TABLE jk ( id ) NOT NULL auto_increment, ...
- 当碰到需要调试打包后的js
在react中经常开发碰到不能热更中进行调试的,如IE之类的 这个时候我们就需要打包才能运行看到效果, 但是往往每次打包都需要很长的时间: 这个时候我们就可以直接找到打包后的文件,直接在改文件中修改: ...
- angular2.0入门---webStorm创建angular CLI项目
创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...
- MySQL创建数据库/表等基本命令操作
前提:安装好MySQL并且配置好服务,能够正常使用 按住键盘上的Windows图标,通过搜索框找到MySQL5.7 Command Line Client,点击启动 输入安装时设置用户的密码 成功连接 ...
- Pig脚本 .pig
pig脚本就是一个文件,保存了多条pig命令,通常后缀是.pig(不强制). 多行注释:/**/ 单行注释:-- 下面是一个名字是test.pig的脚本的例子: /* ...