https://github.com/pythonista7/react-workshop
https://github.com/pythonista7/react-workshop
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pythonista7/react-workshop
- Owner: Pythonista7
- Created: 2022-04-29T10:55:41.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-29T17:13:26.000Z (almost 4 years ago)
- Last Synced: 2025-02-07T11:11:54.243Z (12 months ago)
- Language: TypeScript
- Size: 851 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Basic React
## Setup
```sh
npx create-react-app web-react --template typescript
cd web-react
npm start
```
## Chakra UI
Install Chakra UI:
```
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
```
ref : https://chakra-ui.com/guides/getting-started/cra-guide
### Provider Setup
```jsx
import * as React from 'react'
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'
function App() {
// 2. Wrap ChakraProvider at the root of your app
return (
)
}
```
## Recoil
Install Recoil:
```
npm i recoil
```
ref : https://recoiljs.org/docs/introduction/installation
### Provider Setup
```jsx
import * as React from 'react'
// 1. import `RecoilRoot` component
import { RecoilRoot } from "recoil";
function App() {
// 2. Wrap RecoilRoot at the root of your app
return (
)
}
```
## Konva
Install Konva
```
npm i konva react-konva
```
ref: https://konvajs.org/docs/react/index.html
### Basic setup
```jsx
import { Stage, Layer } from "react-konva";
function Canvas() {
return(
{...}
)
}
```
## Contents/Branches
1. main (completed project)
2. basic/chakra-ui
3. basic/input-component
4. basic/shapes
5. manage-state/lifting-state-up
6. manage-state/recoiljs
7. final/add-canvas