React 리액트란, 리액트 작업환경 설정

사람들이 좋아하고, 인기있고 , 간편한 프레임워크!

자바스크립트 기반이기때문에 배우는데도 부담이 없다.

 

리액트를 익혀보고 직접 사용해보기 위해 

노마드코더의 ReactJS 로 영화 웹서비스 만들기를 해볼 예정! 오예~

 

 

원래 리액트를 웹브라우저에서 실행하기 위해서는

브라우저는 리액트 코드를 제대로 이해하지 못하기(?) 때문에 원시코드로 변경해야 함 

webpack , Babel 다운로드 -> 리액트 코드 컴파일 과정을 거쳐야 함  하지만,

 

---

 

create react app

하나의  명령을 실행해서 React Web App 을 실행 

 

 

1) createreact app을 통해 리액트 환경 구성 

ex) 한단계 밖 A 디렉토리에서 생성  -> movie_app 이라는 프로젝트 폴더 생성

//npx create-react-app {프로젝트파일명}
npx create-react-app movie_app

 

2)README.md  수정 , package.json 생성

 

npm start , npm test...

여러 명령어 사용 가능 

 

start, build 만 남기고 지움 

 

 

 

 

 3) npm start

 

< 2개의 URL >

Local : 나의 컴퓨터 환경

On Your Network: wifi 환경

 

 

 

 

 

그러면 localhost:3000에서 react로 만들어진 웹브라우저를 확인할 수 있다.

 

 

---

 

react 가 동작하는 방식

APP.js에서 만든 element 요소   ->   index.js 에서 렌더링   ->   index.html에 넣기

React 

 - 내가 쓰는 모든 요소를 생성 

 - 자바스크립트와 함께 요소들을 만들고 그것들을 html 로 만듧

 - react application을 html로 넣음 

 

 

application은 빈  html을 로드하고  ->  그 후  react가 html 을 넣음 

 

 ❖ virtual DOM

:소스코드( index.html)  에 보이지 않는 구성요소