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有的功能它都 ...
随机推荐
- matlab中struct创建方法
MATLAB中struct创建方法可分为:直接创建法和struct()函数创建法 (1)直接创建: 直接定义字段,像使用一般matlab变量一样,不需要事先声明,支持动态扩充.下面创建一个Studen ...
- sql 查询库是否存在
网上查了很多,但是都是不完整的,很多坑,后面终于摸索出来了:DROP DATABASE IF EXISTS 库名(不要加引号); 这句话的意思就是如果库存在,就删除库,然后再新建库就行了.
- 查看linux防火墙的状态
如有需要可以加我Q群[308742428]大家一起讨论技术,有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下.iptables防火墙1.基本操作 # 查看防火墙状态 servi ...
- 【转】网站SEO优化中网站的三大标签指的是什么？
对于很多刚刚接触SEO的新手朋友来说,会经常听到别人提及网站的三大标签.那么,具体什么是网站的三大标签呢?其实网站的三大标签指的就是title.keywords.description,通俗一点也可以 ...
- 2018-2-13-win10-UWP-Hmac
title author date CreateTime categories win10 UWP Hmac lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...
- 2018-8-10-win10-UWP-ListView-
title author date CreateTime categories win10 UWP ListView lindexi 2018-08-10 19:16:53 +0800 2018-2- ...
- 2019-5-21-win10-uwp-url-encode
title author date CreateTime categories win10 uwp url encode lindexi 2019-5-21 9:54:7 +0800 2018-2-1 ...
- teb教程3
配置和运行机器人导航 简介:配置teb_local_planner作为navigation中local planner的插件 参考teb安装 由于局部代价地图的大小和分辨率对优化性能影响很大,因为占据 ...
- css 实现文本换行及显示不下隐藏显示省略号
CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html 今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...
- linux crontab 计划任务脚本
在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINUX中,周期执行的任务一般由cron ...