리액트

//반드시 하나의 요소들만 반환하여야한다. div로 감싼다.
function App(){
  return(
    <div>
        <h1>리액트 안녕~!!</h1>
        <h2>프로그래밍 시작합니다.</h2>
    </div>
  )
}

Node.js 설치

index.js는 진입

App.js는 기본

import 구문을 특정 파일을 불러오는 것을 의미.

Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러사용

번들러: 웹팩, Parcel, browserify라는 도구 등

리액트 프로젝트에서는 웹팩 사용

번들러를 사용하면 import 또는 require로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일 생성. 최적화 과정에서 여러 개의 파일로 분리

babel - loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환(구버전 웹브라우저와 호환하기 위해서)

 

JSX: 자바 스크립트 확장 문법. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

시작과 끝이 엄격함.

 

div로 감싸야한다.

 

import { Fragment } from "react";

//Fragment 사용
function App(){
  return(
    <Fragment>
      <h1>리액트 안녕</h1>
      <h2>잘 실행되는지 확인해 봅시다.</h2>
    </Fragment>
  );
}