[ReactJS/노마드코더] Create React App 리액트 프로젝트 생성 - ReactJS로 영화 웹 서비스 만들기

노마드 코더 ReactJS로 영화 웹 서비스 만들기

web 소켓 얘기하다가 급 react 기초 다지기 . . 빠르게 훑고 가면 좋을 거 같아서 후딱 진행해보겠습니다.

Window 기준

목차

#1 [Update] Introduction
#2 [Update] The Basics of React
#3 [Update] State
#4 [Update] Props
#5 [Update] Create React App
#6 [Update] Effects
#7 [Update] Practice Movie App

#8 Introduction
#9 Setup
#10 JSX & Props
#11 State
#12 Making the Movie App
#13 Conclusions
#14 Routing Bonus

 

#1~#7까지는 안할거에오. 리액트 아예 처음 접하시는 분이라면 꼭 하고 시작합시다!!

 

9.0 Creating your first React App

1. create-react-app

(node_env_14) C:\Study>npx create-react-app movie_app

 

2. package.json

 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },​

 

start : 개발 서버를 시작하고 애플리케이션을 브라우저에서 실행하는 명령어 

- 실시간으로 파일 변경 감지

- 브라우저를 자동으로 새로고침 하거나 변경된 부분 즉시 반영

 

build : 프로젝트 배포용 빌드 변환 명령어

- 소스 코드 최적화 배포용 버전 변환

- 코드 압축, 분할, 이미지 최적화 등 프로덕션 환경에 맞게 설정 조정

- 배포하기에 적합한 파일들을 build/ 디렉터리에 생성

 

test ( 테스트를 자동으로 실행하여, 코드가 예상대로 작동하는지 확인 가능),

eject (프로젝트 설정을 커스터마이징 하기 위해 react 앱 기본 설정 노출) 는 사용안한다네용

3. npm start

 

localhost:3000 번으로 웹페이지 열려따!

성공적

  Local:            http://localhost:2:30003000
  On Your Network:  http://172.16.1.92:30002:3000

 

Local : 컴퓨터에 있는 거

On Your Network : 다른 사람이 이 사이트 확인해볼때 폰에 테스트 하거나 wifi로 접속 가능