React命令

全局安装脚手架来创建React项目
npm i -g create-react-app
npx调用最新直接创建React项目
npx create-react-app react-hello
装props校验，做类型校验独立的包
npm i prop-types
json-server 提供接口数据
npm i -g json-server
npx json-server ./data.json --port 8888 --watch
react 发请求
npm i axios
json-server --version
装sass
npm i axios sass bootstrap@5.2.0-beta1
装redux
npm i redux
绑定react redux
npm i react-redux



启动项目
npm start

Js语法

把数组用@分割成字符串
{[1, 2, 3].join('@')}
把字符分割
split
批量修改数组值,推荐使用map方法,遍历要绑上key
songs.map(item => {return <li key={item.id}>{item.name}</li>})
行内样式写的时候是一个对象再加{},单词驼峰写法
style={{ backgroundColor: 'red', color: '#fff' }}
三元表达式
<span className={item.attitude === 1 ? 'like liked' : 'like'}>
<span className={`like b c ${item.attitude === 1 ? 'liked' : ''}`}>
<span className={['like','b','c',item.attitude === 1 ? 'liked' : ''].join(' ')}>

JSX注意事项

内容:
JSX必须要有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）或者<React.Fragment></React.Fragment>

所有标签必须结束，如果是单标签可以使用/>结束
JSX中语法更接近与JavaScript，属性名采用驼峰命名法
- class ===> className
- for ===> htmlFor
JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止 JS 自动插入分号的bug
对象不能直接渲染{}
jsx也是一个js表达式调用React.createElement('h1',null,'hi~react')来创建元素
1.函数组件：使用JS的函数或者箭头函数创建的组件
约定1：函数名称必须以大写字母开头(标签名)，React 据此区分组件和普通的 HTML标签
约定2：函数组件必须有返回值，表示该组件的 UI(jsx) 结构；如果不需要渲染任何内容，则返回 null
要给一个函数而不是函数调用vue里可以react不行，后边就要给一个函数而不是函数调用，事件绑定传值不行，注意
1.jsx的语法相比html的语法更加严格，更加接近js

总结
vue主要提供了写好的指令固定的写法，react本身是一个小库专门用来处理用户界面的，只会借助原生js的能力，