创建React项目

package.json中三个核心依赖：react、react-dom、react-scripts

两个根目录：public 和src；src中有index.js的入口文件

npx create-react-app my-app 脚手架创建项目

alt

alt

运行项目

npm run build 最后项目上线用

npm (run)start ; webpack会找到配置文件package.json中的配置，执行本地测试服务器。

React组件

在React中网页被拆分为一个一个组件，组件是独立可重复的代码片段。

  • react中组件中有两种创建方式
    • 函数式组件
      • 函数组件就是一个返回JSX的普通函数
      • 组件的首字母必须是大写
    • 类组件

事件

事件作为属性的方式绑定给函数

在React中事件需要通过元素的属性来设置，和原生JS不同，在React中事件的属性需要使用驼峰命名法

onclike -> onClick

onchange -> onChange

属性值不能直接执行代码，而是需要一个回调函数(箭头函数/匿名函数)

① onClick= {() => {alert(123)} }

② onClick ={另一个函数名 比如直接写 clickHandler}

alt

props 简介

父传子 用props

在函数组件中，属性就相当于函数的参数，通过参数来访问

可以在函数组件的形参中定义一个props，props指向的是一个对象

它包含了父组件中传递的所有参数

子组件{props.name} 直接在JSX中使用；

注意：props是只读的，子元素不能修改，只能使用

例子：父传子data对象

alt

alt

alt

state 组件状态

在React中，当组件渲染完毕后，return中的东西执行过后，再修改组件中的变量，不会使组件重新渲染。

要使得组件可以收到变量的影响，必须在变量修改后对组件进行重新渲染