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有的功能它都 ...
随机推荐
- mybatis 教程（mybatis in action）
目录简介: 一:开发环境搭建二:以接口的方式编程 三:实现数据的增删改查 四:实现关联数据的查询 五:与spring3集成(附源码) 六:与Spring MVC 的集成 七:实现mybatis分页(源 ...
- android中使用MediaRecoder录制声音
package com.test.mediarecorder; import java.io.File; import android.media.MediaRecorder; import andr ...
- 在并发Java应用程序中检测可见性错误
了解什么是可见性错误,为什么会发生,以及如何在并发Java应用程序中查找难以捉摸的可见性错误.这些问题你可能也遇到过,当在优锐课学习了一段时间后,我对这些问题有了一定见解,写下这篇文章和大家分享. 检 ...
- javafx将数据库内容输出到tableview表格
一 .创建Fxml文件,用Javafx Scene Builder 编辑页面,创建tableview(表格)和tablecolum(表格中的列),并为其设置fxid: 二.生成fxml文件的控制类: ...
- 域名访问和ip访问区别
域名访问和ip访问区别 ip访问对应某一台确定的服务器: 域名访问相当于在ip访问的基础上,做了一个反向代理的中间功能.例如:百度,很多人会同时使用,如果使用的是同一台服务器的话,服务器估计会扛不住, ...
- 【Luogu】【关卡2-15】动态规划的背包问题（2017年10月）【还差一道题】
任务说明:这是最基础的动态规划.不过如果是第一次接触会有些难以理解.加油闯过这个坎. 01背包二维数组优化成滚动数组的时候有坑有坑有坑!!!必须要downto,downto,downto 情景和代码见 ...
- 36.两个链表的第一个公共结点(python)
题目描述 输入两个链表,找出它们的第一个公共结点. class Solution: def FindFirstCommonNode(self, pHead1, pHead2): # write cod ...
- 分布式项目中Spring security自定义权限类
package cn.lijun.core.service; import cn.lijun.core.pojo.seller.Seller;import org.springframework.se ...
- Kubernetes 弹性伸缩HPA功能增强Advanced Horizontal Pod Autoscaler -介绍部署篇
背景 WHAT(做什么) Advanced Horizontal Pod Autoscaler(简称:AHPA)是kubernetes中HPA的功能增强. 在兼容原生HPA功能基础上,增加预测.执行模 ...
- jmeter测试之-脚本制作
一.脚本录制 1.遇见的问题,回放的时候总是登录失败 解决方式:设置HTTP请求为—跟随重定向 2.新增一个用户的时候,脚本参数里面输入汉字,在浏览器查看的时候显示问号 解决方式:脚本编码方式增加u ...