react入门----基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- react核心库 -->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<!-- 提供与dom相关的功能 -->
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<!-- 将es6代码转换为es5语法格式 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<style>
.trest{
color: red;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var Hello = React.createClass({
render: function () {
<!-- 这里的this表示当前react组件的实例-->
<!-- props则是我们自在使用这个组件是，组件上属性的集合 -->
<!-- props的key值与return上的key值一一对应，值页一一对应 -->
<!-- class样式的三种方式，类名，内联，还有声明 -->
<!-- 1、使用类名时，这里的html标签内不能使用class而要使用className，因为在es6中class是一个保留字 -->
<!-- return <div className="trest">Hello {this.props.name} {this.props.title}</div>; -->
<!-- 2.内联样式 使用双花括号的形式，并且使用驼峰命名的实行写属性名-->
<!-- return <div style={{color:'red',fontSize:"55px"}}>Hello {this.props.name} {this.props.title}</div>; --> <!-- 3.使用声明变量的形式-->
var styleObj={
color:'red',
fontSize:'55px' <!--采用驼峰命名的形式-->
}
return <div style={styleObj}>Hello {this.props.name} {this.props.title}</div>;
}
});
ReactDOM.render(<Hello name="dongdong" title="Mr"/>, document.getElementById('container'));
</script>
</body>
</html>
react入门----基础语法的更多相关文章
- Scala快速入门 - 基础语法篇
本篇文章首发于头条号Scala快速入门 - 基础语法篇,欢迎关注我的头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech)获取更多干货,也欢迎关注我的 ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
- Flux --> Redux --> Redux React 入门 基础实例使用
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- React入门基础（学习笔记）
这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...
- React入门基础
1-react概念: React是一个用于构建用户界面的JavaScript库.React主要用于构建UI,很多人认为React是MVC中的V(视图).React起源于Facebook的内部项目.Re ...
- React入门----基础篇
React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...
- python入门-基础语法
一.变量 定义字符串要加单引号‘’ 变量命名规范: 变量名只能是字母.数字或下划线的任意组合 变量名的第一个字符不能是数字 变量名不能用关键字 变量名不要用中文 变量名不要太长,区分大小写 面就用单引 ...
- java入门---基础语法&基础常识&编码规范&命名规范
一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
随机推荐
- 深入理解JMM（Java内存模型） --（六）final
与前面介绍的锁和volatile相比较,对final域的读和写更像是普通的变量访问.对于final域,编译器和处理器要遵守两个重排序规则: 在构造函数内对一个final域的写入,与随后把这个被构造对象 ...
- vs code 快速生成vue 模板
vs code 快速生成vue 模板 1.使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择.(或 文件>首选项>用户代码片断里面,输入 vue.json ...
- 基于Spark和Tensorflow构建DCN模型进行CTR预测
实验介绍 数据采用Criteo Display Ads.这个数据一共11G,有13个integer features,26个categorical features. Spark 由于数据比较大,且只 ...
- P3258[JLOI2014]松鼠的新家(LCA 树上差分)
P3258 [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他 ...
- [Swift通天遁地]一、超级工具-(14)使用SweetAlert制作漂亮的自定义Alert窗口
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- centos docker 安装mysql 8.0
centos 版本 CentOS Linux release 7.5.1804 (Core) 内核版本: 3.10.0-862.el7.x86_64 下载最新版mysql docker pull m ...
- golang——随机数（math/rand包与crypto/rand包）
1.math/rand 包 1.1.math/rand 包实现了伪随机数生成器 1.2.主要方法 (1)func Seed(seed int64) 设置随机种子,不设置则默认Seed(1) (2)fu ...
- c++ swap函数
swap(a,b)也就是把a和b的值互换. 头文件:#include<algorithm>,swap要加using namespace std:
- Linux 常规操作指南
1.修改Linux服务器别名 临时修改: vim /etc/hostname 修改别名 永久修改: vim /etc/sysconfig/network 添加 HOSTNAME=别名 重启服务器 ...
- 429c Leha and Function
题目 解题报告 F(n, k)是在集合{1, 2, 3, ..., n}中所有的具有k个元素的子集中分别取最小值,相加后的期望. 例如:要求F(4, 2),根据定义有{1, 2}, {1, 3}, { ...