CRA (create react app)

[REACT] CRA (create react app)

Create React App은 React 배우기에 간편한 환경이고 새로운 싱글 페이지 애플리케이션이다.
이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주고 좋은 개발 경험과 프로덕션 앱 최적화를 한다.
Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하고 새로운 프로젝트를 만들려면 아래 명령어를 따라가야함.

$npx create-react-app ‘이부분은 만들 폴더명’
**주의
첫 번째 줄의 ‘npx’는 실수가 아니며 npm 5.2+ 버전의 패키지 실행 도구.

$cd ‘만들 폴더명’
$npm start 혹은 yarn start

$ yarn add react-router-dom 

sass/scss 혹은 styled components 중 사용할 css 택 1!

$ yarn add node-sass 혹은
$ yarn add styled-components

브라우져에 있는 css를 무력화하려면...

• sass사용할거라면, style디렉토리만들어서 index.scss & reset.scss만들기
  (media.scss만들어서 반응형해도 좋긴하지만 그건 나중-)

<Reset.scss>

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
  letter-spacing: 1px;
}

* {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  color: inherit;
}

*:focus {
  outline: none;
  border: none;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

textarea {
  resize: none;
}

ul,
h3 {
  padding-inline-start: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
}

• styled-components 로 한다면 reset styled를 설치 한 후 GlobalStyles 파일 만들어서 향후 만들 routes파일에 넣어주기

$ yarn add styled-reset

<GlobalStyles.js>
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const globalStyles = createGlobalStyle`
     ${reset};
     a{
         text-decoration:none;
         color:inherit;
     }
     *{
         box-sizing:border-box;
         outline:none;
     }
     body{
         font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         background-color:rgba(20,20,20,1);
     }
 `;

export default globalStyles;

VS code extension 에서 eslint/ prettier 플러그인 설치 후, prettier설치

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

ESLint 세팅 ; roots 디렉토리에 .eslintrc.json 파일 만들어서 하기 저장

{ "extends": ["react-app", "plugin:prettier/recommended"] }

Prettier 세팅 ; roots 디렉토리에 .prettierrc 파일 만들어서 하기 저장

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

index.js디렉토리에 routes.js파일 만들어서 파일 셋팅

우선 메인만 만들어서 link컴포넌트를 라우터 돔으로 받아와서 로 이동할 수 있는 데 이건 모든 파일을 취합하는 index js에서 추가 설정을 또 해주어야함

//1. Routes.js 

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Main from 'Pages/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Main} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

//Routes.js 

//2. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import './styles/index.scss';
import './styles/reset.scss';

ReactDOM.render(<Routes />, document.getElementById('root'));

// index.js

여기까지하고 $yarn start해서 뜨는지 확인!