React
React Boilerplate [React + Babel + Webpack]

Konfiguracja projektu

Potrzebujesz menedżera pakietów Node, aby zainstalować zależności projektu. Pobierz węzeł dla swojego systemu operacyjnego z Nodejs.org . Menedżer pakietów węzłów jest dostarczany z węzłem.

Możesz także użyć Menedżera wersji węzła, aby lepiej zarządzać wersjami węzła i npm. Doskonale nadaje się do testowania projektu w różnych wersjach węzłów. Nie jest to jednak zalecane w środowisku produkcyjnym.

Po zainstalowaniu węzła w systemie, śmiało zainstaluj kilka niezbędnych pakietów, aby odpalić swój pierwszy projekt React przy użyciu Babel i Webpack.

Zanim zaczniemy wydawać polecenia w terminalu. Zobacz, do czego służą Babel i Webpack .

Możesz rozpocząć projekt, uruchamiając npm init w swoim terminalu. Postępuj zgodnie z wstępną konfiguracją. Następnie uruchom następujące polecenia w swoim terminalu

Zależności:

npm install react react-dom --save

Zależności programistów:

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

Opcjonalne zależności programistyczne:

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

Możesz odwołać się do tego przykładowego pliku package.json

Utwórz .babelrc w katalogu głównym projektu z następującą zawartością:

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

Opcjonalnie utwórz .eslintrc w katalogu głównym projektu z następującą zawartością:

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

Utwórz plik .gitignore , aby uniemożliwić przesyłanie wygenerowanych plików do repozytorium git.

node_modules
npm-debug.log
.DS_Store
dist

Utwórz plik webpack.config.js o następującej minimalnej zawartości.

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')
    }]
  }
};

Na koniec utwórz plik sever.js , aby móc uruchomić npm start , z następującą zawartością:

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/');
});

Utwórz plik src/app.js , aby zobaczyć, jak Twój projekt React coś robi.

import React, { Component } from 'react';

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

Uruchom node server.js lub npm start w terminalu, jeśli zdefiniowałeś, co oznacza start w package.json

projekt React-Starter

O tym projekcie

To prosty projekt płyty kotłowej. Ten post poprowadzi cię do konfiguracji środowiska dla ReactJs + Webpack + Bable.

Zacznijmy

będziemy potrzebować menedżera pakietów węzłów do uruchomienia serwera ekspresowego i zarządzania zależnościami w całym projekcie. Jeśli jesteś nowym menedżerem pakietów węzłów, możesz to sprawdzić tutaj . Uwaga: wymagana jest tutaj instalacja menedżera pakietów węzłów.

Utwórz folder o odpowiedniej nazwie i przejdź do niego z terminala lub za pomocą GUI. Następnie przejdź do terminala i wpisz npm init , utworzy to plik package.json, nic strasznego, zadaje ci kilka pytań, takich jak nazwa twojego projektu, wersja, opis, punkt wejścia, repozytorium git, autor, licencja itp. Tutaj punkt wejścia jest ważny, ponieważ węzeł początkowo będzie go szukał po uruchomieniu projektu. Na koniec poprosi Cię o zweryfikowanie podanych informacji. Możesz wpisać „ tak” lub zmodyfikować. Cóż, to wszystko, nasz plik package.json jest gotowy.

Ekspresowa konfiguracja serwera uruchom npm install express @ 4 --save . To są wszystkie zależności, których potrzebowaliśmy dla tego projektu. Tutaj ważna jest flaga zapisu, bez niej plik package.js nie zostanie zaktualizowany. Głównym zadaniem pliku package.json jest przechowywanie listy zależności. Dodaje ekspresową wersję 4. Twój pakiet.json będzie wyglądał jak "dependencies": { "express": "^4.13.4", ............. },

Po zakończeniu pobierania możesz zobaczyć, że jest folder i węzeł node_modules naszych zależności. Teraz w katalogu głównym projektu utwórz nowy plik server.js . Teraz ustawiamy serwer ekspresowy. Pominę cały kod i wyjaśnię go później.

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 = wymagany („ekspresowy”); da ci to dostęp do całego ekspresowego interfejsu API.

var app = express (); wywoła bibliotekę ekspresową jako funkcję. app.use (); pozwól, aby dodać funkcjonalność do Twojej aplikacji ekspresowej. app.use (express.static („public”)); określi nazwę folderu, która zostanie ujawniona na naszym serwerze internetowym. app.listen (port, funkcja () {}) będzie tutaj naszym portem będzie 3000, a funkcja, którą wywołujemy, sprawdzi, czy serwer WWW działa poprawnie. To jest serwer ekspresowy jest skonfigurowany.

Teraz przejdź do naszego projektu i utwórz nowy folder publiczny i utwórz plik index.html . index.html jest domyślnym plikiem dla twojej aplikacji i serwer Express będzie szukał tego pliku. Indeks.html to prosty plik HTML, który wygląda

<!DOCTYPE html>
<html>

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

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

</html>

I przejdź do ścieżki projektu przez terminal i wpisz node server.js . Następnie zobaczysz * console.log („Serwer Express używa portu: 3000”); *.

Przejdź do przeglądarki i wpisz http: // localhost: 3000 w pasku nawigacyjnym zobaczysz witaj świecie .

Teraz przejdź do folderu publicznego i utwórz nowy plik app.jsx . JSX jest krokiem preprocesora, który dodaje składnię XML do JavaScript. Zdecydowanie możesz użyć React bez JSX, ale JSX sprawia, że React jest o wiele bardziej elegancki. Oto przykładowy kod dla app.jsx

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

Teraz przejdź do index.html i zmodyfikuj kod, powinien on wyglądać następująco

<!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>

Mając to wszystko gotowe, mam nadzieję, że uznasz to za proste.