리액트 설치 및 세팅

1. 리액트 설치 및 세팅

 

• 우선 node.js 최신 버전을(왼쪽 안정화 버전 사용) 다운받아야 함
• node.js 버전 확인은 터미널을 연 후 (ctrl + `)

npm -v

 

• 작업할 폴더를 만든 후 powershell에서 프로젝트를 생성한다. (Create React App을 생성)
• 리액트 앱을 생성하는 방법은 npm과 npx 방식이 있는데, npm은 프로그램을 설치 npx는 프로그램을 임시로 설치한다.공식 문서에서는 npx 방식을 권장하며, npx는 컴퓨터 공간을 낭비하지 않고, 최신 버전을 유지할 수 있도록 해주는 장점이 있다.

npx create-react-app blog //blog대신 임의의 프로젝트명을 입력해도 됨

//npm install -g create-react-app
//create-react-app -V /* 설치 확인 */

 

생성된 blog 프로젝트

• 작업할 폴더로 경로를 잡은 뒤, 터미널에 ​npm start를 입력시 로컬 호스트에서 작업내용을 확인할 수 있다.

npm start  //blog> npm start
npm run start

 

2. 리액트 작업

• 작업은 src - app.js에서 작업한다.
• 리액트는 html 대신 JSX를 사용한다.
• 컴포넌트는 하나의 태그 안에 들어가야 한다. → 바깥쪽 태그는 하나의 태그만 있어야 

import x // x는 가져올 대상

function App() {
  return (
    <div className="App">
		// 이 안에 작업
    </div>
  );
}

export default App; // App을

 

3. 디렉터리 구조

• 디렉터리 구조는 크게 public과 src로 나뉜다.
• 간단하게 정리하자면 app.js에서 작업한 결과가 index.html의 root라는 id값을 가진 div 안에 표시되는 것.