ReactJS - Sequencial of ReactJS environment setting 환경설정 순서
NodeJS and NPM
NodeJS는 ReactJS 개발을 위해 필요한 platform이다.
windows: NodeJS downloads [바로가기]
ubuntu : NodeJS downloads [바로가기]
macOS : NodeJS downloads [바로가기]
NPM 과 Yarn 은 NodeJS packages를 위한 페키지 관리자 이다.
NPM프로그램은 NodeJS설치시에 같이 설치 되어지며,
NPM읗 통해서 Yarn을 설치 할 수 있다
~>npm install -g yarn
수동 환경설정 순서
1. Create the Root Folder
명령어 프롬프트 창에서 루트 폴더를 만든 다음 그 폴더로 이동해서 npm init명령을 이용해서 package.json이라는 빈파일을 생성한다.
~$mkdir reactApp
~/reactApp$cd reactApp
~/reactApp$npm init
2. Install Global Packages
~/reactApp$npm install -g babel
~/reactApp$npm install -g babel-cli
3. Add Dependencies and Plugins
webpack bundler를 사용할 것이다. webpack and webpack-dev-server를 설치하자.
~/reactApp$npm install webpack --save
~/reactApp$npm install webpack-cli --save-dev
~/reactApp$npm install webpack-dev-server --save
React를 사용하기 위해 설치를 하는데, --save 옵션으로 설치하면 해당 packages의 package.json파일에 추가된다.
~/reactApp$npm install react --save
~/reactApp$npm install react-dom --save
JSX Transpiler인 babel plugins를 설치하자.
~/reactApp$npm install babel-core
~/reactApp$npm install babel-loader
~/reactApp$npm install babel-preset-react
~/reactApp$npm install babel-preset-es2015
4. Create the Files
필수 파일들을 만들어 보자
~/reactApp$touch index.html
~/reactApp$touch App.jsx
~/reactApp$touch main.js
~/reactApp$touch webpack.config.js
이런 방법으로도 필수 파일을 만들 수 있다.
~/reactApp$type >index.html
~/reactApp$type >App.jsx
~/reactApp$type >main.js
~/reactApp$type >webpack.config.js
5. Set Conpiler, Server and Loaders
webpack.config.js파일을 열고 다음 내용을 추가하자. webpack 시작점을 main.js로 할것이다. 출력은 bundled된 앱이 게재 될 장소(index.html)이다. 개발서버 포트는 지금은 3000으로 하는데 원하는 것으로 변경가능하다.마지막으로 js파일을 찾아줄 babel loeaders를 설정하는 데 이전에 설치한 ᅟes2015와 react 프리셋을 사용할 것이다.
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
package.json파일을 열고 scripts 오브젝트 안에 "test": "echo \ "Error ......"라인을 삭제하고 아래와 같은 내용으로 교체합니다.
"start": "webpack-dev-server --hot"
위의 내용을 실행하려면 webpack-dev-server가 필요합니다. 다음과 같이 설치합니다.
~/reactApp/sudo npm install webpack-dev-server -g
6. index.html
div id = "app"를 앱의 루트 요소로 설정하고 번들 패키지 파일인 index.js스크립트를 추가 합니다.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
7. App.jsx and main.js
첫번째 React componet를 만들어보자. 이 component는 "Hello World!!!"를 render할 것이다.
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
위의 component를 main.js로 import하여서 루트 App요소를 render 하여야 브라우저에서 볼 수 있다.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
Note - 다른 파일의 componet를 사용하려면 우선 import하고, 다른 곳에서 사용하게 하려면 우선 export해주어야 사용하려는 곳에서 impot할 수 있다.
8. Running thr Server
Setup을 마치고 다음 명령으로 서버를 시작 시킬 수 있다.
~reactApp/npm start
원문 문서가 작성된지 오래되어서 각 모듈들의 버전이 일치하지 않아 오류가 많이 난다.
버전을 구버전으로 나추어서 할 수도 있으나 여기까지 ReactJS프로젝트의 구조를 이해 하는 것으로 마치고
다음 문서부터는 ReactJS공식 사이트에서 최신 버전인 Create-react-app 을 가지고 학습해 보겠다.
원문: ReactJS_turorial을 중요 포인트만 번역한 것입니다.
| Previous Page | Next Page |
주요 용어 설명
'my_lesson > _ReactJS' 카테고리의 다른 글
| React-router - Add Route in route (double route) (0) | 2018.04.11 |
|---|---|
| React-router - Add URL Parameter (0) | 2018.04.11 |
| React-router - Add Router & Link (0) | 2018.04.10 |
| ReactJS - Add React to a New Application (0) | 2018.04.03 |
| ReactJS - What is ReactJS ReactJS는 무엇인가? (0) | 2018.04.01 |
댓글