프레임워크/리액트 React
리액트 설치 및 세팅
raim-2
2023. 1. 14. 17:49
반응형
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 /* 설치 확인 */
- 작업할 폴더로 경로를 잡은 뒤, 터미널에 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 안에 표시되는 것.