React
React Boilerplate [반응 + 바벨 + Webpack]

프로젝트 설정

프로젝트 종속성을 설치하려면 노드 패키지 관리자가 필요합니다. Nodejs.org 에서 운영 체제 용 노드를 다운로드하십시오. 노드 패키지 관리자는 노드와 함께 제공됩니다.

노드 버전 관리자 를 사용하여 노드 및 npm 버전을보다 잘 관리 할 수도 있습니다. 다른 노드 버전에서 프로젝트를 테스트하는 데 적합합니다. 그러나 프로덕션 환경에는 권장되지 않습니다.

시스템에 노드를 설치했으면 바벨과 웹팩을 사용하여 첫 번째 React 프로젝트를 시작하기 위해 필수 패키지를 설치하십시오.

실제로 터미널에서 명령을 시작하기 전에 Babel 과 Webpack 이 사용되는 것을보십시오.

터미널에서 npm init 을 실행하여 프로젝트를 시작할 수 있습니다. 초기 설정을 따릅니다. 그 후에 터미널에서 다음 명령을 실행하십시오.

종속성 :

npm install react react-dom --save

Dev Dependecies :

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev

Optional Dev 종속 관계 :

npm install eslint eslint-plugin-react babel-eslint --save-dev

이 샘플 package.json을 참조 할 수 있습니다.

다음 내용으로 프로젝트 루트에 .babelrc 를 만듭니다.

{
  "presets": ["es2015", "stage-0", "react"]
}

선택적으로 다음 내용으로 프로젝트 루트에 .eslintrc 를 만듭니다.

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
  },
  "plugins": [
    "react"
  ]
}

생성 된 파일을 git repo에 업로드하지 못하도록 .gitignore 파일을 만듭니다.

node_modules
npm-debug.log
.DS_Store
dist

최소한의 내용으로 webpack.config.js 파일을 작성하십시오.

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

마지막으로 다음 내용으로 npm start 를 실행할 수 있도록 sever.js 파일을 만듭니다.

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Serving your awesome project at http://localhost:3000/');
});

React 프로젝트가 어떤 일을하는지보기 위해 src/app.js 파일을 만든다.

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world.</h1>
    );
  }
}

package.json 에서 start 가 의미하는 것을 정의한 경우 터미널에서 node server.js 또는 npm start node server.js 실행하십시오.

반응 - 시동기 프로젝트

이 프로젝트 정보

이것은 단순한 상용구 프로젝트입니다. 이 글은 ReactJs + Webpack + Bable의 환경을 설정하도록 안내 할 것입니다.

시작하자

우리는 급습 서버를위한 노드 패키지 관리자를 필요로하고 프로젝트 전체의 의존성을 관리 할 것입니다. 노드 패키지 관리자를 처음 사용하는 경우 여기 에서 확인할 수 있습니다 . 주 : 노드 패키지 관리자 설치는 여기에 필요합니다.

적절한 이름으로 폴더를 만들고 터미널이나 GUI를 통해 폴더를 탐색하십시오. 터미널로 이동하여 npm init 입력하면 package.json 파일이 생성됩니다. 무서운 것은 아닙니다. 프로젝트 이름, 버전, 설명, 진입 점, git 저장소, 작성자, 라이센스 등이 있습니다.이 항목은 프로젝트를 실행할 때 노드가 초기에 찾도록하기 때문에 중요합니다. 마지막에 귀하가 제공 한 정보를 확인하도록 요청할 것입니다. 예 를 입력하거나 수정할 수 있습니다. 자, 우리 패키지 .json 파일이 준비되었습니다.

Express 서버 설정 npm install express @ 4 - save를 실행 하십시오 . 이것은 우리가이 프로젝트에 필요한 모든 의존성입니다. 여기에 세이브 플래그가 중요합니다. package.js 파일은 업데이트되지 않습니다. package.json의 주요 작업은 종속성 목록을 저장하는 것입니다. 익스프레스 버전 4를 추가합니다. package.json 은 "dependencies": { "express": "^4.13.4", ............. }, 처럼 보입니다 "dependencies": { "express": "^4.13.4", ............. },

완전한 다운로드가 끝나면 node_modules 폴더와 하위 폴더가 있음을 알 수 있습니다. 이제 프로젝트의 루트에서 새 파일 server.js 파일을 만듭니다. 이제 우리는 고속 서버를 설정하고 있습니다. 나는 모든 코드를 끝내고 나중에 설명 할 것이다.

var express = require('express');
// Create our app
var app = express();

app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is using port:3000');
});

var express = require ( 'express'); 이것은 당신에게 전체 익스프레스 api의 액세스를 제공합니다.

var app = express (); 익스프레스 라이브러리를 기능으로 호출합니다. app.use (); 익스프레스 애플리케이션에 기능을 추가하십시오. app.use (express.static ( 'public'))); 웹 서버에 노출 될 폴더 이름을 지정합니다. app.listen (port, function () {}) 여기에 우리의 포트는 3000 이 될 것이고 우리가 호출하는 함수는 웹 서버가 제대로 작동하는지 확인합니다. 그것은 바로 express 서버입니다.

이제 우리 프로젝트로 가서 public 폴더를 새로 만들고 index.html 파일을 만듭니다. index.html 은 사용자의 기본 파일이며 Express 서버는이 파일을 찾습니다. index.html 은 간단한 html 파일입니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
</head>

<body>
  <h1>hello World</h1>
</body>

</html>

터미널을 통해 프로젝트 경로로 이동하여 node server.js를 입력 하십시오 . 그러면 * console.log ( 'Express server is port : 3000'); *가 표시됩니다.

브라우저로 이동하여 탐색 모음에 http : // localhost : 3000 을 입력하면 hello World 가 표시됩니다.

이제 공용 폴더 내부로 이동하여 app.jsx 파일을 새로 만듭니다. JSX는 자바 스크립트에 XML 구문을 추가하는 전처리 단계입니다. JSX없이 React를 사용할 수는 있지만 JSX는 React를 훨씬 더 우아하게 만듭니다. app.jsx 의 샘플 코드는 다음과 같습니다.

ReactDOM.render(
  <h1>Hello World!!!</h1>,
  document.getElementById('app')
);

이제 index.html 로 이동하여 코드를 수정하십시오.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23                                              /browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">                           </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js">    </script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

이 자리에서 당신은 모두 끝났습니다. 당신이 그것을 간단하게 찾길 바랍니다.