CRA(Create rReact App)

CRA(Create React App)

CRA는 일종의 Configuration base로 처음부터 웹팩을 작업 하기에는 시간이 많이 걸리기 때문에 사용한다.

CRA를 사용하기 위해서 글로벌로 추가해준다.

yarn global add create-react-app

그 다음 아래의 명령어로 앱을 만들어 주면 된다.

create-react-app MyApp

자신이 만든 앱으로 이동해서 yarn start를 해 주면 CRA을 성공적으로 생성한 것이다.

yarn start

module

먼저 scss를 CRA에서 사용하기 위해서는 아래 명령을 터미널에서 실행시켜 준다.

yarn add node-sass sass-loader

이제 module에 대해서 설명해 보겠다. scss에서 module을 사용하면 클래스명을 랜덤으로 지정해 주기 때문에 클래스 명이 중복될 걱정을 하지 않아도 된다.

사용법은 원래 파일 명이 App.scss 였다면 App.module.scss로 바꿔주고 사용하면 된다.

App.js

import React, { Component } from 'react';

import logo from './logo.svg';

import styles from './App.module.scss';

class App extends Component {

render() {

return (

<div className={styles.App}>

<header className={styles.appHeader}>

<img src={logo} className={styles.appLogo} alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className={styles.appLink}

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Exiting

</a>

</header>

</div>

);

}

}

export default App;

App.module.scss

$bg-color: yellow;

.App {

text-align: center;

}

.appLogo {

animation: App-logo-spin infinite 20s linear;

height: 40vmin;

}

.appHeader {

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;

}

.appLink {

color: $bg-color;

}

@keyframes App-logo-spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

eject

yarn eject시에 아래와 같은 오류가 발생한다면 yarn add babel-loader, yarn add @babel/core을 해 준다.

Error: [BABEL] /Users/ElohimAwmar/projects/practice/react/frontend/src/index.js: Cannot find module '@babel/plugin-transform-react-jsx' (While processing: "/Users/ElohimAwmar/projects/practice/react/frontend/node_modules/babel-preset-react-app/index.js$1") at Array.reduce ()