# h6-2006-react-basic

**Repository Path**: caoyla/h6-2006-react-basic

## Basic Information

- **Project Name**: h6-2006-react-basic
- **Description**: react代码

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-07-20
- **Last Updated**: 2022-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 安装cra
```js
npm i create-react-app -g

// 启动项目
create-react-app you-project // 注意不要使用驼峰

```
生成 入口函数 是 src/index.js

## 启动项目安装的三个包
+ react  
核心语法包 （解析jsx 以及react核心语法 生成虚拟dom 组件语法）
jsx xml in js (在js中写组件 包含 html标签)
+ react-dom
将react 生成dom树，挂载到 index.html上
+ react-scripts
webpack的 配置文件（看不见）
## jsx语法
是指 可以直接 在 js中 写 xml（组件、自定义标签），react库 会自动编译成虚拟dom对象
注意注意注意：
  jsx中 需要些js 只需要一个大括号
  jsx中的  {} 不管写什么语法 需要有返回值 
  一般可以写  表达式  想要写 复杂的 分支结构（if  else if）需要写在函数内部，且函数 不管走哪个分支，要有返回值

## 组件 
+ 函数式组件
```js

const App = (props)=>{
  return (
    <div>
      { props.title }
    </div>
  )
}


//使用时

reactDom.render(
  <App title="值"/>
  ,
  document.querySelector("#root")
)

```

注意：
  不管是什么类型的组件 内容 必须有一个根标签
  组件名首字母必须大写