# fed-e-task-04-03

**Repository Path**: frontend_site/fed-e-task-04-03

## Basic Information

- **Project Name**: fed-e-task-04-03
- **Description**: React Hooks、Chakra-UI、组件性能优化、封装组件库  本模块中围绕 React Hooks、Chakra-UI、组件性能优化、封装组件库四个小专题，对 React 的使用和了解做一个全面进阶，首先 React Hooks 作为最新的函数式组件状态管理办法，越来越多的被使用。其次 React 组件的封装也能够带我们更深入的认识 React 的组件化开发。
- **Primary Language**: NodeJS
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-27
- **Last Updated**: 2022-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1. 项目搭建

```shell
# https://chakra-ui.com/guides/integrations/with-cra

# 简单快捷
npx create-react-app chakra-ui-guide  --template @chakra-ui
```



## 2.依赖安装

```shell
cnpm install react-router-dom

cnpm install react-icons

cnpm install axios

# 请使用Google搜索 chakra-ui V1.x 即不使用create-react-app chakra-ui-guide --template @chakra-ui时
# https://chakra-ui.com/docs/getting-started  
cnpm install --save @chakra-ui/react @emotion/react @emotion/styled framer-motion


"@chakra-ui/react": "^1.0.0",
"framer-motion": ">=3.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
```



## 3. chakra Uage

```jsx
import { extendTheme, ChakraProvider  } from "@chakra-ui/react";

const theme = extendTheme();

function App() {
  // 2. Use at the root of your app
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}
```



## 4. 图标使用

```jsx
// https://chakra-ui.com/docs/components/icon#using-chakra-ui-icons
// 1. Import
import { Icon } from "@chakra-ui/react"
import { MdSettings } from "react-icons/md"

// 2. Use the `as` prop
function Example() {
  return <Icon as={MdSettings} />
}
```