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有的功能它都 ...
随机推荐
- 在egg中配置 sequelize
如何在eggjs中引入 sequlize 安装 第一步,在项目中安装 egg-sequelize插件和mysql插件 npm install --save egg-sequelize mysql2 第 ...
- ionic ios上状态栏和app重叠解决方案
干货文章 ·2018-03-22 01:33:01 官方issues: https://github.com/ionic-team/ionic/issues/13294 解决办法: 1.在 confi ...
- 聊聊动态链接和dl_runtime_resolve
写在前面 linux下的动态链接相关结构,重新回顾_dl_runtime_resolve的流程以及利用方法 动态链接相关结构 为了高效率的利用内存,多个进程可以共享代码段.程序模块化方便更新维护等,动 ...
- Codeforces 1163E 高斯消元 + dfs
题意:给你一个集合,让你构造一个长度尽量长的排列,使得排列中任意相邻两个位置的数XOR后是集合中的数. 思路:我们考虑枚举i, 然后判断集合中所有小于1 << i的数是否可以构成一组异或空 ...
- codeforces 1198E Rectangle Painting 2 最小点覆盖
题目传送门 题意: 有一个$n∗n$的网格,网格中有一些矩形是黑的,其他点都是白的. 你每次可以花费$ min (h,w)$的代价把一个$h*w$的矩形区域变白.求把所有黑格变白的最小代价. 思路: ...
- jeesite框架常用插件
1.分页: <div class="pagination">${page }</div> 2.日历:onclick="WdatePicker({d ...
- 批量修改root密码
公司有五十多台服务器.每台服务器中使用的密码完全不同,同时操作系统也不一样,centos5,6,7 .ubuntu,windows都有,更不用提其中各种小版本. root密码定期更改是一个大问题(wi ...
- php获取微信openid
使用微信接口,无论是自动登录还是微信支付我们首先需要获取的就是openid,获取openid的方式有两种,一种是在关注的时候进行获取,这种订阅号就可以获取的到,第二种是通过网页授权获取,这种获取需要的 ...
- jsp EL运算符
算术运算符 算术运算符 说明 示例 结果 + 加 ${1 + 1} 2 - 减 ${1 - 1} 0 * 乘 ${1 * 2} 2 /或div 除 ${3 / 2} 1.5 %或mod 取余 ${3 ...
- 【luoguP4768】【NOI2018】归程
description 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 nn 个节点.mm 条边的无向连通图(节点的编号从 11 至 nn).我们依次用 l,a ...