[React - 기초] JSX, Babel

2022. 3. 8. 17:34·React/패스트캠퍼스
목차
  1. 1. JSX
  2. 2. Babel
반응형

1. JSX

문자도 HTML도 아닌 JavaScript의 확장 문법

const text = "Hello, world!";
const textClass = "title"
const element = <h1 className = {textClass}>{text}</h1>

React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다.

 

2. Babel

JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. 

const text = "Hello, world!";
const textClass = "title"
const element = <h1 className = {textClass}>{text}</h1>
=
	// 바벨처리
=>
const text = "Hello, world!";
const textClass = "title";
const element = /*#__PURE__*/React.createElement("h1", {
  className: textClass
}, text);

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 패스트캠퍼스' 카테고리의 다른 글

[React - 기초] Portals  (2) 2022.03.17
[React - 기초] Memoization  (2) 2022.03.15
[React - 기초] Hooks  (0) 2022.03.10
[React - 기초] React와 리랜더링  (0) 2022.03.09
[React - 기초] DOM, Element  (0) 2022.03.08
  1. 1. JSX
  2. 2. Babel
'React/패스트캠퍼스' 카테고리의 다른 글
  • [React - 기초] Memoization
  • [React - 기초] Hooks
  • [React - 기초] React와 리랜더링
  • [React - 기초] DOM, Element
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    영어독학
    ReactNative
    CCNA
    네이버 부스트캠프
    webpack
    바질 키우기
    javascript
    리얼학습일기
    바질
    자바스크립트
    타일러영어
    ChatGPT
    redux
    덤프
    Babel
    react
    typescript
    식물
    next.js
    다이소
    리얼클래스
    네트워크
    Docker
    타입스크립트
    CSS
    영어회화
    리액트
    알고리즘
    프로그래머스
    Node.js
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[React - 기초] JSX, Babel

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.