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) 初始化组件的状态.绑 ...
随机推荐
- 编译gRPC Go版本使用的 ProtoBuffer 文件
本篇文章主要解决mac下安装ProtoBuffer,编译go版本gRPC用的.proto文件 安装 protoc 注意,gRPC 需要用到 proto3, 而目前 Release 的版本是 2.6.1 ...
- JVM类加载器及Java类的生命周期
预定义类加载器(三种): 启动(Bootstrap)类加载器: 是用本地代码实现的类装入器,它负责将<Java_Runtime_Home>/lib下面的类库加载到内存中(比如rt.jar) ...
- php 截取字符串指定长度
---恢复内容开始--- 一.直接取整,舍弃小数,保留整数:intval(): intval(9.21); /*结果是9*/ intval(9.89); /*结果是9*/ intval(string) ...
- 涉及到【分页】的table的请求模式
step:1 点击分页器的内容 trigger事件句柄 (pagination, filters, sorter) => {//或者(page, pageSize)等 this.props.on ...
- http常见状态码有哪些？
ajax常见面试题 1:什么是ajax?ajax作用是什么? 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术. ajax用来与后台交互 2:原生js ajax请求有几个 ...
- iframe跨源报错:"Blocked a frame with origin from accessing a cross-origin frame"
一.报错信息: “Blocked a frame with origin from accessing a cross-origin frame” 二.在stackoverflow上找到原因 Same ...
- R中字符串操作
简介 Stringr中包含3个主要的函数族 字符操作 空格处理 模式匹配 常用函数 在平常的数据分析工作中,经常要用到如下的函数 函数 操作 str_length() 获取字符串长度 str_sub( ...
- 如何从本地添加项目到Github？（Windows）
有两种方法可以上传项目到Github 一.github在线上传文件夹 在线上传也可以上传完整的文件夹结构,直接拖拽到上传文件页面的框中即可. 点击上传文件 直接拖拽即可上传文件夹及文件夹里面的文件.如 ...
- 产品相关 细说软件产品和业务 & 业务过程(流程) & 业务逻辑
细说软件产品和业务& 业务过程(流程) & 业务逻辑 by:授客 QQ:1033553122 作为一名测试人猿,需要懂产品,不懂产品的测试猿不是好测试猿猴.而业务逻辑是软件产品 ...
- settimeout、setinterval区别和相互模拟
前几天翻书,看到“避免双重求值”一节时有提到settimeout().setinterval() 建议传入函数而不是字符串以作为第一个参数,所以这里总结一下settimeout()和setinterv ...