React
React Boilerplate [React + Babel + Webpack]

Ställa in projektet

Du behöver Node Package Manager för att installera projektberoenden. Ladda ner nod för ditt operativsystem från Nodejs.org . Node Package Manager kommer med nod.

Du kan också använda Node Version Manager för att bättre hantera dina nod- och npm-versioner. Det är bra för att testa ditt projekt på olika nodversioner. Det rekommenderas dock inte för produktionsmiljö.

När du har installerat nod på ditt system, gå vidare och installera några viktiga paket för att spränga ditt första React-projekt med Babel och Webpack.

Innan vi faktiskt börjar slå kommandon i terminalen. Ta en titt på vad Babel och Webpack används för.

Du kan starta ditt projekt genom att köra npm init i din terminal. Följ den första installationen. Kör sedan efter kommandon i din terminal-

beroenden:

npm install react react-dom --save

Dev-beroende:

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

Valfritt Dev-beroenden:

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

Du kan hänvisa till detta exempelpaket.json

Skapa .babelrc i ditt projektrot med följande innehåll:

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

.eslintrc i ditt projektrot med följande innehåll:

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

Skapa en .gitignore fil för att förhindra överföring av genererade filer till din git repo.

node_modules
npm-debug.log
.DS_Store
dist

Skapa webpack.config.js fil med följande minimiinnehåll.

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

Och slutligen, skapa en sever.js fil för att kunna köra npm start , med följande innehåll:

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

Skapa src/app.js fil för att se ditt React-projekt göra något.

import React, { Component } from 'react';

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

Kör node server.js eller npm start i terminalen, om du har definierat vad start står för i ditt package.json

reagera-startprojekt

Om detta projekt

Detta är ett enkelt projekt med pannplattor. Detta inlägg hjälper dig att ställa in miljön för ReactJs + Webpack + Bable.

Låt oss börja

Vi kommer att behöva nodpaketansvarig för att starta upp expressserver och hantera beroenden under hela projektet. Om du är ny med node pakethanteraren kan du kontrollera här . Obs! Här krävs installation av pakethanteraren av noden.

Skapa en mapp med lämpligt namn och navigera in i den från terminalen eller av GUI. Gå sedan till terminalen och skriv npm init Detta skapar en package.json-fil, inget skrämmande, det kommer att ställa dig några frågor som namnet på ditt projekt, version, beskrivning, ingångspunkt, gitförvar, författare, licens etc. Här är ingångspunkt viktig eftersom nod initialt letar efter den när du kör projektet. I slutet kommer det att be dig att verifiera den information du tillhandahåller. Du kan skriva ja eller ändra det. Det är väl det, vår package.json- fil är klar.

Express-serverinställning kör npm installera express @ 4 - spara . Detta är alla beroenden vi behövde för detta projekt. Här är spara flaggan viktig, utan den package.js- filen kommer inte att uppdateras. Paket.jsons huvuduppgift är att lagra en lista över beroenden. Den kommer att lägga till expressversion 4. Ditt paket.json ser ut som "dependencies": { "express": "^4.13.4", ............. },

Efter fullständig nedladdning kan du se att det finns node_modules mapp och undermapp av våra beroenden. Nu på roten till projektet skapa en ny filserver.js- fil. Nu ställer vi in expressserver. Jag kommer att passera hela koden och förklara den senare.

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 = kräva ('express'); detta ger dig tillgång till hela express-api.

var app = express (); kommer att kalla expressbibliotek som funktion. app.use (); låt lägga till funktionaliteten i din expressapplikation. app.use (express.static ( 'allmänheten')); kommer att ange mappnamnet som ska exponeras på vår webbserver. app.listen (port, function () {}) här kommer vår port att vara 3000 och funktionen vi ringer kommer att verifiera att webbservern körs korrekt. Det är den expressservern är konfigurerad.

Gå nu till vårt projekt och skapa en ny mapp public och skapa index.html- fil. index.html är standardfilen för din applikation och Express-servern letar efter den här filen. Index.html är en enkel html-fil som ser ut

<!DOCTYPE html>
<html>

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

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

</html>

Och gå till projektvägen genom terminalen och skriv node server.js . Då ser du * console.log ('Express-servern använder port: 3000'); *.

Gå till webbläsaren och skriv http: // localhost: 3000 i nav-baren så ser du hej världen .

Gå nu in i den offentliga mappen och skapa en ny fil app.jsx . JSX är ett preprocessorsteg som lägger till XML-syntax till din JavaScript.Du kan definitivt använda React utan JSX men JSX gör React mycket mer elegant. Här är provkoden för app.jsx

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

Gå nu till index.html och ändra koden, det ska se ut så här

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

Med detta på plats är ni alla klara, jag hoppas att ni tycker att det är enkelt.