[React] React 작업환경 구축 및 관련 설명

React 작업환경 구축

Webpack, Babel의 용도?

    리액트를 하다보면, Component를 분할하여, 파일로 저장하게 됩니다. Component는 JSX로 작성하게 되는데,

    JSX를 여러개 결합할 때, Webpack을 사용하게 되고, 새로운 문법들을 활용할 때, Babel을 활용합니다.

npx create-react-app begin-react
npm run start

혹은 
npm install -g create-react-app
>> 생성된 파일 접속
npm run start

React Component를 만들 때, import React from "react";를 통하여 React를 불러와야 합니다.

React Component는 함수 형태 혹은 클래스 형태로 작성할 수 있습니다.

import React from 'react';

function Hello() {
    return <div>안녕하세요.</div>
}

export default Hello;

export default Hello; 의 경우에는 Hello라는 함수형 Component를 내보낸다는 의미입니다.
Component는 일종의 Web UI의 조각이므로, 재사용이 가능합니다.

 

ReactDom.render의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 랜더링하겠다는 의미입니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

Reference

https://react.vlpt.us/basic/02-prepare.html

2. 작업환경 준비 · GitBook