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,可以看 ...
随机推荐
- 4.8 Using Ambiguous Grammars
4.8 Using Ambiguous Grammars It is a fact that every ambiguous grammar fails to be LR and thus is no ...
- 第十五周 Leetcode 517. Super Washing Machines(HARD) 贪心
Leetcode517 很有趣的一道题 由于每一步可以任选某些数字对它们进行转移,所以实际上是在求最优解中的最复杂转移数. 那么我们考虑,到底哪一个位置要经过的流量最大呢? 枚举每个位置,考虑它左边的 ...
- bzoj 1999: [Noip2007]Core树网的核【树的直径+单调队列】
我要懒死了,所以依然是lyd的课件截图 注意是min{max(max(d[uk]),dis(u1,ui),dis(uj,un))},每次都从这三个的max里取min #include<iostr ...
- bzoj 1682: [Usaco2005 Mar]Out of Hay 干草危机【并查集+二分】
二分答案,把边权小于mid的边的两端点都并起来,看最后是否只剩一个联通块 #include<iostream> #include<cstdio> using namespace ...
- Vigenère密码 2012年NOIP全国联赛提高组(字符串模拟)
P1079 Vigenère 密码 题目描述 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法――Vigenère 密 码.Vigenère 密码的加密解密算法简 ...
- Linux环境下RPM包相互依赖的解决办法
Linux环境下安装Oracle11gR2提示缺少"Package: elfutils-libelf-devel-0.125 FAILED"包,按照提示安装该包时又提示缺少依 ...
- 数据传递-------@RequestParam
package com.wh.handler; /** * @RequestParam是传递参数的. * @RequestParam用于将请求参数区数据映射到功能处理方法的参数上. * * publi ...
- ActiveMQ命令行工具
命令行工具 命令行工具 n activemq——运行activemq代理 n activemq-admin——管理代理的实例 在5.0之前activemq-admin被分成多个脚本,例如 ...
- EasyUI系列学习(八)-ProgressBar(进度条)
一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...
- 解决Unicode编码(璘)
随着互联网发展,B/S越来越受欢迎 Code编码格式也越来载多, 在大千花花世界 中文在Web显示看似一样但实际编码并不样,导致从页面获取的资料录入到数据库中时 存取的就是Code编码 如:Unico ...