ReactJS 단계별 프로젝트 - step.3 메인 페이지 수정

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

 

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- 메인 페이지를 수정하여 HelloWorld 문자열을 출력한다.

 

3. 적용

① src/compts/HelloWorld.js 파일을 생성한다.

HelloWorld.js

 

② App.js 파일을 코딩 시작점으로하여 메인 페이지를 수정한다.

    - App.js에서 HelloWorld.js 파일을 import 한다.

    - 기존 JSX 태그 대신 HelloWorld 컴포넌트를 호출한다.

App.js 파일 수정

 

4. 결과

① npm start 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

결과 확인

 

 

 

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.