티스토리 뷰

Programming language/Reactjs

React.js 시작하기

hello-world 2016. 8. 10. 19:09
728x90
반응형

React.js 시작하기.



환경설정.


-IDE 선정.

 sublime Text or Webstorm 


-webpack ( node.js 설치 가정하에 진행 - 설치가 안되어 있다면 node.js 설치하자. )

1. 프로젝트 폴더 생성>터미널에서 해당 프로젝트 폴더로 이동

2.터미널에서 npm init

3.터미널에서 npm install --save-dev webpack@1.13.1 ( 정적파일제공 )

   정적파일이 아닌 소스파일을 수정하면 자동으로 브라우저를 새로 고치는 개발 서버는 아래와 같이 하자.

    npm install --save-dev webpack-dev-server@1.14.1

3.프로젝트 폴더 root경로에 webpack.config.js 생성시킴. ( 맥 터미널에서 touch webpack.config.js )


4.프로젝트 폴더 root경로에 package.json 파일 열고 아래와 같이 scripts 섹션을 수정하자.

   ( 나중에 개발 빌드 할때 간편히 터미널에서 npm run dev 입력만으로 실행하려고 하는 것이다. )

{
  "name": "comp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server --progress",  //개발모드
    "build": "node_modules/.bin/webpack --config webpack.config.js -p" //배포모드
  },
  // ...............................중략.................................
}


4. 생성했던 webpack.config.js를 설정하기

폴더 구조는 아래와 같이 구성될 것이다. ( node_modules - npm으로 파일 설치시 생성되는 모듈 파일 모음이다.)


프로젝트폴더

 -app

     -css

         -common.css

     -js

         -app.js

-node_modules

-public

     -index.html

package.json

webpack.config.js



   - 추가적으로 css 로드를 위해서
     npm install --save style-loader css-loader




webpack.config.js


해당 소스는 1.x 버전대의 웹팩이기에 버전업된 웹팩을 쓴다면 아래 url을 보고 참고하여 수정하면 될 듯 하다.

https://webpack.js.org/guides/migrating/#resolve-root-resolve-fallback-resolve-modulesdirectories

var webpack = require('webpack');
module.exports= {
    // 개발툴에서 소스 확인가능~
    devtool: '#inline-source-map',
     //개발 진입점 설정( __dirname 은 현재 실행한 파일의 경로를 뜻한다. )
    entry: __dirname + "/app/js/app.js",
    // 최종 산출 파일 설정.
    output: {
        // 산출 파일 경로
        path: __dirname + "/public",
        // 산출 파일 이름 지정
        filename: "bundle.js"
    },
    // 가상 개발 서버 설정
    devServer:{
       // 컨텐츠 경로
        contentBase: "./public",
        colors: false,
        historyApiFallback: true,
        inline: true,
        // 포트 설정.
        port: 8090
    },
    resolve: {
        extensions: ['', '.js', '.css']
    },
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
              //바벨 로더 및 react 설정
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            },
            /* css 로드 */
            {
                test:/\.css$/,
                loaders: ['style', 'css'] 
                 // loader:'style-loader!css-loader' // 이렇게 한줄로 해도 된다. 
                /* 
                  아래같은 방법도 있으나 [path]___[name]__[local]___[hash:base64:5] 설정 등으로
                  문자변환땜시 개발자 도구에서 알아 먹기 힘들다. 실제 빌드시에 적용하자.
                 
                   loaders: [
                     'style?sourceMap',
                      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]
                  ]
                 */
            },
            /* Font-Awesome 폰트 없음 제거*/
            { test: /\.(woff2?|svg|jpe?g|png|gif|ico)$/, loader: 'url?limit=10000' },
            { test: /\.(ttf|eot)$/, loader: 'file-loader' }
        ]
    },
    plugins: [
        //압축 경량화
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};


-babel 설치

   npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react


-react 설치

  npm install --save react react-dom



기본 작성법.

- React에서는 컴포넌트의 상태가 변경될 때마다 컴포넌트를 다시 렌더링해야 하므로 컴포넌트의 내부 상태를 최소한으로 유지한다.



app.js

import React, {Component} from 'react';
import ReactDom from 'react-dom';

class App extends Component{
    render() {
        return (
           <h1>Hello world</h1>
    );
    }
}
ReactDom.render(<App />, document.getElementById('appContainer'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../app/css/common.css" rel="stylesheet"/>
</head>
<body>
<div id="appContainer"></div>
<script src="bundle.js"></script>
</body>
</html>

이제 마지막으로 터미널에서 npm run dev 입력하면 실행 될것이다. 

( 참고로 npm run dev 하면 개발 모드라서 bundle.js 는 브라우저상에서만 확인할 수 있다. 

   npm run build 하면 배포 모드라서 실제 bundle.js가 생성되고 

   헤드리스(명령행)에서 merge된 상황 및 용량등을 살펴볼 수 있다. )


npm run dev로 개발모드를 실행 성공하였다면 브라우저를 열어 localhost:8090 을 입력해보면 확인할 수 있다.





마지막으로 터미널에서의 명령어들은 .......걍 외우자 ㅋㅋ


초기 개발 환경 명령어 정리


1. npm init

2.npm install --save-dev webpack@1.13.1 ( 정적파일제공 )  혹은  npm install --save-dev webpack-dev-server@1.14.1

3. npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

4. npm install --save react react-dom

5. npm install --save style-loader css-loader

728x90
반응형
저작자표시 비영리 변경금지

'Programming language > Reactjs' 카테고리의 다른 글

React.StrictMode( Strict 모드 )  (0) 2022.06.09
React 에서 import 시 경로 설정.  (0) 2022.06.08
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 오류  (0) 2022.06.08
React App SDK ? 먼가 초기 설정이 간편해 질듯한~  (0) 2016.08.23
Pro reactjs 요약  (0) 2016.08.12
댓글