React
Реагировать на котел [React + Babel + Webpack]

Настройка проекта

Для установки зависимостей проекта необходим диспетчер пакетов узлов. Загрузите узел для своей операционной системы из Nodejs.org . Диспетчер пакетов узлов имеет узел.

Вы также можете использовать Node Version Manager для лучшего управления версиями узлов и версий npm. Это отлично подходит для тестирования вашего проекта на разных версиях узлов. Однако это не рекомендуется для производственной среды.

После того, как вы установили узел в своей системе, пойдите и установите некоторые необходимые пакеты, чтобы взорвать свой первый проект React с помощью Babel и Webpack.

Прежде чем мы на самом деле начнем ударять команды в терминале. Посмотрите, для чего используются 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

Дополнительные зависимости 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"
  ]
}

Создайте файл .gitignore чтобы предотвратить загрузку сгенерированных файлов в .gitignore git.

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

И, наконец, создайте файл sever.js чтобы запустить npm start со следующим содержимым:

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

Создайте файл src/app.js чтобы увидеть, как проект React что-то делает.

import React, { Component } from 'react';

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

Запустите node server.js или npm start в терминале, если вы определили, что означает start в вашем package.json

проект реагирования-стартера

Об этом проекте

Это простой шаблонный проект. Этот пост поможет вам настроить среду для ReactJs + Webpack + Bable.

Давайте начнем

нам понадобится менеджер пакетов узлов для запуска экспресс-сервера и управления зависимостями во всем проекте. если вы новичок в диспетчере пакетов узлов, вы можете проверить здесь . Примечание: здесь требуется установка диспетчера пакетов узлов.

Создайте папку с подходящим именем и перейдите в нее с терминала или с помощью GUI. Затем перейдите к терминалу и введите npm init это создаст файл package.json, ничего страшного, он задаст вам несколько вопросов, таких как название вашего проекта, описание, точка входа, репозиторий git, автор, лицензия и т. д. Здесь точка входа важна, потому что узел будет сначала искать ее при запуске проекта. В конце он попросит вас проверить предоставленную вами информацию. Вы можете ввести да или изменить его. Ну вот и все, наш файл package.json готов.

Экспресс-установка сервера запуска npm install express @ 4 --save . Это все зависимости, которые нам нужны для этого проекта. Сохранить флаг важен, без него файл package.js не будет обновляться. Основная задача package.json - хранить список зависимостей. Он добавит экспресс-версию 4. Ваш package.json будет выглядеть как "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'); это даст вам доступ к полной экспресс-апи.

var app = express (); вызовет функцию экспресс-библиотеки как функцию. app.use (); добавьте функциональность в свое экспресс-приложение. app.use (express.static ( 'общественного')); будет указывать имя папки, которое будет отображаться на нашем веб-сервере. app.listen (port, function () {}) будет здесь, наш порт будет 3000, и функция, которую мы вызываем, проверит, что веб-сервер работает правильно. Именно это настроен сервер.

Теперь перейдите в наш проект и создайте новую папку общедоступным и создайте файл 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 («Экспресс-сервер использует порт: 3000»); *.

Перейдите в браузер и введите http: // localhost: 3000 в навигационной панели, где увидите мир приветствия .

Теперь зайдите в общую папку и создайте новый файл app.jsx . JSX - это шаг препроцессора, который добавляет синтаксис XML к вашему JavaScript. Вы можете определенно использовать React без JSX, но 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>

С этим на месте вы все закончили, надеюсь, вы найдете это простым.