React简单入门
各位圆友，新年好！！！
使用 React 的网页源码时，首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，实际上线的时候，应该将它放到服务器完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
/*
* React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
* React.createClass 方法就用于生成一个组件类。
* 注意，组件类的第一个字母必须大写，否则会报错
* 件类只能包含一个顶层标签，否则也会报错。
*/
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name, index) {
return <div key={index}>Hello, {name}!</div>
})
}
</div>,
document.getElementById('app') ); /* var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('app') );*/
</script>
</body>
</html>
运行结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
/*
* 注意：添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor
* 这是因为 class 和 for 是 JavaScript 的保留字。
*/
var Mycomponent = React.createClass({
render:function(){
return <div>
<h1 className="fontcolortest">2018新年好!!</h1>
</div>;
}
}); ReactDOM.render(
<Mycomponent/>,
document.getElementById('app')
);
</script>
</body>
</html>
运行结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
/*
* 组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，
* 就是 HelloMessage 组件加入一个 name 属性，值为 John。
* 组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
*/ var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}新年好!</h1>;
}
}); ReactDOM.render(
<HelloMessage name="2018" />,
document.getElementById('app')
);
</script>
</body>
</html>
运行结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
/*
* this.props 对象的属性与组件的属性一一对应。除了this.props.children 属性。它表示组件的所有子节点
* 下面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 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>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>祝各位2018新年好!</span>
<span>身体健康</span>
<span>工作顺利</span>
<span>阖家幸福</span>
</NotesList>,
document.getElementById('app')
);
</script>
</body>
</html>
运行结果
React简单入门的更多相关文章
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...
- React Native入门——布局实践：开发京东client首页（一）
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- React简单教程-4.1-hook
前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...
- 用IntelliJ IDEA创建Gradle项目简单入门
Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...
随机推荐
- stdio - 标准输入输出库函数
SYNOPSIS 总览 #include <stdio.h> FILE *stdin; FILE *stdout; FILE *stderr; DESCRIPTION 描述 标注 I/O ...
- VirtualBox安装CentOS系统
1. 准备材料 虚拟机软件: VirtualBox 系统iso版本:CentOS-7-x86_64-DVD-1611.iso 虚拟机软件下载地址: https://www.virtualbox.org ...
- Ansible的roles标准化与Jenkins持续集成(三)
Ansible的roles标准化与Jenkins持续集成(三) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打 ...
- 笔记59 Spring+Hibernate整合（二）
一.项目结构 二.创建表 数据库中只有一张表,stock,三个字段:stock_id.stock_code和stock_name. CREATE TABLE `stock` ( `STOCK_ID` ...
- 通信矩阵转DBC
DBC的制作对于一些人来时比较陌生,熟悉的人做他感觉浪费时间(像我这样的),于是自己用PYTHON写了一个脚本,还挺好用的,只需要填写表格就好了,省出来大部分的时间. 分享下思路, 来看下DBC的文本 ...
- 【JavaWeb项目】一个众筹网站的开发（七）后台用户菜单
mvn命令不能运行: jar-war-pom之间是可以直接写,优先找这个工程,而不是仓库的位置 pom-pom子父关系,需要去仓库中找,我们需要使用<relativePath>../pro ...
- 重视项目排期，对dateline 有所敬畏
项目排期 = 个人任务完成 + 风险预估 + 意外情况 + 项目上下游依赖 个人任务完成 个人任务具体话 不要考虑私人情感,专注工作 风险预估 对可能出现的情况进行考虑 意外情况 对出现的意外情况提前 ...
- Delphi获取指定文件的版本号
获取指定文件的版本号 方式一: function GetFileVersion(FileName: string): string; type PVerInfo = ^TVS_FIXEDFILEINF ...
- thinkphp wechat
该接口对应的文件为Com/Wechat.class.php, 主要用户接收微信推送过来的用户数据并自动回复. 注意:识别和分析用户发送的内容,并提供回复内容需要开发者更具实际情况自己实现,本接口值提供 ...
- BZOJ 3159: 决战 解题报告
BZOJ 3159: 决战 1 sec 512MB 题意: 给你一颗\(n\)个点,初始点权为\(0\)的有跟树,要求支持 Increase x y w 将路径\(x\)到\(y\)所有点点权加上\( ...