Visual Studio와 Yarn을 이용하여 React 어플리케이션을 처음으로 만들어보자.
터미널에 다음과 같이 입력하여 보자.
yarn create react-app react-study
이번에 만든 앱의 이름을 react-study라고 지정한 것이다.
이 패키지가 깔리는 데 꽤 오래 걸리는데, 다 깔리고 나면 해당 폴더로 이동하면 된다.
cd react-study
그런 이후 yarn start라고 입력하면 이제 개발을 시작할 수 있는 환경이 설정된다.
먼저 첫 실습을 위하여 src폴더 안에 Hello.jsx 라는 파일을 생성해보자.
그리고 이것은 React 파일이기 때문에 다음 줄을 입력한다.
import React from "react";
function Hello(){
return <div>Hello World!</div>
}
export default Hello;index.js는 만들어진 컴포넌트를 껍데기에 넣는 역할이고, 컴포넌트를 하나로 만드는 것은 app.js의 역할이므로 우리가 작성한 파일을 불러오도록 하자. App.js의 파일을 다음과 같이 수정해보자.
import Hello from './Hello';
function App(){
return <Hello />;
}
export default App;이렇게 입력하고 React App을 실행하면 된다.
