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) 初始化组件的状态.绑 ...
随机推荐
- O(∩_∩)O~~
1.在一切ac的路上,所以的难题都是纸老虎. 2.加油吧,少年.
- spring Boot的配置
一.配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的: application.properties application.yml 配置文件的作用:修改SpringBoot自 ...
- C#动态创建lambda表达式
/// <summary> /// 创建lambda表达式:p=>true /// </summary> /// <typeparam name="T&q ...
- spring源码分析-core.io包里面的类
前些日子看<深入理解javaweb开发>时,看到第一章java的io流,发觉自己对io流真的不是很熟悉.然后看了下JDK1.7中io包的一点点代码,又看了org.springframewo ...
- js-权威指南学习笔记15
第十五章 脚本化文档 1.文档对象模型DOM是表示和操作HTML和XML文档内容的基础API. 2.Document.Element.Text是Node的子类. 3.查询文档的一个或多个元素有如下方法 ...
- WDCP上传SSL证书
1.在线申请SSL证书 2.网站管理>SSL证书上传 3.将key文件直接上传,cert文件内容复制到crt文件中,再上传 4.开启https 注意:同一个域名下解析的若干域名,只能走主域名的证 ...
- less之旅
在遇到less之前,一直和css交往,当less出现在我码农生涯的时候,被她给深深地吸引.从此,less成了自己码农生活里面的一房,css退居二房!那么,less到底有什么魅力让我如此迷上她呢? le ...
- 爬虫必备—Scrapy
一.Scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 ...
- B/S与C/S架构、B/S架构协议
软件有三大类型 单机类型.CS类型(Outlook.QQ.大型游戏).BS类型 BS结构中的协议 在BS结构中,首先使用到DNS协议:网络传输部分使用TCP/IP参考模型,其中网络接入层没有相应协议, ...
- maven Could not find artifact com.** 无法下载原因分析
1.有时候经常莫名其妙的遇到这个问题:比如在idea重新导入一个新项目,或者在原来的空间里面引入一个新项目.去私服里面查看明明是有的,但是就是下载不下来. 结合网上搜的和自己遇到的,总结原因如下: 1 ...