🐵 Node.js 설치하기
안전하게 10 또는 12를 설치하기
자신의 nodejs 버전을 알고싶다면 node -v
🐵 코드 에디터 설치하기
vscode, 브라켓, atom 등.. 편한 IDE를 설치
🐵 확인하기
npx입력해 커맨드를 작동시킬 수 있다면 설치 준비 완료!- 안되었다면 npx 설치
npm intall npx -g
🐵 Create React App
npx 설치를 완료 했다면 아래 코드를 실행
리액트 환경이 구축되고 나면 locallhost:3000에서 기본 화면을 볼 수 있다.
npx create-react-app {Project-name}
cd my-app
npm start만약 설치가 되지 않는다면 아래 코드로 다시 세팅을 해주자
npm uninstall -g create-react-app
npx clear-npx-cache
npx create-react-app {프로젝트명}🐵 프로젝트 세팅
삭제할 파일
| 폴더명 | 파일명 |
|---|---|
| Public | logo192.png |
| logo512.png | |
| manifest.json | |
| robots.txt | |
| Src | App.js |
| index.css | |
| logo.svg | |
| reportWebVitals.js | |
| setupTexts.js |
수정할 파일
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>App.js
import "./App.css";
function App() {
return (
<>
</>
);
}App.css
.App {}