React笔记：React基础（2）
1. JSX
JSX是一种拥有描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。
1.1 基本语法
JSX可以嵌套多个HTML标签，可以使用大部分符号HTML规范的属性。
TodoList.js：
import React, { Component } from 'react'
class TodoList extends Component {
render(){
return (
<ul>
<li>To Do</li>
<li>In Progress</li>
<li>Done</li>
</ul>
);
}
}
export default TodoList;
index.js：
import React from 'react';
import ReactDOM from 'react-dom'; import TodoList from './components/TodoList' ReactDOM.render(<TodoList />, document.getElementById('root'));
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
JSX中的HTML标签属性绝大多数与HTML规范一致，但是class和for这两个属性在JSX中需要写为className何htmlFor。
class和for是JavaScript中的保留字。
1.2 标签类型
在JSX语法中，使用的标签类型有两种：DOM类型标签和React组件类型标签。
使用DOM类型标签时，标签的首字母必须小写。
使用React类型标签时，组件名称的首字母必须大写。
React通过首字母的大小写判断渲染的是DOM类型标签，还是React组件类型标签。
// DOM类型标签
const element = <h1>Hello World</h1>;
// React组件类型标签
const element = <TodoList />;
// 嵌套使用
const element = {
<div>
<TodoList />
</div>
}
1.3 JavaScript表达式
在JSX中使用JavaScript表达式需要将表达式用大括号 {} 包括起来。
在JSX中使用表达式的两个场景：（1）通过表达式给标签属性赋值（2）通过表达式定义组件。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul>
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
1.4 条件判断
JavaScript表达式要求必须有返回值，因此无法直接使用if else语句，解决方法：
◊ 使用三元运算符
◊ 设置变量并在属性中引用
◊ 将逻辑转化到函数中
◊ 使用&&运算符
1.4.1 三元运算符
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
render() {
return (
<div className={ this.state.isComplete ? 'is-complete' : '' }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.2 使用变量
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
getIsComplete() {
return this.state.isComplete ? 'is-complete' : '';
}
render() {
let isComplete = this.getIsComplete();
return (
<div className={ isComplete }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.3 使用函数
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
getIsComplete() {
return this.state.isComplete ? 'is-complete' : '';
}
render() {
return (
<div className={ this.getIsComplete() }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.4 使用逻辑与（&&）运算符
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
render() {
return (
<div className={ this.state.isComplete && 'is-complete' }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.5 标签属性
（1）当JSX标签属性是DOM类型的标签时，JSX支持对于DOM标签的属性。
JSX中的内联样式通过style属性来定义，但属性值必须为对象，且对象中的属性名需要使用camelCase（驼峰命名法）。
例：font-size改为fontSize。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul style={{color: 'red', fontSize: '14px'}}>
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
（2）当JSX标签是React组件类型时，可以任意自定义标签的属性名。
HelloWorld.js
import React, { Component } from "react"
class HelloWorld extends Component {
render() {
return (
<div> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
index.js：
import React from 'react';
import ReactDOM from 'react-dom'; import HelloWorld from './components/HelloWorld' ReactDOM.render(<HelloWorld name='World' />, document.getElementById('root'));
1.6 注释
JSX中，在标签子节点内的注释写在{}中。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul style={{color: 'red', fontSize: '14px'}}>
{/* 注释 */}
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
JSX语法只是 React.createElement(component, props, ...children)的语法糖，所有的JSX语法最终都会被转换成该方法调用。
在项目智勇首选使用JSX语法。
React笔记：React基础（2）的更多相关文章
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- 【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意: 家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组 件修修改改拿来 ...
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- React笔记：组件（3）
1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- react笔记汇总
1.什么是React? a.React 是一个用于构建用户界面的 JAVASCRIPT 库. b.React主要用于构建UI,很多人认为 React 是 MVC 中的 V. c.React 起源于 F ...
- React笔记1
目录 1.react基础:类组件.函数式组件.ES5/ES6继承 2.生命周期钩子函数 3.什么是JSX 4.props和state有什么区别 5.路由配置 6.自定义封住组件 7.React 状态管 ...
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
随机推荐
- java~springboot~ibatis Invalid bound statement (not found)原因
事实起因 最近在ORM上使用了ibatis,感觉挺繁琐的,没有jpa来的直接,但项目非要用也没有办法,最近在进行开发过程中出现了一个问题Invalid bound statement (not fou ...
- js数组遍历（for in ,for of ,map,foreach,filter）的区别
一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...
- 一个用来爬小说的简单的Node.js爬虫
小说就准备点天下霸唱和南派三叔的系列,本人喜欢看,而且数据也好爬.貌似因为树大招风的原因,这两作者的的书被盗版的很多,乱改的也多.然后作者就直接在网上开放免费阅读了,还提供了官网,猜想作者应该是允许爬 ...
- SLAM+语音机器人DIY系列：（二）ROS入门——1.ROS是什么
摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...
- SLAM+语音机器人DIY系列：（八）高阶拓展——1.miiboo机器人安卓手机APP开发
android要与ROS通讯,一种是基于rosbridge,另一种是基于rosjava库. 相关参考例子工程 rosbridge例子: https://github.com/hibernate2011 ...
- HttpServletRequest内容处理工具类
目录 HttpServletRequestUtil类 (可转换成json数据,xml数据,map数据) HttpServletRequestUtil类 import javax.servlet.htt ...
- 编程心法 之什么是MVP What is MVP development?
Minimal Value product(feather), 比如说,如果是一个新的Photoshop,那么增加图片亮度就是一个MVP. 想要看到更多玮哥的学习笔记.考试复习资料.面试准备资料?想要 ...
- unity transform 常用操作
1.寻找物体 1.1 寻找满足条件的子物体 ` public static Transform FindObj(Transform transform, Func<Transform, bool ...
- 观察者模式与.Net Framework中的委托与事件
本文文字内容均选自<大话设计模式>一书. 解释:观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够 ...
- arcgis api 4.x for js之图层管理篇
上篇实现了基础地图加载以及二三维模式切换:本篇的内容则是图层管理控制,从两个不同角度来实现,分别是直接绑定arcgis api提供的图层管理widget(LayerList)以及自定义图层管理图标的点 ...