React 基本概述和JSX语法

一、React 概述

1、React简介

• React 是一个用于构建用户界面的JavaScript 库
• React 主要用来写HTML页面，或构建web应用。
• React 基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写。
• React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装。

2、React 特点：

声明式：使用 React 编写UI界面和写HTML几乎一样
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互
灵活：React可以与已知的库或框架很好地配合

3、项目搭建

# 创建 react 项目，项目名是 myapp
npx create-react-app myapp
# 进入my-app 目录
cd myapp
# 启动项目
npm start

注意事项：

项目名称中不能有大写字母

npx 是 npm v5.2.0 之后提供的命令，使用npx后不需要先全局安装脚手架

要在项目根目录下启动项目

创建之后项目效果如下：

4、基本使用

导入 react 和 react-dom 两个包
使用 JSX 语法创建 react 元素
调用 ReactDOM.render() 方法将元素渲染到页面中

index.js 文件

// 1. 导入 react 和 react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创建 react 元素
const jsx = <h1>Hello World</h1>

// 3. 调用 ReactDOM.render() 方法将元素渲染到页面中
// 参数1: react元素
// 参数2: html 页面中的 DOM 元素
ReactDOM.render(jsx, document.querySelector('#app'))

二、JSX

1、JSX简介

JSX 是 JavaScript XML 的简写，就是在 JavaScript 中写 XML 格式的代码（我们只需要写 HTML）

优势： 和 HTML 一样，简单直观

注意点： 使用小括号包裹 JSX，避免 JS 格式化时自动插入分号陷阱。

const jsx = (
  <div>
    <h1>用户信息</h1>
    <ul>
      <li>用户名: admin</li>     
      <li>密码: 1234</li>     
    </ul>
  </div>
)

2、JSX中的表达式

在 JSX 中，可以在 { } 中嵌入表达式

• 变量 （除了对象都可以）
• 算数表达式
• 函数表达式
• jsx自身也能作为表达式
  不能出现在 { } 中的东西
• 变量中保存了一个对象 （只有 style 中可以使用对象）
• if/for 等流程控制不能出现在 {} 中

import React from 'react'
import ReactDOM from 'react-dom'
const name = 'jack';
const age = 19;
const title = (
  <h1>
    hello JSX,{name},年龄：{age}
  </h1>
)

const jsx = <h1>Hello World</h1>
ReactDOM.render(title, document.getElementById('root'))

2.1条件渲染

核心思想：使用函数将渲染的业务逻辑封装，在 jsx 中直接调用函数

import React from 'react'
import ReactDOM from 'react-dom'

const isLoading = true
const loadData = ()=>{
  if(isLoading){
    return <div>loading...</div>
  }
  return <div>数据加载完成，此处显示加载后的数据</div>
}

const title = (
  <h1>
    条件渲染:
    {loadData()}
  </h1>
)

ReactDOM.render(title, document.getElementById('root'))

2.2 列表渲染

核心思想：

• 使用数组的 map() 方法循环将每个单元的数据改造成 jsx ，并保存在一个新的数组中
• 在 {} 中的数组是可以直接被循环渲染的
• 注意： 要使用 key 绑定每一次循环，key 值要唯一，(尽量避免使用索引号作为key)

import React from 'react'
import ReactDOM from 'react-dom'

const songs = [
  {id:1,name:'痴心绝对'},
  {id:2,name:'想我这样的人'},
  {id:3,name:'南山南'}
]
const list = (
  <ul>
    {songs.map(item=><li key={item.id}>{item.name}</li>)}
  </ul>
)

ReactDOM.render(list, document.getElementById('root'))

2.3 JSX样式处理

两种方式：

1、style 方式(行内方式)： 对象形式设置样式 （不推荐）

const list = (
  <h1 style={{color:'red',fontSize: '22px'}}>
    你好外星人
  </h1>
)

2、className方式(类名方式)

• className 就是标签中的 class属性，在 jsx 中必须使用 className
• css样式写在一个独立的文件内
• 使用 import 导入css文件

import React from 'react'
import ReactDOM from 'react-dom'
// 导入css文件
import './index.css'
// className 属性用来设置类名
const jsx = <div className="title">Hello World</div>
ReactDOM.render(jsx, document.querySelector('#app'))

index.css文件

.title{
  text-align: center;
}

总结

• JSX 是在js代码中编写html结构，是React声明式的一个体现
• JSX 中可以使用各种表达式，表达式要写在 { } 中
• JSX 中条件渲染是用函数完成的，在函数内计算出最终的 JSX 再在 {} 中调用该函数
• JSX 中的循环渲染使用 map() 方法
• JSX 中使用样式有 style 和 className 两种方式
  1.style中使用对象方式设置样式；
  2.className中来设置类名，样式写在另一个文件中，并且使用 import 导入css文件