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,可以看 ...
随机推荐
- android 手机上运行图像算法
在pc上调试好的图像处理算法想要在android手机上跑一下看看速度需要一下几个步骤 1.建立一个android application,通过ndk调用你写好的图像算法的c/c++ code 2. 然 ...
- 基于Spark和Tensorflow构建DCN模型进行CTR预测
实验介绍 数据采用Criteo Display Ads.这个数据一共11G,有13个integer features,26个categorical features. Spark 由于数据比较大,且只 ...
- 如何精通javascript
http://stackoverflow.com/questions/2628672/what-should-every-javascript-programmer-know Not jQuery. ...
- MySql 5.7 Archive 版本安装失败 解决过程
下载地址 https://dev.mysql.com/downloads/mysql/5.7.html#downloads 按照网络教程: 创建my.ini 文件,并填写配置内容: [mysql] # ...
- Android 网络请求及数据处理
Android 网络请求: 1.Volley http://blog.csdn.net/t12x3456/article/details/9221611 2.Android-Async-Http ...
- LVS的持久连接、会话保持和高可用介绍
持续连接 1)持久连接(lvs persistence)模板: 实现无论使用任何调度算法,在一段时间内(默认360s),能够实现将来自同一个地址的请求始终发往同一个RS ipvsadm -A|E -t ...
- 在Linux环境下使用OpenSSL对消息和文件进行加密（转载）
转自:http://netsecurity.51cto.com/art/201301/378513.htm 1.简介 OpenSSL是一款功能强大的加密工具包.我们当中许多人已经在使用OpenSSL, ...
- E20171102-E
segment n. 环节; 部分,段落; [计算机] (字符等的) 分段; [动物学] 节片; distinct adj. 明显的,清楚的; 卓越的,不寻常的; 有区别的; 确切的;
- hexo简易脚本
!/bin/bash 检查是否为master分支.目录是否正确 function git-branch-name { git symbolic-ref --short -q HEAD } functi ...
- redis 客户端工具 RedisDesktopManager
https://redisdesktop.com/download 可以查看到spring+redis 缓存的数据