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) 初始化组件的状态.绑 ...
随机推荐
- Hibernate(二)持久化对象的状态
简介 以前学习Hibernate的笔记,整理一下便发出来了,防止弄丢.有错误的话麻烦各位留言评论,感激不尽. 持久化类 Hibernate完成了从面向对象模型表示的对象至关系模型表示的数据结构的映射, ...
- ASP.NET Core 2 学习笔记（十）视图
ASP.NET Core MVC中的Views是负责网页显示,将数据一并渲染至UI包含HTML.CSS等.并能痛过Razor语法在*.cshtml中写渲染画面的程序逻辑.本篇将介绍ASP.NET Co ...
- Tomcat启动慢原因之一 At least one JAR was scanned for TLDs yet contained no TLDs
Tomcat启动时提示: 信息: At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging f ...
- Yii CGridView 关联表搜索排序实例
在这篇文章中,我准备讲解如何在CGridView中搜索或者排序关联表中的某一行,通过给Yii Blog demo添加一个list页面. 首先,检查你的blog demo里的protected\mode ...
- apply的“非改变this“的用法
说到apply,大家都是知道是改变this指向的,也都会立马和call联系在一起,MDN官网上也是如是说: 其实我们在平常使用call和apply的时候,都是想到他们的改变函数的this的功能, 正如 ...
- 【小程序】微信小程序绑定企业微信后怎样获取到用户信息
一.获取access_token 1.https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRECT Cor ...
- mac上显示.开头的文件
第一种方法是在finder中按下command+shift+.键. 第二种方法是在命令行输入如下命令 defaults write com.apple.Finder AppleShowAllFiles ...
- Dialog中更新Activity的数据显示
假设有一个activity,activity中有一个Button和一个TextView,点击按钮,弹出Dialog,对话框中有一个ListView,选中ListView中的某一项,关闭对话框,更新ac ...
- svn 同步资源库时忽略某些文件类型和文件夹
项目开发中,开发人员经常用SVN来管理代码,在和服务器同步时,每次都看到一堆.class,.log,target等文件,这样很不舒服. 解决方法: 打开:window-->preferences ...
- 1java异常详解
语法错误.编译时错误语义错误.逻辑错误.运行时错误 数组下标越界,c,c++不检查,需要程序员控制. 1.注意:这里说的异常是运行期错误,不包括编译期错误. 2.try尝试运行,catch捕获并处理, ...