1. HTML模板

　　Jsx是react的语法糖，最终会被编译成js语法。因此需要第三方库browser将jsx转换成js。

　　由于react 0.14版本之后，将react和react-dom拆分，所以需要分别引入react和react-dom

　　这是官网的一个demo

 <!DOCTYPE html>
 <html>
   <head>
     <script src="../build/react.js"></script>
     <script src="../build/react-dom.js"></script>
     <script src="../build/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
     <script type="text/babel">
       ReactDOM.render(
         <h1 color>Hello, world!</h1>,
         document.getElementById('example')
       );
     </script>
   </body>
 </html>

　　但是编译之后是这样的：

React.render( React.createElement("h1", {color: "red"}, "Hello, world!"), document.getElementById('example') );

　　render()方法里面的html代码被转换成了React.createElement.因此阔以使用React.createElement来创建模板，但不推荐。

　　React.createEleemt(type,[props],[...children]):

　　　　type:the type argument can be either a tag name string(such as "div"),or a React Compoment()

　　jsx语法规则：render方法第一个参数，首写字母如果是小写的就是HTML代码，如果是大写字母就是React组件；

　　　　　　　　jsx会主动去检查标签是否闭合，如果没有闭合，直接报错。

2.ReactDOM.render()+js

　　只需要用大括号括起来就可以使用js语法。

 var names = ['Alice', 'Emily', 'Kate'];

       ReactDOM.render(
         <div>
         {
           names.map(function (name) {
             return <div>Hello, {name}!</div>
           })
         }
         </div>,
         document.getElementById('example')
       );

　　编译之后变成：

 var names = ['Alice', 'Emily', 'Kate'];
 React.render(
   React.createElement("div", null, names.map(function (name) {
     return React.createElement("div", null, "Hello, ", name, "!")
   }) ),
  document.getElementById('example')
 );

还是三个参数，第二个arg为null，第三个参数就是js代码。所以js代码只能放一行表达式，不能有;出现。

比如这样写就是错误的：

 React.render(
 <div>
 {
 var a = 1;
 names.map(function (name) {
 return <div>Hello, {name}!</div>
 })
 }
 </div>,
 document.getElementById('example')
 );

3.render 数组

　　arr是个数组，jsx会把arr的所有成员都添加到模板中。只需要用{}把arr括起来，表示js代码即可。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

编译后结果：

 React.render(
          React.createElement("div", null, [<h1>Hello world!</h1>,<h2>React is awesome</h2>,]),
         document.getElementById('example')
        );

react学习笔记-01的更多相关文章

  1. react学习笔记01

    被项目拖了半年的我终于有时间学习react 了 下面是我最近学习的笔记 支持jsx语法 ReactDOM.render( <div> <h1>hello, word</h ...

  2. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  3. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  4. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  5. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  6. React学习笔记（七）条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  7. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  8. React学习笔记（五）State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  9. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

随机推荐

  1. Android 手机进入不了fastboot模式的解决方案

    本方案仅针对linux terminal下刷手机img文件的情况: fastboot的通常流程如下:   adb reboot bootloader  //进入bootloader 模式  fastb ...

  2. 通过VNC Viewer使用VMware虚拟机的远程桌面连接

    本文转自:http://www.14blog.com/archives/185 要在VMware虚拟机中使用远程桌面连接?方法有两个:一种是在虚拟机中做“端口映射”,当然,这个稍显复杂(虚拟机端口映射 ...

  3. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  4. java foreach实现原理

    在平时Java程序中,应用比较多的就是对Collection集合类的foreach遍历,foreach之所以能工作,是因为这些集合类都实现了Iterable接口,该接口中定义了Iterator迭代器的 ...

  5. C语言之switch

    一 switch的语法 switch(表达式){ case 常量表达式1: 代码块1 break; case 常量表达式2: 代码块2 break; case 常量表达式3: 代码块3 break; ...

  6. oracle数据库连接串格式

    oracle常用链接串格式:jdbc:oracle:thin:@//<host>:<port>/<service_name> jdbc:oracle:thin:@& ...

  7. 【6】锋利的 jQuery 笔记

    1. 代码技巧 1. 利用 id, class 实现同级隐藏显示 效果如下: 2. 字体放大效果 效果图: 3. tab 切换 效果图: 4. 切换样式 添加 Cookie 效果图: 5. 编写插件 ...

  8. Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用

    Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用 hydra可以破解: http://www.thc.org/thc-hydra,可支持AFP, Cisco AAA, Cisco a ...

  9. Redis的安装和使用之------Redis相关运用

    原文  http://wangzhijian.blog.51cto.com/6427016/1731962 一.简介 REmote DIctionary Server(Redis) 是一个由 Salv ...

  10. configure HDFS(hadoop 分布式文件系统) high available

    注:来自尚学堂小陈老师上课笔记 1.安装启动zookeeper a)上传解压zookeeper包 b)cp zoo_sample.cfg zoo.cfg修改zoo.cfg文件 c)dataDir=/o ...