https://github.com/velopert/react-skeleton-2018
리액트 프로젝트 설정을 0부터 해보자.
https://github.com/velopert/react-skeleton-2018
Last synced: about 1 year ago
JSON representation
리액트 프로젝트 설정을 0부터 해보자.
- Host: GitHub
- URL: https://github.com/velopert/react-skeleton-2018
- Owner: velopert
- Created: 2018-08-31T23:33:20.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-31T23:35:23.000Z (almost 8 years ago)
- Last Synced: 2025-03-17T19:39:22.122Z (about 1 year ago)
- Language: JavaScript
- Size: 64.5 KB
- Stars: 50
- Watchers: 5
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-skeleton-2018
2018년에 Babel7 과 Webpack 4 를 사용해서 리액트 프로젝트를 0부터 만든다면?
차근차근 해봅시다. 어렵지 않아요.
## 1. 디렉토리 생성
```
$ mkdir react-skeleton-2018
$ cd react-skeleton-2018
$ yarn init
```
## 2. 웹팩 설치
```
$ yarn add --dev webpack webpack-cli
```
## 3. babel 관련 모듈 설치
```
$ yarn add --dev @babel/core babel-loader @babel/preset-env @babel/preset-react
```
## 4. .babelrc 파일 생성
```json
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
## 5. webpack.config.js 작성
#### config/webpack.config.js
```javascript
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
```
## 6. scripts 추가
#### package.json
```
"scripts": {
"build": "webpack --mode production --config ./config/webpack.config.js"
}
```
## 7. 리액트 라이브러리 설치
```
$ yarn add react react-dom
```
## 8. 컴포넌트 만들기
#### src/App.js
```javascript
import React from 'react';
const App = () => {
return (
React Skeleton 2018
되게 달라졌다...
);
};
export default App;
```
## 9. 엔트리 파일 (index.js) 작성
#### src/index.js
```javascript
import App from './App';
import ReactDOM from 'react-dom';
import React from 'react';
const rootEl = document.getElementById('root');
ReactDOM.render(, rootEl);
```
## 10. html 파일 작성
#### public/index.html
```html
React Skeleton 2018