react基础创建项目

1. create-react-app 概念 

2. create-react-app 基本使用 

create-react-app 全局配置 

运行 npm install -g create-react-app 安装全局依赖包 
运行 npx create-react-app my-app 创建一个react项目
运行 cd my-app 进入项目根目录
运行 npm start 运行项目 

3. react定义组件

3.1 定义react无状态组件

直接以箭头函数定义组件 

const App = () => {
  return (
    <div>
      无状态组件
    </div>
  )
}

以函数名称作为html元素渲染组件 

ReactDOM.render(
  <App />,
  document.querySelector('#root')
)

 3.2 定义react有状态组件

class App extends React.Component {
  render() {
    return (
      <div>
        有状态组件
      </div>
    )
  }
}

以函数名称作为html元素渲染组件 

ReactDOM.render(
  <App />,
  document.querySelector('#root')
)

4. react 组件传值 

4.1 react 无状态组件传值 

在渲染的组件上使用 属性名='属性值' 的方式传递 

 给箭头函数添加 props 形参 ，并在jsx语法中使用 {props.属性名} 的方式 调用 

4.2 react 有状态组件传值 

在渲染的组件上使用 属性名='属性值' 的方式传递

 直接在jsx语法中，使用 {this.props.属性名} 的方式 调用 

4.3 通过属性 defaultProps 给无状态组件传递默认值 

export default function TodoHeader(props) {
}
TodoHeader.defaultProps = {
  x: 2,
  y: 3
}

 直接在jsx语法中，使用 {props.属性名} 的方式 调用

注意 :  defaultProps 是固定属性，不能修改

4.4 通过属性 defaultProps 给有状态组件传递默认值 

在有状态组件中定义静态属性 defaultProps  

export default class TodoInput extends Component {
  // 静态属性
  static defaultProps= {
    title: 'add'
  }
}

直接在jsx语法中，使用 {this.props.属性名} 的方式 调用

注意 : defaultProps 是固定属性，不能修改

5. react 类型检查 

5.1 无状态组件中配置 prop-types 第三方包进行类型检查 

运行 npm i prop-types -D 安装第三方依赖包 

配置要检查的数据  

export default function TodoHeader(props) {
}

TodoHeader.propTypes = {
  title: PropTypes.string,
}

注意 : TodoHeader为组件名称，propTypes 是固定属性，不能修改

5.2 有状态组件中配置 prop-types 第三方包进行类型检查 

运行 npm i prop-types -D 安装第三方依赖包 

配置要检查的数据  

import PropTypes from 'prop-types'  // 引入第三方包

export default class TodoInput extends Component {
  // 静态属性
  static propTypes = {
    title: propTypes.string.isRequired
  }
}

注意 : 有状态组件中可以直接定义静态属性 propTypes 检查要检验的属性

6. react 受控组件和非受控组件

6.1 react 受控组件的特性： 

在input的value值，必须是我们设置在constructor构造函数的state中的值 

通过onChange触发事件来改变state中保存的value值  

constructor() {
    super()
    this.state = {
      value: 'hello react'
    }
  }
  render() {
    return (
      <>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
      </>
    )
  }

注意：React16.3之后的ref，建议需要引入createRef函数来定义  

7. react 样式使用 

7.1 使用css设置样式 

直接引入外部css样式 

在html标签元素上使用 className='css类名'  

注意 : 标签的类名必须是 className

7.2 使用classnames第三方包设置样式 

运行 npm i classnames -S 安装项目依赖包，并在index.js头部引入

import classNames from 'classnames'

在html标签元素上使用 className={classNames('class类名')} 

注意 : classNames函数中也可以以对象的方式设置如：classNames({color: false})

7.3 使用style设置样式 

直接在标签元素上使用 style={obj} 

注意 :  style的值是一个对象使用 {} 绑定

7.4 使用styled-components第三方包设置样式 

运行 npm i styled-components -S 安装项目依赖包，并在index.js头部引入

import styled from 'styled-components'
const Myh1 = styled.h1 `
  font-size: 50px
`

直接以返回的变量作为html元素渲染 

  <Myh1>app</Myh1>

8. react todolist案例 

8.1 cra工程项目 文件说明 

8.2 todolist案例基本组件定义 

1. 在component文件夹下名定义TodoHeader 组件
2. 在component文件夹下名定义TodoInput 组件
3. 在component文件夹下名定义TodoList 组件 
4. 在TodoList文件夹下定义子组件TodoItem组件