-
<REACT>[Hello React]Flower in my dev/React 2017. 12. 20. 10:58
[Hello React]
*velopert 님의 유투브 강의를 듣고 작성하였습니다.
1. nodejs와 npm 버전확인
node -v
npm -v
2. 프로젝트 디렉토리 생성
mkdir hello_react
cd hello_react
3. 프로젝트 디렉토리를 초기화
npm init
(설정은 필요 없이 모두 Enter로 넘어간다.)
4. 초기화 후 package.json 확인
12345678910111213{"name": "hello_react","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev-server": "webpack-dev-server"},"author": "","license": "ISC"},}cs 5. node_modules 설치
npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
npm install --save-dev react-hot-loader webpack webpack-dev-server
6. node_modules 설치 후 package.json 확인
123456789101112131415161718192021222324{"name": "hello_react","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"react": "^16.2.0","react-dom": "^16.2.0"},"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","react-hot-loader": "^3.1.3","webpack": "^3.10.0","webpack-dev-server": "^2.9.7"}}cs 8. 소스 디렉토리 생성
mkdir public
mkdir -p src/components
9. 서버 설정파일 & 소스코드 작성
vi webpack.config.js
123456789101112131415161718192021222324252627282930313233343536var webpack = require('webpack');module.exports = {entry: './src/index.js',output: {path: __dirname + '/public/',filename: 'bundle.js'},devServer: {hot: true,inline: true,host:'0.0.0.0',port: 9090,contentBase: __dirname + '/public/',},module: {loaders: [{test:/\.js$/,loader: 'babel-loader',exclude: /node_modules/,query: {cacheDirectory: true,presets: ['es2015', 'react']}}]},plugins: [new webpack.HotModuleReplacementPlugin()]}cs vi public/index.html
123456789101112<!DOCTYPE html><html><head><meta charset="UTF-8"><title>React App</title></head><body><div id="root"></div><script type="text/javascript" src="bundle.js"></script></body></html>cs vi src/components/App.js
1234567891011import React from 'react';class App extends React.Component {render() {return (<h1>Hello React</h1>);}}export default App;cs vi src.index.js
123456import React from 'react';import ReactDOM from 'react-dom';import App from './components/App';const rootElement = document.getElementById('root');ReactDOM.render(<App/>, rootElement);cs vi .jshintrc
123{"esversion": 6}cs 10. 디렉토리 구조 by Pycharm
11. package.json에 서버 설정&서버 실행
12345678910111213141516171819202122232425{"name": "hello_react","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev-server": "webpack-dev-server"},"author": "","license": "ISC","dependencies": {"react": "^16.2.0","react-dom": "^16.2.0"},"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","react-hot-loader": "^3.1.3","webpack": "^3.10.0","webpack-dev-server": "^2.9.7"}}cs npm run dev-server
12. 결과 확인
'Flower in my dev > React' 카테고리의 다른 글
<NODE>[라즈베리파이 node&npm 업그레이드] (0) 2017.12.17