01.3 - React 프로젝트 시작하기

React.js

01.3. React 프로젝트 시작하기

01.3.1 create-react-app을 이용한 프로젝트 생성

프로젝트 생성

$ create-react-app [PROJECT_NAME]

프로젝트 실행

$ yarn start

http://localhost:3000/
에서 확인을 할 수 있다.

01.3.2 CSS Module 및 Sass 적용

프로젝트 생성 후 CSS Module 및 Sass 적용을 한다.

$ cd [PROJECT_NAME]
$ yarn eject
$ yarn add sass-loader node-sass classnames

※ src/index.css 파일을 먼저 삭제 한다.

webpack 설정 파일 수정

    // config/webpack.config.js 파일
    // sass-loader 추가
    // loader: require.resolve('css-loader'), 이 있는 부분에 추가
    {
        loader: require.resolve('css-loader'),
        options: cssOptions,
    },
    {
        ...
    },
    {
        loader: require.resolve('sass-loader'),
        options: {
            includePaths: [paths.styles]
        },
    },

path.js 파일 수정

// config/path.js 파일
...
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
// style 적용
styles: resolveApp('src/styles')

open-color 적용
npm 명령어를 이용해 open-color을 설치한다

$ yarn add open-color

// src 폴더 하위에 
// styles 폴더를 생성한다.
// utils.scss 파일을 생성 후 아래 코드를 입력한다.
@import '~open-color/open-color';

// src/styles 폴더 하위에 
// main.css 파일을 생성 후 아래 코드를 입력한다.
@import 'utils';

body {
    background: $oc-gray-1;
    margin: 0px;
}

scr/index.js 파일 수정

import React from 'react';
import ReactDOM from 'react-dom';

// 상단에서 생성한 스타일 적용
import './styles/main.css';
// 생성할 component 파일
import App from './component/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

이제 컴포넌트를 생성하고 프로젝트 서버를 시작한다.

// src 폴더 하위에
// component 폴더를 생성한다
// App.js 파일을 생성 후 아래 코드를 입력한다.
import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                React 시작하기
            </div>
        );
    }
}

export default App;

프로젝트 서버 시작

$ yarn start

회색화면이 보인다면 이제 React를 본격적으로 공부할 준비가 되었다.