React - 1: Hello World

rkdden12·2021년 5월 12일
0

React

목록 보기
1/12

* React란?

  • React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

* 선행지식

  • React는 JavaScript 라이브러리이다. 따라서 JavaScript 언어에 대한 기본적인 이해가 필요하다.

* 가장 간단한 코드 예시

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

* 안내서를 읽는 법

  • 이 안내서는 엘리먼트와 컴포넌트라고 불리는 React앱의 구성 블록들에 대해서 살펴볼 것이다.
    이를 숙달하고 나서 재사용 가능한 조각들로부터 복잡한 컴포넌트를 만들 수 있다.

새로운 리액트 앱 만들기

  • 새로운 리액트 앱을 만드는 법은 간단하지만 컴퓨터에 node.js가 깔려있어야 한다.

create React App

  1. vscode를 사용하는경우 폴더를 만든다.
  2. ctrl + ` 을 눌러 터미널을 연다.
  3. 아래 커맨드 입력 (test 대신 다른 프로젝트 명을 써줘도 된다.)
npx create-react-app test(프로젝트명)
  1. 설치가 완료된 후 아래 사진과 같이 초기세팅을 한다.
    4-1. 필요없는 파일들을 모두 지우고 아래 폴더 구조와 같이 세팅
    index.html

    App.js

    index.js

  2. cmd 창에서 해당 폴더로 이동

cd test(프로젝트명)
  1. npm start로 확인

실행화면


이제 앞으로 모든 테스트는 App.js에서 할 예정이다.

출처: https://ko.reactjs.org/docs/hello-world.html

profile
Backend Developer

관심 있을 만한 포스트

0개의 댓글