react脚手架 及 使用JSX书写react

1、创建项目

npx create-react-app@5 react-basic

//////因为降版本了

2、启动项目

yarn start/npm start

3、使用

导入react reactDOM包

降版本

yarn add react@17.0.2 react-dom@17.0.2 --save

4、小案例

4.1className

4.2ul/li

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

const h1=React.createElement(
  'h1',
  {className:'kk'},
  '这是一个羊咩咩'
)


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

jsx书写react

什么是jsx？在js中写html

1、className

yarn add classnames
import classNames from 'classnames'
className={classNames('likes',item.attitude===1&&'liked')}

2、<></>

3、jsx中使用js表达式

4、jsx如何引入css样式

行内：style={{color:'red',backgroundColor:'green'}}

类名：import './css/base.css'

5、React组件书写格式

回调格式const Component=()=><div>我是回调</div>

class类组件格式

class Component extends React.Component{
  render(){
    return (<div>我是class</div>)
  }
}

6、组件

状态：state/数据

函数组件：无状态组件（hooks之前是）

类组件：有状态组件

7、this指向问