반응형
리액트 프로젝트 만들기
https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html 참고
$ npm install -g create-react-app
$ create-react-app my-app- 새 프로젝트의
src/폴더에 있는 모든 파일들을 삭제해주세요. (폴더 안의 내용만 삭제하되 폴더는 삭제하지 마세요)
$ cd my-app
$ rm -f src/*- 이 CSS 코드를
src/폴더에index.css파일로 추가해주세요. - 이 JS 코드를
src/폴더에index.js파일로 추가해주세요. src/폴더에 있는index.js의 최상단에 아래 세 줄을 추가해주세요.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';이제 프로젝트 폴더에서 npm start 명령어를 실행하고 브라우저에서 http://localhost:3000를 여세요. 빈 틱택토 필드를 볼 수 있습니다.
--이전에
리액트 기본적인 사용방법
html로 실행해보기
index.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<!--(2)-->
<div id = "root"></div>
<!--(3)-->
<script type="text/babel">
ReactDOM.render(
<h1> hello.world </h1>,
document.getElementById('root')
)
</script>
</body>
(1)
리액트/바벨 라이브러리 읽어들이고 있음
(2)
id =root를 사용해 자바스크립트에서 쉽게 참조할 수 있게 만듦
(3)
자바스크립트 정의
- JSX라는 자바스크립트 확장언어를 사용
- text/javascript 대신 text/babel이라고 지정 > 이처럼 사용하면 바벨을 사용해 스크립트를 변환할 것이다 라는 의미 , 실행될때 자바스크립트 코드로 변환된다.
반응형
'개발(라이브러리,프레임워크) > react.js & react native' 카테고리의 다른 글
| 자동빌드, 웹팩 (0) | 2021.05.16 |
|---|---|
| 컴포넌트, 이벤트 (0) | 2021.05.15 |
| 가상 DOM (0) | 2021.05.14 |
| 리액트와 JSX의 관계 (0) | 2021.05.13 |
| Node.js 환경설정 (0) | 2021.04.25 |
