01. Installation

Setting Up the Project

1. npm create vite@4.1.0
   • Name: game-hub
   • Library: React
   • Language: Typescript
2. cd game-hub
3. npm i
4. npm run dev
5. code .
6. git init
7. git add .
8. git commit -m "Initial commit"

Installing Chakra UI

To use Chakra UI in your project, run the following commands in your terminal:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx, index.tsx or App.jsx depending on the framework you use.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
)

import { Button, ButtonGroup } from '@chakra-ui/react'

function App() {
  return <Button colorScheme='blue'>Button</Button>
}

export default App

评论