7. create-react-app

npx create-react-app을 쓰면 react를 사용하는 데 필요한 것들을 알아서 세팅해준다.

먼저 이를 사용하려면 node.js를 설치해야 한다.

 

설치 후 터미널에서 node - v로 설치된 버전을 확인해볼 수 있다.

나는 16.14버전을 설치했다.

 

npx create-react-app react-for-beginners 로 react 프로젝트 폴더를 생성했다.

 

cd react-for-beginners 해서 폴더를 이동한 뒤 npm start하면 서버를 실행할 수 있다.

이 창이 자동으로 뜨면 성공이다.

 

create-react-app을 통해서 컴포넌트를 분리하고 분리한 컴포넌트에 css를 각각 적용할 수 있다.

분리되어 있는 컴포넌트들은 import를 통해 가져다 쓸 수 있다.

 

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')
);

인덱스에 App.js를 import해서 그리고 있다.

 

App.js

import Button from "./Button";
import styles from "./App.module.css";

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome back!</h1>
      <Button text={"Continue"}/>
    </div>
  );
}

export default App;

App.module.css

.title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 18px;
}

App을 위한 App.module.css를 만들어서 import해서 적용시킬 수 있다.

className 속성을 통해 불러온 css를 적용시켜 줄 수 있다.

이 때 브라우저에서 확인해보면 랜덤하게 클래스 이름을 설정해주어서 클래스 이름을 따로 외울 필요가 없어지고 충돌을 막아준다.(언더바 두개 뒤에 이상한 문자열이 추가되어 있음을 확인)