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有的功能它都 ...
随机推荐
- Clairewd's message /// 字符串hash
题目大意: 给定字符串s 是26个字母对应的密文字母 给定字符串c1 是 密文+部分原文 原文可能缺损 要求将原文补全输出 利用s得到密文字母对应的原字母rs 利用rs翻译c1得到 原文+部分密文c2 ...
- OC开发系列-内存管理
概述 移动设备的内存极其有限,每个app所有占用的内存是有限的.当app所占用的内存比较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间. 任何集成了NSObject的对象都需要手动进行 ...
- 关于solarwinds的一些介绍
由于是给客户使用,作为运维人员自然是要安装测试一下的. solarwinds是一个付费的监控软件,部署起来很方便,加agent节点也很方便,除了监控主机,还可以监控网络流量,交换机等设备.由于并没有实 ...
- 在Feign中添加自定义配置
首先先创建一个FeignConfig类,代码如下: package com.xing.config; import org.springframework.context.annotation.Bea ...
- leetcode-162周赛-1252-奇数值单元格数目
题目描述: 自己的提交: class Solution: def oddCells(self, n: int, m: int, indices: List[List[int]]) -> int: ...
- leetcode-12双周赛-1244-力扣排行榜
题目描述: class Leaderboard: def __init__(self): self.map = collections.Counter() def addScore(self, pla ...
- 【NOI2019模拟2019.6.29】组合数（Lucas定理、数位dp）
Description: p<=10且p是质数,n<=7,l,r<=1e18 题解: Lucas定理: \(C_{n}^m=C_{n~mod~p}^{m~mod~p}*C_{n/p} ...
- ZROI week1
\[ZROI day1\] \[Grid\] 题目描述 给定一个矩阵,小写字母,求一条路径使得从\((1,1) -> (n,m)\),字典序最小,并且每次只能向右或者向下. 题解 先考虑如果没有 ...
- 如何禁止C++默认成员函数
如何禁止C++默认成员函数 发表于 2016-03-02 | 分类于 C++ | 阅读次数 17 前言 前几天在一次笔试过程中被问到C++如何设计禁止调用默认构造函数,当时简单的想法是直 ...
- Java-Class-@I：java.annotation.Resource
ylbtech-Java-Class-@I:java.annotation.Resource 1.返回顶部 2.返回顶部 1.1. import javax.annotation.Resource ...