[React] React 시작하기
0. Nodejs 설치 하기
[Nodejs] Node.js 설치 (윈도우 / 리눅스)
먼저 Nodejs 를 설치합니다.
1. Yarn 설치하기
https://classic.yarnpkg.com/en/docs/install/#windows-stable
yarn 홈페이지에 나온 방식대로
npm install --global yarn설치 후,
yarn --version버전을 확인합니다.
2. 리액트 프로젝트 생성하기
① create-react-app 도구 설치하기
yarn global add create-react-app이 create-react-app은
react 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구입니다.
create-react-app이 없다면
리액트 프로젝트에 필요한 패키지를 일일이 찾아 설치해주어야합니다.
② 프로젝트 생성하기
https://ko.reactjs.org/docs/create-a-new-react-app.html (리액트 홈페이지)
create-react-app [생성 위치]
☆ ERROR ☆
'create-react-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
라는 에러가 발생하면,
npm i -g create-react-appnpm 를 이용하여 설치 후, 다시 프로젝트를 생성해봅니다.
③ 프로젝트 실행하기
생성 위치로 이동 후,
yarn start위의 명령어를 입력합니다.
위의 메시지와 함께
http://localhost:3000/ 로
페이지가 이동하면서
위의 화면을 볼 수 있는 것을 알 수 있습니다.
이렇게 리액트 프로젝트 초기 환경을 간편하게 만들었습니다.
3. 도움되는 플러그인
[VSCode] Reactjs code snippets 플러그인 설치하기
4. 리액트 앱 수정하기
그럼 기존 src 폴더의 App.js 를
수정해보겠습니다.
리액트 앱을 구동한 상태에서
위 형태로 변경하고 파일을 저장하면
create-react-app의 핫 리로딩(Hot reloading)이라는 모듈 덕분에
위 사진처럼 즉시 화면이 변경되는 것을 볼 수 있습니다.
리액트 프로그래밍 정석 [박호준 지음] (이지스 퍼블리싱)