반응형
create-react-app으로 설정하기
프로젝트 생성
yarn create react-app react-example
yarn이 설치되어있지 않다면 아래 명령어로 설치
npm install -g yarn직접 설정하기
package.json 파일 추가
{
"name": "react-example",
"version": "1.0.0",
"description": "",
"author": "",
"license": "ISC",
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --progress --hide-modules --config webpack.build.js"
},
"dependencies": {
"react": "^16.8.6",
"react-addons-update": "^15.6.2",
"react-dom": "^16.8.6"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
webpack.common.js 파일 추가
const glob = require('glob');
module.exports = {
entry: getEntries(),
output: {
path: __dirname,
filename: '[name]/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
}
};
function getEntries() {
let indexPathList = glob.sync('./src/**/index.js');
let entries = {};
if (indexPathList.length === 0) {
throw new Error("index.js 파일이 없습니다.");
}
for (let index in indexPathList) {
let indexPath = indexPathList[index];
let parentPath = indexPath.substring(0, indexPath.lastIndexOf("/"));
parentPath = parentPath.replace("/src", "/resources");
entries[parentPath] = indexPath;
}
return entries;
}
webpack.dev.js 파일 추가
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = Object.assign(common, {
devServer: {
hot: true,
historyApiFallback: true,
noInfo: true,
overlay: true,
port: 8080,
//contentBase: __dirname + "/resources/" // index.js 파일 경로
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
webpack.build.js 파일 추가
const webpack = require('webpack');
const common = require('./webpack.common.js');
module.exports = Object.assign(common, {
plugins : [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
comporess: {
warnings: false
}
})
]
});
index.html 파일 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="/resources/example/bundle.js"></script>
</body>
</html>
index.js 파일 추가
- 경로 : <프로젝트>/src/example/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App/>,
document.getElementById('root')
);
App.js 파일 추가
- 경로 : <프로젝트>/src/example/App.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const propTypes = {
};
const defaultProps = {
};
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Hi</div>
);
}
};
App.propTypes = propTypes;
App.defaultProps = defaultProps;
export default App;
모듈 설치 & 실행
npm install
npm run dev
접속 및 확인
반응형
'Development > React' 카테고리의 다른 글
| [React] Hooks (0) | 2019.05.15 |
|---|---|
| [React] MobX (0) | 2019.05.14 |
| [React] Redux (0) | 2019.05.14 |
| [React] 기본 문법 (0) | 2019.05.05 |
| [React] Visual Studio Code 설정 (0) | 2019.05.05 |