React 내가 다시 볼 쿡북

React 내가 다시볼 쿡북

기본설치

node.js설치 -https://nodejs.org/ko/

vscode설치 -https://code.visualstudio.com/

yarn설치 -https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

`npm install --global yarn`

`yarn --version`

1.프로젝트생성

`npx create-react-app 프로젝트명`

2.프로젝트실행

`npm start`

`yarn start`

3.터미널에 뜨는 warning 없애기

`*/\* eslint-disable \*/*`

상단에 넣어주기

4.useState사용

`import {useState} from 'react'`

let [a,b] = useState()

5.React Bootstrap사용하기

https://react-bootstrap.github.io/

`npm install react-bootstrap bootstrap@5.1.3`

그때그대 봐서 링크들어가서 설치하기

public/index.html 안에 link태그들 몰려있는곳에 소스코드 넣어주기

그후 src/컴포넌트 들에서 사용해주면된다.

`import { Button,Navbar,Container,Nav,NavDropdown,Carousel } from 'react-bootstrap';`

이런식으로 필요한 컴포넌트는 상단에서 import해서 사용하기

6.import / export사용하기

https://flykimjiwon.tistory.com/32

7.컴포넌트화

https://flykimjiwon.tistory.com/33

8.React Router사용하기

npm install react-router-dom@5
yarn add react-router-dom@5

index.js에서 설정해주기

https://flykimjiwon.tistory.com/34

9.CSS사용하기 (SASS)

yarn add styled-components

npm install styled-components

`import styled from 'styled-components'`

https://flykimjiwon.tistory.com/35

10.React Ajax (axios사용)

yarn add axios
npm install axios

https://flykimjiwon.tistory.com/37

11.React build (배포),깃허브배포 등

npn run build
yarn build

https://flykimjiwon.tistory.com/39

12.React Css애니메이션 만들기

yarn add react-transition-group

npm install react-transition-group

`import {CSSTransition} from "react-transition-group"`

https://flykimjiwon.tistory.com/41

13.React Redux사용하기

yarn add redux react-redux

npm install redux react-redux

https://flykimjiwon.tistory.com/42