React로 간단한 프론트엔드를 구현해보자

서론

저번 게시글에서 React에 대해서 간단히 알아보았다.
이번에는 간단한 React를 이용해 간단한 프론트엔드를 구현해보자

프로젝트 생성

npx create-react-app project-name

위의 명령어를 입력하고 project-name 부분에는 프로젝트의 이름을 입력하면된다.
입력한 프로젝트명으로 프로젝트 폴더가 생성됐다면 된거다.

실행해보기

npm start

위의 명령어를 터미널에 입력해보자
그러면 하나의 사이트가 화면에 열릴 것이다.

그럼 이제 src 폴더에있는 App.js로 들어가보자
App.js의 코드 중 return 으로 시작하는 코드가 있을 것이다.
그 사이에 글자를 수정해보고 저장한 뒤 아까 열린 사이트를 보자
그럼 사이트가 수정 되어 있을 것이다.

마치며

오늘은 react 프로젝트를 생성해보고 코드를 수정해 간단하게 내용을 수정해보았다.
다음 react 게시글에서는 useState를 이용해 동적으로 변수를 수정하고 사이트에 바로 적용해보는 것을 알아보겠다.