# react-笔记

**Repository Path**: mmc526/react-notes

## Basic Information

- **Project Name**: react-笔记
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-17
- **Last Updated**: 2023-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#
1. React.createElement()  
> 用来创建一个React元素，参数1，标签名称，小写:div、button等  
> 参数2，{id:'btn',onClick:()=>{},className:'hello'},元素属性，设置事件使用驼峰命名,class->className  
> 参数3，内容或子元素  
2. ReactDOM.createRoot(document.getElementById('root'))  创建根元素，参数是一个dom容器  
3. root.render(div)  将react元素渲染到根元素。  

4. 在html中使用jsx需要引入babel.js，然后script标签使用`<script type="text/babel">`  
> jsx不用加引号，html标签应小写，react组件大写开头，jsx有且只有一个根元素。  
> jsx中可以使用{}添加表达式，jsx标签必须闭合，如<p></p>,<br/>  
> style={{backgroundColor:'#bbb'}},里面是个对象  
> 数组元素会自动渲染衔接

## 使用react-script运行一个react项目
1. `npm i react react-dom react-scripts -S`  
2. `npx react-scripts start`启动，`npx react-scripts build`打包，也可以将命令配置到package.json  
```
import ReactDOM from 'react-dom/client'
const div=<div>test</div>
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(div)
```
## 函数式组件和类组件
1. 返回jsx的函数
```
function App(){
    return <div>内容</div>
}
-------------
const App=()=>{
    return <div>内容</div>
}
export default App;
...
root.render(<App/>)

```
2. 类组件
```
//类组件必须有个render方法，返回jsx
import React from 'react'
class App extends React.Component{

    render(){
        return <div>内容</div>
    }
}
export default App;

```