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.7.5 Efficient Construction of LALR Parsing Tables
4.7.5 Efficient Construction of LALR Parsing Tables There are several modifications we can make to A ...
- POJ1743 Musical Theme 最长重复子串 利用后缀数组
POJ1743 题目意思是求不重叠的最长相同变化的子串,输出该长度 比如1 2 3 4 5 6 7 8 9 10,最长长度为5,因为子串1 2 3 4 5 和 6 7 8 9 10变化都一样的 思路: ...
- 深入理解JMM（Java内存模型） --（五）锁
锁的释放-获取建立的happens before 关系 锁是Java并发编程中最重要的同步机制.锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息. 下面是锁释放-获取的示例代 ...
- java笔记线程方式1睡眠
public class ThreadSleepDemo { public static void main(String[] args) { ThreadSleep ts1 = new Thread ...
- java io流读取 和commons.io的使用
前提:记事本里面一共有605个字 1.使用BufferedReader和FileReader来读取txt里面的内容,用时相对短.读完记得关闭流br.close() 2.指定UTF-8输出格式,使用Fi ...
- [Swift通天遁地]一、超级工具-(15)使用SCLAlertView制作强大的Alert警告窗口和Input编辑窗口
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- c++病毒函数
FreeConsole(); 屏蔽输出. BlockInput(); 阻止键盘和鼠标的工作. 所需头文件: #include <windows.h> #include <Winabl ...
- pom.xml详情
这里借鉴一下csdn中的一个系列的博客: 第一篇:POM文件详解 第二篇:maven中的依赖作用范围 第三篇:maven中的可选依赖和依赖排除 第四篇:maven中的dependencies和depe ...
- Framework7首页隐藏navbar
f7首页隐藏navbar其他页面显示navbar 帮别人解决问题,自己也记录一下, 首页.navbar加.navbar-hidden, 首页.page加.no-navbar, 如果首页有.navbar ...
- JavaScript（十二）事件
Dom事件 1.DOM0级事件 on事件 只能 监听冒泡阶段 切只能绑定一个事件 dom.onclick = function(){}; 2.Dom2级事件 可以绑定多次事件 可以通过设置fla ...