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

随机推荐

vue项目实现记住密码功能
一.谷歌浏览的残留问题现在很多的网站都有一个需求是记住密码这个功能,为的是避免用户下次登录的时候繁琐的输入过程. 像是一些主流的浏览器(比如Chrome)都有了这个功能,而且如果你登录了Chrom ...
2018~第三届南宁市网络安全技术大赛~nnctf~write-up
Web 1.超简单分值:100 类型:WEB 已解决题目:超简单的web题 http://gxnnctf.gxsosec.cn:12311/ 代码审计 <?php $white_list ...
GoLang structTag说明
在处理json格式字符串的时候,经常会看到声明struct结构的时候,属性的右侧还有小米点括起来的内容.形如 type User struct { UserId int `json:"use ...
PHP类和函数注释大全
每次要用PHP的某个功能的时候,都要去查一下,于是决定将PHP所有类和函数都整理出来,加上注释大致实现将php.jar文件解压,取出目录stubs 将stubs中的所有php文件中的注释去掉,并做 ...
tomcat部署项目后，war包是否可刪?war包存在必要性!
在tomcat中webapps目錄上傳war包后, 对war解压时候. war不能在tomcat运行时删除,否则会删除自动解压的工程. 你可以停止tomcat后删除war. 当你重新部署的时候,如果 ...
[PHP] MIME邮件协议的multipart类型
邮件协议中的三种情况,对应下面的三种类型 multipart/mixed可以包含附件.multipart/related可以包含内嵌资源.multipart/alternative 纯文本与超文本共存 ...
spring boot整合mybatis方式二
方式二: pom文件导入maven依赖: <dependency> <groupId>org.springframework.boot</groupId> < ...
Java自增和自减操作符——++/--的那些事
1. 概述自增操作符(++)和自减操作符(--)是对变量进行加1和减1的操作. 2.分类说明 ++和--是对变量进行自增1和自减1的简写操作符.许多编程任务中经常需要对变量加1或者减1,所以采用这两 ...
OpenCV尝试
我们来尝试,使用OpenCV来读入本地的一张图片,并使用库函数将其水平翻转.垂直翻转以及边缘提取,后将结果文件存入本地. 工具:VS2017 OpenCV4.0.1 怎么配置opencv/报错怎么办 ...
hbase 过滤器 rowfilter
HBase为筛选数据提供了一组过滤器,通过这个过滤器可以在HBase中的数据的多个维度(行,列,数据版本)上进行对数据的筛选操作,也就是说过滤器最终能够筛选的数据能够细化到具体的一个存储单元格上(由行 ...

React笔记：React基础（2）