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非常相似. ...

随机推荐

Fescar(Seata)-Springcloud流程分析-2阶段
上文我们分析了fescar的一阶段执行过程.在一阶段中,服务起始方发起全局事务并注册到TC.在调用协同服务时,协同服务的事务分支事务会先完成阶段一的事务提交或回滚,并生成事务回滚的undo_log日志 ...
Flink从入门到放弃(入门篇3)-DataSetAPI
戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...
简述java接口和C++虚类的相同和不同之处
C++虚类相当于java中的抽象类,与接口的不同处是: 1.一个子类只能继承一个抽象类(虚类),但能实现多个接口 2.一个抽象类可以有构造方法,接口没有构造方法 3.一个抽象类中的方法不一定是抽象方法 ...
微信公众号开发C#系列-1、微信公众平台注册
微信公众号简介微信公众号分为服务号.订阅号.企业号,订阅号可以个人申请,服务号和企业号要有企业资质才可以. 我们所说的微信公众号开发主要指的是公众号的账号类型,公众号的账号类型分为订阅号.服务号.企 ...
TensorFlow tutorial
代码示例来自https://github.com/aymericdamien/TensorFlow-Examples tensorflow先定义运算图,在run的时候才会进行真正的运算. run之前需 ...
GoLang simple-project-demo-03
变量的定义 package main import "fmt" func main() { var a = "initial" fmt.Println(a) v ...
C# 提前异步加载数据
前言在我们应用程序中,如果有较大的数据需要从数据库或者本地读取,且是一次性的话,可以提前获取数据并缓存在内存中. 一般处理方法:利用应用程序启动到用户使用功能这一段时间,提前加载数据. 问题来了,因 ...
[TCP/IP] 网络层-抓包分析IP数据包首部
ip数据包的结构:首部+数据部分 1.版本(v4或者v6)+首部长度(固定的20字节,所以就没有)+区分服务优先级(我的例子是 assured forwarding 31 0x1a 26,保证转发) ...
从零讲解搭建一个NIO消息服务端
本文首发于本博客,如需转载,请申明出处. 假设假设你已经了解并实现过了一些OIO消息服务端,并对异步消息服务端更有兴趣,那么本文或许能带你更好的入门,并了解JDK部分源码的关系流程,正如题目所说,笔 ...
Java学习点滴——初识Java
基于<Java编程思想>第四版前言 "程序就是算法加数据结构",而算法就是控制语句加操作符,编写一个程序就是使用控制语句加操作符去操作数据结构,因此我从Java的控制 ...

React笔记：React基础（2）