React_시작

React Project 생성

npx create-react-app {project_name}

현재 폴더에 project 생성을 원하면,

npx create-react-app .

project start

npm start

---

소스코드에 대해 알아보자.

먼저 project생성하면 폴더가 여러개 생성된다.

이때, project/src/index.js를 보자.

src/index.js

react를 동작시키면, index.js를 찾아서 동작시키는 것과 같다.

 

index.js의 코드를 보면, 실제 보여지는 UI는 App에서 온다.

이때, 이 App은 같은 파일안에 있는 App.js 파일을 가리킨다.

 

 

App.js

App.js는 함수로 만들어져있고, 이를 외부로 export하는 구조로 기본적으로 설계 되어있다.

css는 App.css에서 작성되어있다.

 

다시 index.js로 돌아와 root에 대해 보면, id가 root인 블럭은 렌더링해주고 있다.

이는 public폴더의 index.html에 보면,

div 태그에 id="root"를 사용하는 블럭이있다. 이 범위가 궁금하면, css로 확인해보자.