<!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入门----基础语法的更多相关文章

  1. Scala快速入门 - 基础语法篇

    本篇文章首发于头条号Scala快速入门 - 基础语法篇,欢迎关注我的头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech)获取更多干货,也欢迎关注我的 ...

  2. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  3. Flux --> Redux --> Redux React 入门 基础实例使用

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  4. React入门基础（学习笔记）

    这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...

  5. React入门基础

    1-react概念: React是一个用于构建用户界面的JavaScript库.React主要用于构建UI,很多人认为React是MVC中的V(视图).React起源于Facebook的内部项目.Re ...

  6. React入门----基础篇

    React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...

  7. python入门-基础语法

    一.变量 定义字符串要加单引号‘’ 变量命名规范: 变量名只能是字母.数字或下划线的任意组合 变量名的第一个字符不能是数字 变量名不能用关键字 变量名不要用中文 变量名不要太长,区分大小写 面就用单引 ...

  8. java入门---基础语法&基础常识&编码规范&命名规范

        一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对 ...

  9. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

随机推荐

  1. System.out.println()的含义

    system是java.lang包中定义的一个内置类,在该类中定义了一个静态对象out out是PrintStream类的实例对象 println是PrintStream类中的方法

  2. Unity资源的查找

    Object.Destroy static function Destroy(obj: Object, t: float = 0.0F): void;   Description Removes a ...

  3. 洛谷P3400 仓鼠窝(单调栈)

    P3400 仓鼠窝 题目描述 萌萌哒的Created equal是一只小仓鼠,小仓鼠自然有仓鼠窝啦. 仓鼠窝是一个由n*m个格子组成的行数为n.列数为m的矩阵.小仓鼠现在想要知道,这个矩阵中有多少个子 ...

  4. 开车旅行 2012年NOIP全国联赛提高组(倍增+set)

    开车旅行 2012年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description 小A 和小B决定利用 ...

  5. Uva 10766 Organising the Organisation (Matrix_tree 生成树计数)

    题目描述: 一个由n个部门组成的公司现在需要分层,但是由于员工间的一些小小矛盾,使得他们并不愿意做上下级,问在满足他们要求以后有多少种分层的方案数? 解题思路: 生成树计数模板题,建立Kirchhof ...

  6. BFS POJ 3414 Pots

    题目传送门 /* BFS:六种情况讨论一下,BFS轻松解决 起初我看有人用DFS,我写了一遍,TLE..还是用BFS,结果特判时出错,逗了好长时间 看别人的代码简直是受罪,还好自己终于发现自己代码的小 ...

  7. C. Coin Troubles 有依赖的背包 + 完全背包变形

    http://codeforces.com/problemset/problem/283/C 一开始的时候,看着样例不懂,为什么5 * a1 + a3不行呢?也是17啊 原来是,题目要求硬币数目a3 ...

  8. kafka的server.properties配置文件参考示范（图文详解）（多种方式）

    简单点的,就是 kafka_2.11-0.8.2.2.tgz的3节点集群的下载.安装和配置(图文详解) 但是呢,大家在实际工作中,会一定要去牵扯到调参数和调优问题的.以下,是我给大家分享的kafka的 ...

  9. hbase优化小结

    目录: 1,背景 2,GC 3,hbase cache 4,compaction 5,其他 1,背景 项目组中,hbase主要用来备份mysql数据库中的表.主要通过接入mysql binlog,经s ...

  10. 对socket的理解

    要想理解socket,就得先熟悉TCP/IP协议族,TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协议,定义了主机如 ...