【02】react 之 jsx
React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲染方式:浏览器渲染(react-dom.js)和服务器渲染(react-dom-server.js)。
所以程序使用react,首先先引入:
var React = require('react');
var ReactDOM = require('react-dom');
ES6(ES2015)
import React from 'react';
import ReactDOM from 'react-dom';
React 的最基本方法,用于将element(HTML片段),插入指定的 DOM 节点。
ReactDOM.render(element,targetDOM);
1.1. JSX是什么
什么是JSX,JS中HTML标签部分就是一个JSX。 <h1>hello react</h1>.
JSX 是 Facebook 团队提出的一个语法方案,可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法,这种语法方案需要通过 JSXTransformer(已经废弃,目前使用babel) 来进行编译转换成真实可用的 JavaScript 代码。
React 是基于组件的开发思想,React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件中可以有自己的样式(Inline Style)和结构(JSX编写的HTML)。
1.2. JSX由来
在 React 和 JSX 之前,一个组件如果要包含 HTML 结构将面临如下几个问题:JSX 很好的解决了这些问题
1. 组件的 HTML 直接写在页面中,那么组件的结构(html模板)和行为(js功能)是分离的;
2. 组件的 HTML 直接用字符串的形势插入到 JavaScript 代码中,那么就会出现一大段的字符串拼接,开发人员需要很小心的确保字符串拼接时没有因为少了一个符号而导致整个代码无法运行;
3. 使用 MVC 分层的思想,引入模板引擎,那么该如何引入模板文件的片段呢;
1.3. JSX是可选的
JSX看似高大上,但是JSX本身是无法直接运行在JavaScript引擎中,因为JavaScript压根中就没有JSX技术。所以想要JSX运行,就编译成JavaScript能够执行的代码。
JSX语法编写:
var React = reqiure('react');
var ReactDOM = reqiure('react-dom);
var el = <a href="www.baidu.com">点我</a>
ReactDOM.render(el,document.getElementById('app'));
JavaScript编写:
var React = require('react');
var ReactDOM = require('react-dom');
//React.createElement 来构造组件的 DOM 树。第一个参数是标签名,第二个参数是属性对象,第三个参数是子元素。
var el = React.createElement('a',{href:'www.baidu.com'},'点我','a');
ReactDOM.render(el,document.getElementById('app'));
以上两种写法,完全等价,因为webpack会使用babel把JSX编译成JavaScript代码。
使用babel index.js 可以查看最终运行的代码。
1.4. JSX与HTML差异
JSX 与 HTML 的差异
1、渲染HTML标签,声明变量采用 首字母小写
div / input / button
2、渲染React组件,声明变量采用 首字母大写
MyButton MyDataList
React 的 JSX 使用大写和小写字母来区分本地的组件类和 HTML 标签.
3、 class 和 for 这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用 className 和 htmlFor 。
1.5. JSX表达式
JSX语法中写Javascript表达式只需要用 {} 即可,可以使用{}表达式动态的插入值。
SX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX
普通取值
var url = "www.baidu.com";
var el = <a href="{url}">点我</a>
三目运算 (不能使用if)
<div className="2>1?'class2':'class1'"></div>
创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加 data- 前缀。
<div data-custom-attribute='foo'>自定义属性使用data开头</div>
属性延伸
var props = {"name":"username","type":"text"};
var input = <input {...props} value="value值"/>// 等效于<input name=’username’ type=’text’ value=’
value值
’>
样式属性:JSX把style当成对象来处理,所以style不能直接写成style=’color:red,background-color:yellow’
var styles = {color:'red',backgroundColor:'yellow'};
var div = <div style={styles}>一个div</div>
var div = <div style={{color:'red',backgroundColor:'yellow'}}>一个div</div>//注意是两个{{}},外括号为表达式,内花括号为json对象。
1.6. JSX注意点
1、使用JSX的JS文件,一般命名为JSX或者JS。
2、JSX元素必须要用一个tag 包裹起来
var view = <div>第一个</div><div>第二个</div>; //错误的,必须被一个包裹。 var view=<div><div>第一个</div><div>第二个</div></div>//正确。
3、JSX方式创建出来对象,并不是一个HTML中DOM,而是一个虚拟DOM。
React.createElement() 与 document.createElement(); 创建出来的对象,是两种截然不同的对象。
4、React的普通标签的事件名,采用on+事件名,click及为onClick, change为onChange。
【02】react 之 jsx的更多相关文章
- React Native JSX value should be expression or a quoted JSX text.
问题描述: 我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...
- React入门---JSX内置表达式-6
个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...
- react基础&JSX基础
一.HTML 标签 vs. React 组件 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes). 1.要渲染 HTML 标签,只需在 JSX 里使用小 ...
- react with JSX for {if…else…}
在react中用jsx渲染dom的时候经常会遇到if条件判断,然而在jsx中竟是不允许if条件判断的.以下有几种判断方式,可以根据自己的应用场景,挑选适合的 https://blog.csdn.net ...
- 前端笔记之React(一)初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
- React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
- 玩转 React【第02期】:恋上 React 模板 JSX
往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰.今天我们来看一种优雅的编写React的代码的 ...
- React之JSX
0.对于学习React,我们先来熟悉下JSX的语法, 下面的这些语法仅用于构建一个组件的标签模块,定义完成之后如果需要做演示,请附加以下代码: ReactDOM.render( element1, d ...
- React之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...
随机推荐
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- Python基础-Python注释
一.什么是注释.特性 1.一段文字性的描述,通过注释,可以解释和明确Python代码的功能,并记录将来要修改的地方. 2.当程序处理时,Python解释器会自动忽略,不会被当做代码进行处理 二.注释的 ...
- windows下简单使用pip
1. 在python官网上下载python时会自带pip,并且在安装Python时若未取消会默认一并安装 2. 找出pip.exe所在位置, 3. 右击此电脑,点击属性 4. 高级系统设置 5. 点击 ...
- 【java】A local class access to local variables
内部类参考 A local class has access to local variables. However, a local class can only access local vari ...
- Storm: 性能优化 (转载)
Storm 性能优化 原文地址:http://www.jianshu.com/p/f645eb7944b0 目录 场景假设 调优步骤和方法 Storm 的部分特性 Storm 并行度 Storm 消 ...
- “帮你APP”团队冲刺8
1.整个项目预期的任务量 (任务量 = 所有工作的预期时间)和 目前已经花的时间 (所有记录的 ‘已经花费的时间’),还剩余的时间(所有工作的 ‘剩余时间’) : 所有工作的预期时间:88h 目前已经 ...
- oracle 迭代查询
Oracle 迭代查询, 以后台菜单作为示例 这是要准备的sql create table tbl_menu( id number primary key, parent_id , name ) no ...
- 免费生成https证书以及配置
http升级到https需要在nginx的配置中加入证书信息,查询资料后确定生成证书两种方案 第一种:自签名证书,然后开启 CloudFlare 的 CDN 服务 //确定是否安装openss ...
- VMware workstation 9.0中安装Windows server 2012 和 Hyper-v
一.准备工作 首先下载和安装和安装VMware workstation 9.0 下载Windows server 2012 iso镜像文件 二.安装Windows server 2012虚拟机 1.新 ...
- java并发之(4):Semaphore信号量、CounDownLatch计数锁存器和CyclicBarrier循环栅栏
简介 java.util.concurrent包是Java 5的一个重大改进,java.util.concurrent包提供了多种线程间同步和通信的机制,比如Executors, Queues, Ti ...