react入门----基础语法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- react核心库 -->
 7     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
 8     <!-- 提供与dom相关的功能 -->
 9     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
10     <!-- 将es6代码转换为es5语法格式 -->
11     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
12     <style>
13         .trest{
14             color: red;
15         }
16     </style>
17 </head>
18 <body>
19     <div id="container"></div>
20     <script type="text/jsx">
21         var Hello = React.createClass({
22             render: function () {
23             <!-- 这里的this表示当前react组件的实例-->
24             <!-- props则是我们自在使用这个组件是,组件上属性的集合 -->
25             <!-- props的key值与return上的key值一一对应,值页一一对应 -->
26             <!-- class样式的三种方式,类名,内联,还有声明 -->
27             <!-- 1、使用类名时,这里的html标签内不能使用class而要使用className,因为在es6中class是一个保留字 -->
28                 <!-- return <div className="trest">Hello {this.props.name} {this.props.title}</div>; -->
29             <!-- 2.内联样式 使用双花括号的形式,并且使用驼峰命名的实行写属性名-->
30                 <!-- return <div style={{color:‘red‘,fontSize:"55px"}}>Hello {this.props.name} {this.props.title}</div>; -->
31
32             <!-- 3.使用声明变量的形式-->
33                 var styleObj={
34                     color:‘red‘,
35                     fontSize:‘55px‘ <!--采用驼峰命名的形式-->
36                 }
37                 return <div style={styleObj}>Hello {this.props.name} {this.props.title}</div>;
38             }
39         });
40         ReactDOM.render(<Hello name="dongdong" title="Mr"/>, document.getElementById(‘container‘));
41     </script>
42 </body>
43 </html>
时间: 2024-12-09 01:33:38

react入门----基础语法的相关文章

C#入门基础语法知识点总结(.NET开发环境及代码编写规范)

C#基础语法 一..net开发环境的搭建和使用 1.菜单栏 [文件]-->新建项目-->找到我们需要的项目类型 在新建窗口中,我们新建的项目要求可以在这里选择: (1)版本的选择:建议选择4或者4.6 (2)选择开发语言:一般都是C# (3)项目类型:初学阶段一般都用"控制台"程序.仅仅是学习资源. (4)项目的名称.要有意义. (5)位置:项目所有文件的保存位置.建议不要使用中文目录. (6)解决方案名称:默认和项目名称一致. [视图]-->可以显示各种窗口. [调

C#入门—基础语法

二.C#基础语法 2.1.C#程序结构 1)程序结构 namespace { class { static void Main(string[ ] args) { } } } 2)工程结构 .Sln:解决方案文件 .csproj:项目文件 .cs:类文件 2.2.命名空间及标识符.关键字 1)命名空间 保证唯一标识代码及内容,以“ . ”分层 指定命名空间别名:using 别名 = 命名空间 2)标识符 以字母或下划线开头.由字母数字下划线组成的 3)关键字 2.3.编程规范 个人建议使用大小驼

Flux --&gt; Redux --&gt; Redux React 入门 基础实例使用

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文 (不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点) (官方的例子正

React入门----基础篇

React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 特点 1 使用 JSX语法 创建组件,实现组件化开发,为函数式的 UI 编程方式打开了大门 2 性能高的让人称赞:通过 diff算法 和 虚拟DOM 实现视图的高效更新 3 HTML仅仅是个开始 为什么要用React 1 使用组件化开发方式,

Python编程入门基础语法详解经典

一.基本概念 1.内置的变量类型: Python是有变量类型的,而且会强制检查变量类型.内置的变量类型有如下几种: #浮点 float_number = 2.3 #复数 complex_number = 1 + 5j #整型 integer_number = 1 #list 序列 sample_list = [2,52,36,'abc'] #嵌套 sample_nest = [(2,4,6),{5:7,9:11,'key':[2,5]},6] #dictionary 字典 sample_dic

Groovy入门 | 基础语法

Java的东西Groovy都能用,包括语法和类库 public static void main(String[] args) { // 重要的事情说3遍 for (int i = 0; i < 3; i++) { System.out.println("Java的东西Groovy都能用"); } // 再3遍 for (i in 0..2) { println 'Java的东西Groovy都能用' } // 又3遍 3.times { println 'Java的东西Groov

C#入门基础语法总结(数组和集合)

一.数组 1.一维数组的创建: 数组元素数据类型[] 数组名字;  如 int[]arr; String[] arr; 2.一维数组的初始化 ①  int[] arr=new int[3]; int[0]=1;int[1]=2;int[2]=3; ② int[] arr=new int[]{1,2,3}; ③int[]arr={1,2,3}; 3.二维数组的创建: ① 数据类型[, ]数组名  int[, ]a=new int[2,4];2行4列的数组.适合规则数组 ②数据类型[][] 数组名

python入门基础语法总结

定义变量,使用变量 input 用户自己输入值 print 打印值 可以输出多个变量 %d|%s 用于输出变量时占位 字符串(后期爬虫必备) int()把字符串转换为数字 str()把数字转换为字符串 len()获取某个字符占用的字节数 字符串可以用+连接 字符下标可以为负数 str[起始位置:终止位置:步长]切片,从起始开始截取字符串,到终止位置结束,不包括终止位置 str[::-1]倒序 str.find()|rfind 字符串查找 str.index()|rindex()字符串查找,与fi

React入门-高清视频

一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/re