React: 프로젝트 생성 및 셋팅

React는 공식적으로는 라이브러리가 맞다.

하지만 실제 웹앱을 만들어 서비스를 올리기 위해서는 상태관리, 라우팅 등 여러 모듈을 붙여야 한다.

그렇기 때문에 사실상 React를 프레임워크라고 부른다.

 

React에 입문하며 꼭 필요한 셋팅법만 정리해둔다.

(내가 나중에 볼 용도임)

 

1. 프로젝트 생성

- Node.js 설치 : https://nodejs.org/ko/download/

- VisualStudio Code 설치 : https://code.visualstudio.com/Download

- React 프로젝트 생성 : npx가 맞음. npm 아님.

npx create-react-app 프로젝트명

 

2. 상태관리

- jotai

(https://jotai.org/)

npm install jotai

 

3. HTTP

- axios

(https://axios-http.com/kr/)

npm install axios

 

4. Router

- react-router-dom

(https://reactrouter.com/docs/en/v6)

(https://velog.io/@velopert/react-router-v6-tutorial)

npm install react-router-dom

 

5. Style

- Ant Design

(https://ant.design/)

npm install antd

// App.js

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

// App.css

@import '~antd/dist/antd.css';