프로젝트 초기 실행
프로젝트를 생성하면 public과 src 폴더가 생성됨
public에는 html 관련 파일이 저장되고, src에는 js , css 파일이 생성됨
js App이 html로 rendering되는 순서는
- html에서 id를 정의(<div id='root'>)
- index.js에서 id가 root 인 요소를 찾아서 App.js를 매핑
reactDOM.render(<App />, document.getElementById('root');
기본 import 변경 :import ReactDOM from 'react-dom';
기본은 import ReactDOM from 'react-dom/client';
const root = ... ; - App.js에 실행할(html에 rendering 할) 내용을 구현
- 실제 구현 되는 내용은 App.js에 있음
프로젝트 생성 초기 파일
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="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- 여기에 class = "App" 이 옴.-->
</div>
</body>
</html>index.js
import React from 'react';
import ReactDOM from 'react-dom'; // 공부시에 수정한 것
// import ReactDOM from 'react-dom/client'; => 기본
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 기본 제공
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>
// );
// 공부 시에 수정한 내용
// id가 root 인 element를 찾아서 App.js 파일을 실행 한 결과를 출력(render) 함
ReactDOM.render(<App />, document.getElementById('root'));
reportWebVitals();
// 공부 시에 serviceWorker 가 있으나 reportWebVitals()로 대체된 듯함..App.js
import './App.css';
import {Component} from "react";
// index.js 파일에서 참조하는 App.js 파일
// function 형태를 class 파일 형태로 변경
class App extends Component {
render() {
return (
<div className="App">
리엑트 App 기본 내용 변경(아래 <div> 내의 내용을 변경)
</div>
);
}
}
// 기본 코드는 function으로 되어 있음
// function App() {
// return (
// <div className="App">
// <header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <p>
// Edit <code>src/App.js</code> and save to reload.
// </p>
// <a
// className="App-link"
// href="https://reactjs.org"
// target="_blank"
// rel="noopener noreferrer"
// >
// Learn React
// </a>
// </header>
// </div>
// );
// }
export default App;build 하기
npm run build
> react-app@0.1.0 build
> react-scripts build
build 폴더가 생성되고 그 안에 빌드한 파일들이 생성됨
자체 내장 서버 설치
npm install -g serve
added 89 packages, and audited 90 packages in 4s
24 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
서버 실행
serve -s build
┌────────────────────────────────────────────┐
│ Serving! │
│ - Local: http://localhost:3000 │
│ - Network: http://192.168.xxx.xxx:3000 │
│ Copied local address to clipboard! │
└────────────────────────────────────────────┘
접속확인 OK!
'React' 카테고리의 다른 글
| 04. react : props, state (0) | 2023.01.31 |
|---|---|
| 03. react jsx (0) | 2023.01.31 |
| 01. React 기본 개념-Virtual DOM (0) | 2023.01.31 |
| 00. React 환경 설정 등 (0) | 2023.01.29 |