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,可以看 ...
随机推荐
- 用户能够在下次登录系统时被重新配置---或win10早期更新不成功的bug就需要删除多余的登陆用户
有时候我们希望删除本地计算机上的一位用户,或者期待一位用户能够在下次登录系统时被重新配置.但是仅删除%userprofile%目录是不够的,因为一个登录名会对应一个SSID,这个SSID还保留在注册表 ...
- centos6之前版本的启动流程
centos6 之前的系统启动: linux启动流程: 1)加电自检 2)读取MBR,引导加载程序grub,完成grub的三个阶段. 3)加载系统内核kernel,执行系统初始化信息. 4)启动用户空 ...
- Linux 上安装 Node.js
Linux 上安装 Node.js 直接使用已编译好的包(在个人阿里云服务器47.100.6.106上安装) Node 官网已经把 linux 下载版本更改为已编译好的版本了,我们可以直接下载解压后使 ...
- render same axis
// 当前渲染相机的参数 QGlobalCamera* curRenderCamera = _getWorld()->getMainCam(); const Matrix4& ...
- bzoj 1677: [Usaco2005 Jan]Sumsets 求和【dp】
设f[i]为i的方案数,f[1]=1,考虑转移,如果是奇数,那么就是f[i]=f[i-1]因为这1一定要加:否则f[i]=f[i-1]+f[i>>1],就是上一位+1或者i/2位所有因子乘 ...
- bzoj 1599: [Usaco2008 Oct]笨重的石子【枚举】
--我为什么要写这种题解-- 枚举投掷情况即可 #include<iostream> #include<cstdio> using namespace std; int s1, ...
- 怎样去思考问题 解决问题 zkc学长的福利
题目描述 又是一年ACM集训的时刻,zkc学长邀请n位同学来玩一个有奖游戏.首先,他让每个同学在左.右手上面分别写下一个整数,zkc学长自己也在左.右手上各写一个整数.然后,让这n位同学排成一排,zk ...
- 【计蒜客习题】 取石子游戏(gcd)
问题描述 蒜头君和花椰妹在玩一个游戏,他们在地上将 n 颗石子排成一排,编号为 1 到 n.开始时,蒜头君随机取出了 2 颗石子扔掉,假设蒜头君取出的 2 颗石子的编号为 a, b.游戏规则如下,蒜头 ...
- 1.2打印ASCII码
描述 输入一个除空格以外的可见字符(保证在函数scanf中可使用格式说明符%c读入),输出其ASCII码. 输入一个除空格以外的可见字符.输出一个十进制整数,即该字符的ASCII码.样例输入 A 样例 ...
- 9i 和 11 g 区别
9i 和 11 g 区别 9i 不支持 2/4/8G,只支持 2000/4000/8000 M的