React 공식문서 보기 - 1 (React 앱 만들기, Hello World)

React 공식문서를 보고 하나씩 정리해보겠다.

 

1. 새로운 React 앱 만들기 (https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html)

npx create-react-app my-app

 

터미널에 위 명령어를 입력하면

자동으로 my-app이라는 React app을 생성해준다.

이름은 바꿔도 무방하다 (my-app)

 

my-app 폴더로 이동해서 (cd my-app)

npm start를 입력하면 react 첫 화면을 볼 수 있다.

cd my-app
npm start

 

 

주요 개념 - 1. Hello World (https://ko.legacy.reactjs.org/docs/hello-world.html)

 

 

생성된 my-app 폴더의 src에 index.js를 수정해서 Hellow World를 찍어보자.

ReactDOM.render() 함수가 가상돔을 만들고 
이 가상돔이 진짜 돔에 반영되고

그 위치는 'root' 라는 id를 가진 앨리먼트의 자식이 된다.

 

가상돔과 돔에 관한 개념에 대해서 추후에 깊게 공부해보자!

 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

 

위 코드를 7 ~ 12 번째 줄에 입력하면 화면에 Hello World 가 뜨는 모습을 볼 수 있다.

이렇게 화면에 Hello World 까지 찍어봤다.

공식문서를 하나씩 정복해나가보자!

 

Ref :

https://ko.legacy.reactjs.org/ , 

https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%ED%95%99%EC%8A%B5%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard