react学习笔记1

零、在react脚手架中搭建一个新的react项目

1.安装react（基础）、react-dom (web端应用)

npm i react react-dom

2.创建项目(react脚手架自动安装以上两个包了，后续引入即可)

npx create-react-app my-app

或
npm init react-app my-app

或
yarn create-react-app my-app

3.启动项目

npm start

一、在脚手架中使用react

导入两个包（react、react-dom）、创建、渲染

import React from 'react'
import ReactDom from 'react-dom'

const title = React.createElement('h1',null,'hello react !')

ReactDom.render(title,document.getElementbyId('root'))

二、JSX

1.基本使用

let span = <span>JSX语句</span>

2.jsx中使用JavaScript

注意：1）jsx使用单大括号{}包裹js表达式；2）jsx自身也是js表达式，可以被包裹；3）js中的对象一般不包含在{}中，style属性除外；4）{}中不能出现语句（if/for等）

const h1 = <h1>jsx</h1>
const div = (
    <div>嵌入表达式：{h1}</div>
)

3.jsx条件渲染

        （if、三元运算符、与运算符）条件表达式写在函数中，jsx用函数调用的方式进行条件渲染

4.jsx列表渲染

        (for)用数组的.map函数在jsx中进行列表渲染

import React from 'react'
import ReactDom from 'react-dom'

//条件渲染
let show = true
const fun = () => {
    return show ? (<div>正在加载</div>) :  (<div>加载完成，显示内容</div>)
}

const element1 = (
    {fun()}
)

// 列表渲染
const arr = [
    {id:1, name:'zhang'},
    {id:2, name:'wang'},
    {id:3, name:'li'}
]
const element = (
    {arr.map(item => <li key = {item.id}>{item.name}</li>)}
)

// ReactDom.rander(element1,document.getElementById('root'))
ReactDom.rander(element,document.getElementById('root'))

5.jsx样式处理(内联样式/className)

const elem = (
    {/* 1、style表达式里放对象，驼峰命名*/}
    <div style={ {width:'100px',backgroundColor:'red'} }>111</div>
    {/* 2、className里传外部.css文件中定义的样式*/}
    <div className='div2'>222</div>
)