③ 프레임워크·라이브러리/react (3) 썸네일형 리스트형 스무디 리액트 part 4 (10장) 보호되어 있는 글입니다. 리액트 프로젝트 세팅 가이드 1. 프로젝트 폴더 생성 및 초기화 mkdir my-project cd ./my-project npm init 결과 : 프로젝트 루트에 package.json 파일 생성 2. 리액트 설치 npm install react react-dom yarn add react react-dom react : 리액트 라이브러리 react-dom : 리액트 엘리멘트 렌더링 라이브러리 3. 바벨 설치 npm install -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 @babel-core : babel의 core 코드 @babel-preset-react : jsx를 javascript로 트랜스파일링 @babel-preset-env : es6+ 문법을 구브라우저에서.. React 문서 주요개념 요약 jsx란? react 엘리먼트를 생성하는 javascript를 확장한 문법 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); 바벨이 JSX를 React.createElement() 호출로 컴파일 const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 엘레멘트 렌더링 react element는 react의 가장 작은 구성 요소이며, 브라우저 DOM 과는 다르게 순수 오브젝트이다. 따라서.. 이전 1 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?