什么是react

react是用于构建用户界面的一个JavaScript库

特点:声明式基于组件学习一次随处使用

1.使用react首先要安装react的两个包
npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关的功能

react脚手架的搭建

脚手架安装命令npx create-react-app 项目名

npx是npm版本号5.2.0引入的一条命令帮助提升用户体验 npm的升级

npm i -g yarn 用yarn更快代替npm命令
npm init yarn init
npm i 包名 yarn add 包名

在脚手架中使用react
引入：
1.导入react和react-dom这两个包
import React from 'react'
import ReactDOM from 'react-dom'
2.调用React.createElement()方法创建react元素

JSX产生的原因
通过creatElement（）方法创建的 react元素有一些问题

在jsx中使用JavaScript表达式

语法：{JavaScript表达式} 类似于vue的插值写法

const name = "侯旭"
const title = (<h1>{name}</h1>)
//2.使用reactDOM渲染元素
ReactDOM.render(title,document.getElementById('root'))

例

{ }里面不能放对象,还不能出现语句

if else 条件渲染

const flag = false;
const fn=()=>{
   if(flag){
       return <h2>loading</h2>
   }else{
       return <h2>加载失败</h2>
   }
}
const title = (<h1>{fn()}</h1>)

//2.使用reactDOM渲染元素
ReactDOM.render(title,document.getElementById('root'))

image.png

列表渲染 map()

类似于vue中的v-for,循环遍历数据

// 数据
const list = [
    {id:1,name:"演员"},
    {id:2,name:"像风一样"},
    {id:3,name:"逆战"}
]
// 渲染
const title = (
    <ul>
        { list.map(i=><li>{i.name}</li>) }
    </ul>
)

=列

下面的报错是没有添加key属性,要保证key属性值是唯一的

  { list.map(i=><li key={i.id}>{i.name}</li>) }

加key属性在页面渲染时结构上并不会有key属性

key.png

渲染样式

行内样式

用style={{ }},双括号里是键值对的形式且需要驼峰命名法

const title = (
    <ul>
        { list.map(i=><li style={{color:'red',backgroundColor:'green',listStyle:'none'}} key={i.id}>{i.name}</li>) }
    </ul>
)