[react] 새 프로젝트 준비 create-react-app

jieun·2021년 3월 19일
1
post-thumbnail

//앱 미리보기⬆️

프로젝트 생성

  1. 터미널 실행
cd documents
mkdir 새프로젝트이름
cd 새프로젝트이름
npm init
  1. vscode 실행
  2. 생성한 프로젝트 드래그해서 열기

리액트 설치

  1. 루트디렉토리에 client 디렉토리 생성
  2. vscode 터미널에서 다음 코드 실행
  3. antd 설치
cd client
npx create-react-app .
npm i antd @ant-design/icons
npm run start
  1. 필요없는 파일 삭제
    -src/App.css
    -src/App.test.js
    -src/index.css
    -src/logo.svg
    -src/reportWebVitals.js

  2. App.js 파일 내용 수정

//App.js

function App() {
  return (
    <div>
      Hello
    </div>
  );
}

export default App;
  1. index.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')
);
  1. 서버 실행
cd client
npm run start

깃허브에 저장

  1. 깃허브 사이트 접속
  2. 프로젝트명과 동일한 레파지토리 생성
  3. 레파지토리 주소 카피
  4. 프로젝트 터미널에서 다음 코드 입력
    -두번째줄 코드는 최초에만 작성
cd ..
git init
git remote add origin 카피한주소
git add .
git commit -m "메시지 입력"
git push origin main
profile
개발새발 블로그

0개의 댓글