React Hooks с Hot Reload Boilerplate

TL;DR

Клонируйте этот репозиторий https://github.com/ReeganExE/react-hooks-boilerplate и приступайте к взлому.

npm install
npm start

Проверьте это: http://localhost:8080

Функции

• Реагировать на крючки
• Горячий загрузчик React
• Webpack 4, Babel 7, ESLint Airbnb
• Нет скрытой магии

Начать с нуля

Инициировать проект

Создайте новый каталог, затем

npm init -y

Установить зависимости

npm install react@next react-dom@next react-hot-loader

Установить зависимости разработки

Вавилон

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Веб-пакет

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

ESLint Airbnb

npx install-peerdeps --dev eslint-config-airbnb
npm install babel-eslint --save-dev

Кросс-окружение

npm install cross-env --save-dev

Настраивать

Конфигурация Babel

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

Конфигурация ESLint

{
  "parser": "babel-eslint",
  "extends": ["airbnb"],
  "env": {
    "browser": true
  },
  "rules": {
    "arrow-parens": "off",
    "comma-dangle": ["error", "never"],
    "no-confusing-arrow": "off",
    "no-unused-expressions": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/jsx-one-expression-per-line": "off"
  },
  "plugins": [
    "react"
  ]
}

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { env } = process;
const options = {
  mode: env.NODE_ENV,
  entry: './src/index.js',
  output: {
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV) }),
    new HtmlWebpackPlugin()
  ],
  devServer: {
    hot: true
  },
  devtool: env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : undefined
};
module.exports = options;

NPM Скрипты

{
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "build": "cross-env NODE_ENV=production webpack",
    "lint": "eslint ./src"
  },
}

Создать src/index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(<App />, document.body.appendChild(document.createElement('div')));

src/App.js

import React, { useState, useEffect } from 'react';
import { hot } from 'react-hot-loader/root';
const useGithub = userName => {
  const [user, setUser] = useState();
  useEffect(() => {
    fetch(`https://api.github.com/users/${userName}`)
      .then(r => r.json())
      .then(setUser);
  }, [userName]);
  return user;
};
function App() {
  const user = useGithub('ReeganExE');
  if (!user) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      Hello <b>{user.login}</b>
      <p>{user.bio}</p>
    </div>
  );
}
export default hot(App);

Счастливый секс

— Нинь Фам —