React
React Boilerplate [React + Babel + Webpack]

Impostazione del progetto

È necessario Node Package Manager per installare le dipendenze del progetto. Scarica il nodo per il tuo sistema operativo da Nodejs.org . Node Package Manager viene fornito con nodo.

È inoltre possibile utilizzare Node Version Manager per gestire meglio le versioni di nodo e npm. È ottimo per testare il tuo progetto su diverse versioni di nodi. Tuttavia, non è raccomandato per l'ambiente di produzione.

Una volta installato il nodo sul tuo sistema, vai avanti e installa alcuni pacchetti essenziali per far esplodere il tuo primo progetto React usando Babel e Webpack.

Prima di iniziare effettivamente a premere i comandi nel terminale. Dai un'occhiata a cosa sono usati Babel e Webpack .

Puoi avviare il tuo progetto eseguendo npm init nel tuo terminale. Segui la configurazione iniziale. Successivamente, esegui i seguenti comandi nel tuo terminale-

dipendenze:

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

Dipendenze Dev opzionali:

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

Si può fare riferimento a questo esempio di pacchetto.json

Crea .babelrc nella root del tuo progetto con i seguenti contenuti:

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

Se lo .eslintrc crea .eslintrc nella root del tuo progetto con i seguenti contenuti:

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

Crea un file .gitignore per impedire il caricamento dei file generati sul tuo repository git.

node_modules
npm-debug.log
.DS_Store
dist

Creare il file webpack.config.js con i seguenti contenuti minimi.

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

E infine, creare un file sever.js per poter avviare npm start , con i seguenti contenuti:

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

Crea il file src/app.js per vedere come fa il tuo progetto React.

import React, { Component } from 'react';

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

Esegui il node server.js o npm start dal terminale, se hai definito il significato di start nel tuo package.json

progetto di avviamento reattivo

Informazioni su questo progetto

Questo è un semplice progetto di caldaia. Questo post ti guiderà a configurare l'ambiente per ReactJs + Webpack + Bable.

Iniziamo

avremo bisogno del gestore dei pacchetti del nodo per attivare il server Express e gestire le dipendenze in tutto il progetto. se sei nuovo nel gestore dei pacchetti del nodo, puoi controllare qui . Nota: l'installazione del gestore pacchetti nodo è richiesta qui.

Crea una cartella con un nome adatto e naviga dal terminale o dalla GUI. Quindi vai al terminale e digita npm init questo creerà un file package.json, Niente di spaventoso, ti farà poche domande come nome del tuo progetto, versione, descrizione, punto di ingresso, repository git, autore, licenza ecc. Qui il punto di ingresso è importante perché inizialmente il nodo lo cercherà quando si esegue il progetto. Alla fine ti chiederà di verificare le informazioni che fornisci. Puoi digitare sì o modificarlo. Bene, il nostro file package.json è pronto.

Configurazione del server Express eseguire npm install express @ 4 --save . Queste sono tutte le dipendenze necessarie per questo progetto. Il flag di salvataggio è importante, senza che il file package.js non venga aggiornato. L'attività principale di package.json è di memorizzare l'elenco delle dipendenze. Aggiungerà Express versione 4. Il tuo pacchetto.json avrà l'aspetto di "dependencies": { "express": "^4.13.4", ............. },

Dopo il download completo puoi vedere che c'è la cartella node_modules e la sottocartella delle nostre dipendenze. Ora nella radice del progetto crea un nuovo file file server.js . Ora stiamo impostando il server express. Ho intenzione di superare tutto il codice e spiegarlo in seguito.

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'); questo ti darà l'accesso di tutta la Express API.

var app = express (); chiamerà la libreria espressa come funzione. app.use (); lascia che aggiunga la funzionalità alla tua applicazione Express. app.use (express.static ( 'pubblico')); specificherà il nome della cartella che verrà esposta nel nostro server web. app.listen (port, function () {}) qui la nostra porta sarà 3000 e la funzione che stiamo chiamando verificherà che il web server stia funzionando correttamente. Ecco che è configurato il server express.

Ora vai al nostro progetto e crea una nuova cartella pubblica e crea il file index.html . index.html è il file predefinito per l'applicazione e il server Express cercherà questo file. Index.html è un semplice file html che sembra

<!DOCTYPE html>
<html>

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

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

</html>

Andare al percorso del progetto attraverso il terminale e digitare node server.js . Quindi vedrai * console.log ('Il server Express usa la porta: 3000'); *.

Vai al browser e digita http: // localhost: 3000 nella barra di navigazione vedrai ciao Mondo .

Ora vai nella cartella pubblica e crea un nuovo file app.jsx . JSX è un passo del preprocessore che aggiunge la sintassi XML al tuo JavaScript. Puoi sicuramente usare React senza JSX, ma JSX rende React molto più elegante. Ecco il codice di esempio per app.jsx

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

Ora vai su index.html e modifica il codice, dovrebbe assomigliare a questo

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

Con questo in atto hai finito, spero che tu lo trovi semplice.