React初级知识点汇总（笔记）

## 环境

创建环境
npx create-react-app project_name

启动
npm start / yarn start
npm run build

弹出设置
npm run eject

安装个别包
npm i moudle_name --save
yarn add module_name
npm i module_name --save-dev
yarn add -D module_name

初始安装
npm i
yarn

## React/ReactDOM

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

JSX是什么？
React.createElement的语法糖
JSX <-- --> React.createElement转换关系

Babel编译工具

<A props1={1} props2="2">
  <B>abc<B>
  <C />
</A>

React.createElement(组件对象, {props1, props2}, ...children)

组件和元素
A    <A />

JSX表达式的写法

{表达式}
表达式只能写一句语句，不能写if / for / while
可以写的：变量，常量，函数调用

<A>{表达式}</A>

children位置：
数字/字符串/数组（数字，字符串）
布尔类型/null/undefined/Symbol
不能写object在children位置

<A props1={表达式} />
<A name={'abc'} age={12} />

表达式输出数组
<A>{items.map((item, index) => <B key={index}>{item.name}</B>)}</A>

items = [<B key='b'>1</B>, <C key='c'>2</C>, <D key='d'>3</D>]
<A>{items}</A>

HTML元素的属性
<br/> <a></a> 符合JSX语法，Xml标签必须闭合

HTML转JSX

html里属性全是小写，JSX里属性要符合驼峰 colspan --> colSpan, autoplay --> autoPlay

特殊：class --> className, for --> htmlFor
值：
style='width: 120px; font-size: 1em'
style={ {width: 120, fontSize: '1em'}}

有JSX为HTML添加的属性
defaultValue

事件
οnclick='alert(1)'
onClick={() => {}}
this.handleClick.bind(this)
onClick={this.handleClick}

条件渲染
三目运算符： 条件? 真 : 假
开关：条件 && <元素 />

JSX注释
<A>
  //<B /> 错
  {/* <B />*/}
  <C
    {/*props="c"*/} 错
    // props1=‘123’
  >
</A>

自定义组件

组件名字：首字母大写

<