react 생태계...jsx

React

https://ko.reactjs.org/

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

react 장점

• virtual DOM
• JSX
• Functional Programming
• Flux

새로운 기술을 배우는 시작점으로 좋다!

라이브러리 vs 프레임워크

• 라이브러리 : 개발 편의를 위한 도구의 모음
• 프레임워크 : 특정한 기능을 개발하기 위해 만들어진 개발 도구

많은 사람들이 사용하는 기술을 사용하는 것에 대한 이점

• 관심도가 높고 실제 사용 빈도와 사용자 수가 많다
• 문제 해결 방법을 찾기 쉽다
• 관련 라이브러리가 많다

DOM

• Document Object Model

vanilla js

• 순수 자바스크립트 : 특정 라이브러리, 프레임워크를 사용하지 않는 자바스크립트 그 자체

cdn

• content delivery network
• 웹에서 사용되는 다양한 컨텐츠를 저장하여 제공하는 시스템

react dom element 생성

const element = React.createElement("h1", {className:"title"},"hello world");
React.render(element, 출력할 화면);

JSX

• JavaScript 확장 문법 (문자도 html도 아님)
• React.createElement을 아래와 같이 표현할 수 있다.
  const element = <h1 class = "title>hello world!</h1>;
• js는 {}를 이용해 사용할 수 있다.
  babel
  https://babeljs.io/docs/en/babel-standalone
• javascript compiler
• jsx 해석

script에 https://unpkg.com/@babel/standalone/babel.min.js. 추가
+ <script type="text/babel">을 해야지 해석 가능