1. 리액트, 설치 및 프로젝트 생성

1.1 리액트(React) 설치 과정

Node JS 최신버전 설치

Node JS를 설치하면 NPM(Node Package Manager)가 같이 설치된다. NPM은 React 개발에 필요한 다양한 모듈들을 다운받아 설치할 수 있다.

https://nodejs.org/ko/

Node.js

Visual Studio Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

원하는 위치에 ReactStudy 디렉토리 생성 및 IDE 열기

$ cd C:\Users\qkdlf\Project\framework\front-end\React
$ mkdir ReactStudy

 

1.2 리액트 프로젝트 생성

IDE(Visual Studio Code)에서 ReactStudy 디렉토리 오픈 후 터미널 실행

C:\Users\qkdlf\Project\framework\front-end\React\ReactStudy $

리액트 프로젝트 생성

ReactStudy $ npx create-react-app reactjs

IDE(Visual Studio Code)로 reactjs 오픈

IDE에서 터미널 실행 후 웹 실행

reactjs $ npm start

위와 같은 화면이 나온다면 웹 실행 성공입니다.

 

1.3 Hello World 출력

src/App.js 수정

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello Wrold</h1>
    </div>
  );
}

export default App;

References

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