[리액트react] 시작하기 hello world

리액트(react) 시작하기 hello world!

참고링크

운영체제	프론트엔드	백엔드	데이터베이스	인프라
리눅스구조	js필터	아파치에러로그	행삭제	아파치스쿱
프로세스	헬로월드	웹서버개념	ES기초	로그분석
네임스페이스	프로젝트생성	아파치설치	MySQL기초	beeline
디렉토리	헤더생성	flask연동	큐브리드	하둡기초
리다이렉션	async-get	장고MsSQL연결	null공백	나이파이
쓰레드	async-post	장고MySQL연결	MySQL설치(win)	백본
라즈베리파이설치	로그인페이지	장고inpectdb	MySQL테이블생성	제플린
OSI7계층소개		장고read		SSL인증
OSI1계층		장고insert		커버로스
OSI2계층		장고put		도커개념
OSI3계층		장고del		도커설치
OSI4계층		flask한글요청		도커기초
OSI5,6,7계층				도커이미지
DNS서버				컨테이너네트워크
DHCP				도커API
bashrc				도커컴포즈
bash				도커볼륨
ifconfig				장고이미지
소켓프로그래밍				도커postgre
리눅스유저생성				도커이미지삭제
netstat포트열기				도커Redis
컴파일러				k8s구조
운영체제vs커널				k8s설치
작업스케쥴링				k8s서비스배포
디스크추가				POD네트워크
aws유저추가				퍼시스턴트볼륨
기초명령어				k8s에러
포트번호

1. 사전 준비 사항

리액트를 시작하기 위해서는 다음 3가지가 준비되어 있어야 합니다.

• node.js 설치
• npm 또는 yarn 설치
• 텍스트편집기(vs code, intellij 등)

1.1. node.js 설치 버전 확인

$ node -v
v18.0.0

1.2. npm 버전 확인

$ npm -v
8.6.0

2. 프로젝트 생성

저는 test 디렉토리 안에 hello-react라는 프로젝트를 생성하겠습니다. 프로젝트를 생성하면 hello-react라는 폴더가 생깁니다. 이를 위해 먼저 test 디렉토리로 이동해서 npm create react-app hello-react를 실행합니다. 시간이 프로젝트를 생성하는데 시간이 조금 걸립니다.

$ cd test
$ npm create react-app hello-react
Creating a new React app in /Users/cheolwon/Documents/test/nodejs/hello-react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
...(중략)
We suggest that you begin by typing:

  cd hello-react
  npm start

Happy hacking!
npm notice 
npm notice New minor version of npm available! 8.6.0 -> 8.10.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.10.0
npm notice Run npm install -g npm@8.10.0 to update!
npm notice 

3. 프로젝트 실행

프로젝트를 생성하면 hello-react 디렉토리가 생성된 것을 알 수 있습니다.

$ ls -al
total 0
drwxr-xr-x  10 cheolwon  staff   320B  5 20 14:49 hello-react/

그리고 hello-react 디렉토리로 이동해 npm start 를 입력하면 화면이 뜹니다!

$ cd hello-react
$ npm start
Compiled successfully!

You can now view hello-react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.35.239:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully