[React] 코딩 타자 연습 사이트 만들기 (1) -리액트 프로젝트 생성

코드보기 : https://github.com/maplesyrup0423/DevTyper

리액트 프로젝트 생성 및 기본 설정

1. 새폴더 devtyper 를 생성하고 다음 명령어를 통해 React 앱을 설치.

npx create-react-app .

2. 기본 코드 정리

src 폴더에서 다음 파일을 삭제

• App.test.js
• logo.svg
• reportWebVitals.js
• setupTests.js

3. src/App.js 파일 수정

import React from 'react';

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

export default App;

4. src/index.js 파일 수정

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

5. src/components 폴더 생성

6. components 폴더 안에 TypingArea.jsx, TypingArea.css 파일 생성

TypingArea.jsx 기본 틀 작성

import React from "react";
import "./TypingArea.css";

function TypingArea() {
  return <></>;
}

export default TypingArea;

7. App.js에서 TypingArea 컴포넌트 불러오기

import React from 'react';
import TypingArea from './components/TypingArea';

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

export default App;

npm start

실행시 아무것도 없는 백색 화면이 뜨면 정상이다.