나중에 내가 보려고 올리는 리액트 설치, 페이지세팅, 배포 방법!
React 설치부터 배포까지
설치
- react 설치 명령어 : npx create-react-app my-app
실행 & 초기 페이지 세팅
-
react 실행 : npm start
-
index.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React App</title> </head> <body> <p>test1</p> <div id="root"></div> </body> </html>
- App.js
function App() { return ( <div className="App"> <h1>test2</h1> </div> ); } export default App;
- index.js
import React from 'react'; // import ReactDOM from 'react-dom'; //구버전 import { createRoot } from 'react-dom/client'; import App from './App'; const container = document.getElementById('root'); const root = createRoot(container); root.render(<App tab="home" />);App.js가 메인페이지고, index.js가 index.html에 메인페이지를 보여지게 한다.
배포
- 수동 업로드
- github에 새 레파지토리를 만든후 page를 만들어 링크를 복사한다.
- 아래 코드를
package.json에 추가.{ "homepage":"github page url", ... } npm run build하면 build 폴더로 resource 파일들이 올라옴- build 안에 있는 파일을 그대로 github pages에 업로드한다.
- 자동 업로드
npm run buildnpm install gh-pages한 다음에 아래 코드를package.json에 추가{ "homepage":"github url", ... "scripts" : { ... "deploy" : "gh-pages -d build" } }npm run deploy - add- pages에서 gh-pages을 선택한다.
FE DEVELOPER 👩🏻💻🤍