【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并不是 ...
随机推荐
- C# sizeof运算符
一.C# sizeof运算符 sizeof运算符用于获取值类型的字节数. 二.示例 using System;using System.Collections.Generic;using System ...
- Android驱动开发读书笔记六
第六章 Linux 驱动的工作和访问方式是 Linux 的亮点之一,Linux 系统将每一个驱动都映射成一个文件.这些文件称为设备文件或驱动文件,都保存在/dev目录中,由于大多数Linux驱动都有与 ...
- rsyn远程自动同步
rsync是远程自动同步工具,同时也能实现本地文件的复制,能够实现cp ,scp的功能,但是在远程同步上rsync要scp高效,因为scp能实现增量传输,每次都得全量传输,如果传输大文件时会很消耗网络 ...
- vue.js 独立引用css文件图片路径错误
vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...
- Fakeapp 入门教程(3):参数篇
参数可以让软件自由度更高.Fakeapp的参数并不算多,但是也非常使用.本文就讲解下几个重要的参数.参数设置界面可以通过点击SETTINGS打开. 参数修改无需点击保存,一旦修改直接生效. Proce ...
- hadoop核心组件概述及hadoop集群的搭建
什么是hadoop? Hadoop 是 Apache 旗下的一个用 java 语言实现开源软件框架,是一个开发和运行处理大规模数据的软件平台.允许使用简单的编程模型在大量计算机集群上对大型数据集进行分 ...
- f触发器、存储过程
drop trigger trig_insert--删除触发器
- Java语言基础---逻辑运算(长路短路运算)
长路短路运算的区别 长路与运算&:是指在两边都是整数时,是逐位与运算,在两边是关系运算时,是逻辑运算. 短路与运算&&:是指从左至右,遇到false,则停止后面的运算. 长路或 ...
- HDU 4919 Exclusive or 数学
题意: 定义 \[f(n)=\sum\limits_{i=1}^{n-1}(i\oplus (n-i))\] 求\(f(n),n \leq 10^{500}\) 分析: 这个数列对应OEIS的A006 ...
- Python Flask构建可拓展的RESTful API
1-1 Flask VS Django 1-2 课程更新维护说明: 1-3 环境.开发环境与Flask: 1.3.1 关注版本更新说明: 1-4 初始化项目: