아래 네 가지를 설치하기.
1. Node.js : js 런타임 환경.
2. yarn : NPM보다 빠른 속도를 지원하는 패키지매니저.
3. VS Code
4. git for windows(git bash)
git bash 열고, 설치 확인
node --version
yarn --version
프로젝트 생성하기
1. 폴더 생성
cd d:
mkdir react
cd react
mkdir react-tutorial
cd d:/react/react-tutorial
2. 리액트 프로젝트 생성
npx create-react-app begin-react 입력
3. 프로젝트 시작하기
cd d:/react/react-tutorial/begin-react
yarn start 또는 npm start
-----
VS Code에서 d:/react/react-tutorial/begin-react 를 폴더 열기
상단메뉴 [보기] - [터미널] (단축기 Ctrl + `)
터미널에서 yarn start 또는 npm start 입력
src 폴더 하위에 hello.js 파일 추가하고
맨 윗줄에 import React from 'react'; 입력
-----
컴포넌트 만들기.
(1) 함수로 만들 수 있고 (2) 클래스로 만들 수 있음.
Hello.js
import React from 'react';
function Hello() {
return <div>안녕하세요</div>;
}
export default Hello;
function Hello() {
return <div>안녕하세요</div>;
}
export default Hello;
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
https://babeljs.io/
JSX는 xml처럼 생겼는데, 결국 자바스크립트이다.
바벨이 JSX를 자바스크립트로 변경해준다.
바벨 웹사이트에서 Try it out 메뉴에서 테스트해볼 수 있다.
1. JSX는 태그를 열었으면 무조건 닫아야 한다. (또는 셀프 클로징 태그도 괜찮다.)
2. 두 개 이상의 태그는 꼭 한 개의 태그로 감싸져야 한다.
로 감싸면 된다.
<>로 감싸면 된다. 이걸 프레그먼트라고 부른다.
3. 변수를 표시하려면 중괄호를 사용하면 된다. 예 : {name}
<>로 감싸면 된다. 이걸 프레그먼트라고 부른다.
3. 변수를 표시하려면 중괄호를 사용하면 된다. 예 : {name}
import React from 'react';
function App() {
const name = 'react!!';
return (
<div>
{name}
</div>
);
}
export default App;
function App() {
const name = 'react!!';
return (
<div>
{name}
</div>
);
}
export default App;