React 시작하기

📕  React는 무엇일까?

컴퓨팅에서 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다. -출처 : 위키백과

새로고침없이 화면을 변환시키고 마치 app같은 화면이라해서 web-app 이라고도 불립니다.

장점
  1. 모바일 앱으로 발행이 쉬움
  2. 앱처럼 뛰어난 UX
  3. 비즈니스적 강점

사용방법

https://nodejs.org/ko/

node.js를 검색하고 다운로드 해줍니다.

https://code.visualstudio.com/

Visual Studio Code를 다운받아줍니다.

비쥬얼스튜디오코드를 다운받았다면 

workspace로 쓸 폴더를 만들고 열기 버튼으로 해당 폴더를 엽니다.

아래에 있는 터미널 창을 써도 되지만 못찾겠다면 상단바에 있는 "터미널 -> 새 터미널"을 선택하시면 됩니다.

npx create-react-app my-app
cd my-app
npm start

첫 줄 끝에 my-app은 내가 만들고싶은 프로젝트명으로 하시면 됩니다.
후에 cd 프로젝트명을 하고 npm start를 하면 첫화면이 나올겁니다.

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

 

첫 화면

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

"프로젝트명 -> src -> App.js" 들어가면 이러한 코드가 보일건데  return(); 안에 <div className="App></div> 안에다가만 코딩을 하시면 됩니다.