CRA없이 React사용해보기 - babel

React 앱을 만들기 위해 필수적인 개발 도구들

• Babel, Webpack, HMR(hot-module-replacemnet)...

하지만 CRA 의 경우 이런 패키지가 포함되어 있습니다.

1 babel 실행에 필요한 react와 react-dom 세팅

babel공식문서

• babel의 경우 JSX파일을 JS파일로 트랜스파일링을 해줍니다.

1-1 리액트 개발환경 세팅(react, react-dom설치)

$ npm init
$ npm i react react-dom

1-2 폴더 및 파일 생성

아래와 같은 디렉티브 구조를 만들어줍니다.

index.html

  <div id="root"></div>

JSX문법으로 작성된 아래의 코드를 JS로 수정해볼 예정입니다.

FollowBtutton.js

import React from 'react'
// React Component!
// Follow <-> following
function FollowButton() {
  const [following, setFollowing] = React.useState(false)

  const commonBtnStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    top: "12px",
    right: "16px",
    width: "100px",
    height: "36px",
    borderRadius: "9999px",
    fontWeight: "bold"
  }

  const followBtnStyle = {
    ...commonBtnStyle,
    backgroundColor: "black",
    color: "white"
  }

  const followingBtnStyle = {
    ...commonBtnStyle,
    backgroundColor: "white",
    color: "black",
    border: "1px solid #cfd9de"
  }

  //JS로 작성된 문법입니다.
  // return React.createElement(
  //   "div",
  //   {
  //     onClick: () => setFollowing(!following),
  //     style: following ? followingBtnStyle : followBtnStyle
  //   },
  //   following ? "following" : "Follow"
  // )

  //JSX문법
  return <div onClick = {
    () => setFollowing(!following)
  }
  style = {
    following ? followingBtnStyle : followBtnStyle
  } >
  {following ? "following":"Follow"}
  </div>;
}

export default FollowButton

이제 렌더코드를 추가해보도록 하겠습니다.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import FollowButton from './components/FollowButton'

const domContainer = document.querySelector('#root');
ReactDOM.render(<FollowButton/> , domContainer);