<!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. HTML 5.1 -- 14项新增功能及如何使用

    最近太忙了 过完年来 连续的加班让我筋疲力尽,今天终于把东西交了,抽空来点干货吧! 1. 响应式图像 W3C 引入了一些功能特性,无需使用 CSS 就可以实现响应式图像.它们是 … srcset 图像 ...

  2. [Swift]圆周率π

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. CentOS 7.4 下搭建 Elasticsearch 6.3 搜索群集

    上个月 13 号,Elasticsearch 6.3 如约而至,该版本和以往版本相比,新增了很多新功能,其中最令人瞩目的莫过于集成了 X-Pack 模块.而在最新的 X-Pack 中 Elastics ...

  4. 了解Selenium与自动化测试第一天“云里雾里”

    以前没有搭建过Selenium自动化功能测试环境,想象中就像QTP一样,集成IDE一般简单快捷. 昨天通过博客园的一篇博友日志,才开始大概认识到Selenium的工作方式与特征: 1.插件般与浏览器结 ...

  5. Js上传图片并生成缩略图

    Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...

  6. UVM基础之---Command-line Processor

    提供一个厂商独立的通用接口命令行参数,支持分类:   1. 基本参数和值:get_args,get_args_matches   2. 工具信息:get_tool_name(),get_tool_ve ...

  7. Navicat Premium 12 破解方法

    基本安装下一步下一步,破解方法参考:地址

  8. nw.js开发第一个程序（html开发桌面程序exe）

    一.环境配置 windows系统 cnpm install node 下载nw.js https://github.com/nwjs/nw.js 找到download下载合适的版本 二.开发 项目目录 ...

  9. dutacm.club_1085_Water Problem_(矩阵快速幂)

    1085: Water Problem Time Limit:3000/1000 MS (Java/Others)   Memory Limit:163840/131072 KB (Java/Othe ...

  10. MySql（四）Select条件查询

    select条件查询的格式如下: SELECT 查询列表FROM 表名WHERE 筛选条件:123456根据筛选条件可以分为以下几类: 按照条件按表达式进行筛选 常用条件运算符如下:> .< ...