[React] 7. Create-React-App

반응형

Create-React-App

Create-React-App은 많은 스크립트와 사전설정을 통해 ReactJS를 사용하기 훨씬 쉽게 해줍니다. 개발 서버에 접근하거나, 자동으로 새로고침을 하거나, 어플리케이션에 CSS를 즉각적으로 포함시켜주는 등 다양한 기능을 제공합니다.

 

1) node.js 설치

 

2) 콘솔에 node -v 입력

노드 버전이 뜬다면 설치가 정상적으로 완료된 것입니다.

 

3) 콘솔에 npx 입력

정상적으로 작동된다면 준비가 완료된 것입니다.

 

4) npx create-react-app 생성할어플리케이션이름

'생성할어플리케이션이름'으로 어플리케이션 폴더가 생성된 것을 확인할 수 있습니다.

 

5) vscode에서 생성된 어플리케이션 폴더를 열어줌

 

6) 터미널에 npm start를 입력

development server(개발용 서버)를 만들게 되며 자동으로 브라우저가 열립니다.

 

7) src 폴더 안에 App.js와 index.js 파일만 남기고 나머지는 삭제

 

8) App.js

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
    </div>
  );
}

export default App;

 

9) 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")
);

 

Module을 이용하여 style 적용

// 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 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;

// Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
    return <button className={styles.btn}>{text}</button>;
    
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
}

export default Button;

// Button.module.css

.btn {
    color: white;
    background-color: tomato;
}

// App.module.css

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

 

module을 이용하여 css를 적용하게 되면, className에 해당 모듈의 클래스명이 랜덤으로 지정되어 각 요소마다 다른 style을 적용할 수 있게 됩니다.