#REACT 1.
Node.js
node.js 버전은 최신버전으로 진행합니다.
PS D:\student\정화섭\react-1> node -v v18.12.1npm uninstall -g create-react-app (리액트 앱 제거)
npm install -g create-react-app (리액트 앱 재설치)npx create-react-app study1 (리액트 앱 실행)
cd study1"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},npm startnpm i react@17 react-dom@17 --save
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},i는 install의 약자이며 --save를 입력하면 package.json에 기록이 남으며 설치가 완료된다.
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},npm i react-router-dom@5 --save
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},npm i sass --save
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"sass": "^1.56.1",
},
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" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>App.js
function App() {
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}
export default App; 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")
);setting.json 추가
가상돔 HTML 자동 완성 지원
"emmet.includeLanguages": { "javascript": "javascriptreact" }