react-01
比较了半天VUE、Angular、React,最终选择React,下面从几个例子开始React的学习,先从单个的index.html,引用react.js开始
一.最简单的纯JS的代码
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
window.onload = function() {
var h1 = React.createElement("h1", null, "hello REACT!");
ReactDOM.render(h1, document.getElementById("root"));
};
</script> </body>
</html>
二、使用JSX的语法
JSX是React提供的语法,React会把JSX编译成JS,这个编译器使用了一个组件babel
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
window.onload = function() {
ReactDOM.render(
<h1>Hello, REACT!</h1>,
document.getElementById("root")
);
};
</script>
</body>
</html>
三、通过组件的方式添加元素
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component{
render(){
return <h1>Hello, REACT!</h1>
}
} window.onload = function() {
ReactDOM.render(<Welcome />,
document.getElementById("root")
);
};
</script>
</body>
</html>
四、给组件添加属性功能
<!DOCTYPE html>
<html>
<head>
<title>react直接引用js</title>
<script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}!</h1>
}
} window.onload = function() {
ReactDOM.render(<Welcome name='react16.3'/>,
document.getElementById("root")
);
};
</script>
</body>
</html>
react-01的更多相关文章
- [React] 01 - Intro: javaScript library for building user interfaces
教学视频: http://www.php.cn/code/8217.html React 教程: http://www.runoob.com/react/react-tutorial.html 本篇是 ...
- [Full-stack] 快速上手开发 - React
故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...
- [React] 08 - Tutorial: evolution of code-behind
有了七篇基础学习,了解相关的知识体系,之后便是系统地再来一次. [React] 01 - Intro: javaScript library for building user interfaces ...
- [Code::Blocks] Install wxWidgets & openCV
The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...
- Top 20 JavaScript Projects of 2017
https://www.youtube.com/watch?v=SUMn8y3pi28 20. AngularJS 1 19. Passport 18. Pug 17. Socket.IO 16. J ...
- 本人SW知识体系导航 - Programming menu
将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...
- React 实践记录 01 组件开发入门
Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...
- React Native 开发之 (01) 配置开发环境
一 React Native React Native 是由Facebook发布的开源框架,着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台.(Learn once, write an ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- react学习笔记-01
1. HTML模板 Jsx是react的语法糖,最终会被编译成js语法.因此需要第三方库browser将jsx转换成js. 由于react 0.14版本之后,将react和react-dom拆分,所以 ...
随机推荐
- Git上传本地代码
Git add .将本地文件上传至缓冲区 git commit -m 'project init' 将代码上传至本地仓库 Git push 将本地的代码传至线上(码云) git ...
- 什么是RESTful API?
要弄清楚什么是RESTful API,首先要弄清楚什么是REST.REST -- REpresentational State Transfer,英语的直译就是"表现层状态转移". ...
- 关于学习CentOS7使用firewalld打开关闭防火墙和端口
1.firewalld简介 firewalld是centos7的一大特点,主要有两个优点:一是支持动态更新,不需要重启服务:二就是加入了防火墙的“zone”概念. firewalld有图形界面和工具界 ...
- idea中git常见使用场景
工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...
- 【CZYZ 20160819】背包
题目描述 蛤布斯有nn个物品和一个大小为mm的背包,每个物品有大小和价值,它希望你帮它求出背包里最多能放下多少价值的物品. 输入数据 第一行两个整数 n,mn,m. 接下来 nn 行每行两个整数 xi ...
- PHP通过身份证号码获取性别、出生日期、年龄等信息
$sex = substr($idcard, (strlen($idcard)==18 ? -2 : -1), 1) % 2 ? '1' : '2'; //18位身份证取性别,倒数第二位奇数是男,偶数 ...
- Hadoop Mapreduce运行流程
Mapreduce的运算过程为两个阶段: 第一个阶段的map task相互独立,完全并行: 第二个阶段的reduce task也是相互独立,但依赖于上一阶段所有map task并发实例的输出: 这些t ...
- c语言:第二次作业,循环结构
1.本章学习总结(2分) 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 循环相比分支和顺序结构难了许多,相对的来说我的c语言的基础比之前有提高,但是还是很多题想了很久也 ...
- 阿里巴巴 Weex
原文链接:https://blog.csdn.net/zz901214/article/details/79168707/ 分享嘉宾:侑夕 阿里巴巴高级前端工程师(上张帅哥的图镇楼,看完,更有动力学习 ...
- step_by_step_用python爬点磁力链接
爬点东西 -Scrapy 今天是小年,团聚的日子,想想这一年中发生过大大小小的事,十分感慨. 言归正传: 吐槽了一些话,没事的时候一个单身老男人就只能上上网打发打发时间,后来我发现一个网站比较好,但是 ...