ReactJS로 게시판 만들기입니다. (극도로 단순한 구성 주의)
NPM (Node Package Manager) 설치 확인
npm -v
6.14.8
create-react-app 모듈 설치
sudo npm install -g create-react-app
create-react-app 을 활용한 프로젝트 생성
- 프로젝트 (디렉토리 명) - react-simple-blog
create-react-app react-simple-blogCreating a new React app in /Users/imchaehun/workspace/react/react-simple-blog.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
yarn add v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨 Building fresh packages...
[1/5] ⠐ fsevents
[-/5] ⠐ waiting...
[-/5] ⠐ waiting...
[-/5] ⠐ waiting...
[-/5] ⠐ waiting...
React 실행
cd react-simple-blognpm start
접속
별다른 설정이 없다면 개발 환경 Webpack 서버의 Port는 3000번 입니다.
따라서 localhost:3000 접속
Visual Studio Code 를 활용해 개발 환경 구성
다음장에 이어서
2020/10/29 - [ReactJS] - [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (ReactJS로 아주 간단한 게시판 만들기 - 2)
프로젝트 예제 소스코드 주소
youspend8/react-simple-blog-example
Contribute to youspend8/react-simple-blog-example development by creating an account on GitHub.
github.com
'Javascript > React.js' 카테고리의 다른 글
| [ReactJS] React Hook useState(), useEffect() 사용하여 데이터 요청 및 관리 (React로 아주 간단한 게시판 만들기 - 3) (0) | 2020.10.29 |
|---|---|
| [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (React로 아주 간단한 게시판 만들기 - 2) (2) | 2020.10.29 |
| [ReactJS] React JSX (React 기본 -3장) (0) | 2019.04.01 |
| [ReactJS] Visual Studio Code + create-react-app으로 프로젝트 환경 구성 (React 기본 -2장) (4) | 2019.03.30 |
| [ReactJS] ReactJS 시작하기 (React 기본 -1장) (0) | 2019.03.26 |
댓글