React基础和JSX

React

官网：http://reactjs.org

React基础

React脚手架的使用

初始化

npx create-react-app 项目名称

启动项目

npm start

能看到这样的界面就表示项目配置成功了

在脚手架中使用React

1.导入react和react-dom两个包

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

2.调用React.createElement()方法创建react元素

3.调用ReactDOM.render()方法渲染react元素到页面中

将index.js中的内容修改为如下：

//导入react
import React from 'react'
import ReactDOM from 'react-dom'

//创建react元素
const title = React.createElement('h1',null,"hello react");

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

效果：

JSX

简介

JSX是JavaScript XML 的简写，表示在JavaScript代码中写XML（HTML）格式的代码。

优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。

使用步骤

1. 使用JSX语法创建react元素

   const title = <h1>Hello JSX</h1>
   

2. 渲染react元素

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

效果

注意点

1. React元素的属性名使用驼峰命名法

2. 特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex

3. 没有子节点的React元素可以用/>结束

   <span></span>可以简写成<span />
   

4. 推荐使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

   const div = (<div>hello jsx</div>)
   

JSX中使用JavaScript表达式

const name = 'admin'
const title = (
  <h1>
    this is a test,{name}</h1>
)

使用单大括号将js变量名包裹起来，类似于vue中的插值表达式

JSX的条件渲染

根据条件渲染特定的JSX结构

//导入react
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>
)

//渲染react元素
ReactDOM.render(title,document.getElementById('root'))

使用三元运算符

//导入react
import React from 'react'
import ReactDOM from 'react-dom'

/*
* 条件渲染
*/

const isLoading = true
const loadData = () =>{
    return isLoading ? (<div>loading...</div>) : (<div>加载完成</div>)
}

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

//渲染react元素
ReactDOM.render(title,document.getElementById('root'))

JSX的列表渲染

如果要渲染一组数据，应该使用数组的map（）方法

//导入react
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>{item.name}</li>)}
    </ul>
)
//渲染react元素
ReactDOM.render(list,document.getElementById('root'))

渲染列表是应该添加key属性，key属性的值要保证唯一,map()遍历谁，就给谁添加key属性

const list = (
    <ul>
        {songs.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)

JSX的样式处理

1. 行内样式 —— style

   <h1 style={{color:'red',backgroundColor:'skyblue'}}></h1>
   

2. 类名 —— className(推荐)

   <h1 className="title">JSX的样式处理</h1>
   

   .title{
       text-align:center;
   }