├── .babelrc
├── .gitignore
├── README.md
├── config
└── webpack.config.js
├── package.json
├── postcss.config.js
├── public
└── index.html
├── src
├── App.css
├── App.js
├── index.js
└── vp.png
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-skeleton-2018
2 |
3 | 2018년에 Babel7 과 Webpack 4 를 사용해서 리액트 프로젝트를 0부터 만든다면?
4 |
5 | 차근차근 해봅시다. 어렵지 않아요.
6 |
7 | ## 1. 디렉토리 생성
8 |
9 | ```
10 | $ mkdir react-skeleton-2018
11 | $ cd react-skeleton-2018
12 | $ yarn init
13 | ```
14 |
15 | ## 2. 웹팩 설치
16 |
17 | ```
18 | $ yarn add --dev webpack webpack-cli
19 | ```
20 |
21 |
22 | ## 3. babel 관련 모듈 설치
23 | ```
24 | $ yarn add --dev @babel/core babel-loader @babel/preset-env @babel/preset-react
25 | ```
26 |
27 | ## 4. .babelrc 파일 생성
28 | ```json
29 | {
30 | "presets": ["@babel/preset-env", "@babel/preset-react"]
31 | }
32 | ```
33 |
34 | ## 5. webpack.config.js 작성
35 |
36 | #### config/webpack.config.js
37 | ```javascript
38 | module.exports = {
39 | module: {
40 | rules: [
41 | {
42 | test: /\.js$/,
43 | exclude: /node_modules/,
44 | use: {
45 | loader: 'babel-loader'
46 | }
47 | }
48 | ]
49 | }
50 | };
51 | ```
52 |
53 | ## 6. scripts 추가
54 | #### package.json
55 | ```
56 | "scripts": {
57 | "build": "webpack --mode production --config ./config/webpack.config.js"
58 | }
59 | ```
60 |
61 | ## 7. 리액트 라이브러리 설치
62 | ```
63 | $ yarn add react react-dom
64 | ```
65 |
66 | ## 8. 컴포넌트 만들기
67 | #### src/App.js
68 | ```javascript
69 | import React from 'react';
70 |
71 | const App = () => {
72 | return (
73 |
74 |
React Skeleton 2018
75 |
되게 달라졌다...
76 |