Giter Club home page Giter Club logo

react-boiler's Introduction

๐Ÿ”ฅ react-boiler ๐Ÿ”ฅ code style: prettier

Boilerplate Project for React.

Simple setup that comes with hot-reloading, styled-components, and test setup with watch and coverage

Scripts

npm start - Starts the app on http://localhost:8080

npm run test - Runs all the tests once

npm run test: watch - Runs the tests, and watches for changes, running only changed files

npm run test: coverage - Runs the tests with coverage and watches for changes, running only changed files

Webpack

loaders

babel-loader - Transpiles js & jsx down to es5

plugins

base

clean-webpack-plugin - Deletes the dist directory before building a new bundle

html-webpack-plugin - Creates a new html file, using the one under /src as a template, and outputs it in the dist directory with the newly created js bundle injected in the body

prod

uglifyjs-webpack-plugin - Uglifies the code making the bundle smaller

webpack: DefinePlugin - used to set process.env.NODE_ENV === 'production' which allows some libraries (like react) to realize it's in production mode and thus eliminate unnecessary code, read more

webpack: ModuleConcatenationPlugin - Hoists the scope of all modules into one closure, allowing for faster code execution in the browser

analyze

webpack-bundle-analyzer - Visualizes the output bundle, making it easy to see what's inside the bundle

Babel

Presets

env - Allows the use of es2015, es2016 & es2017 features

stage-0 - Allows the use of upcoming es features at stage 0 and greater

react - Transforms jsx to js

Plugins

styled-components - Allows for better debugging & minification

runtime-transform - Used to enable the use of async actions, which require generator polyfills

prod

transform-react-inline-elements - Compiler optimization which replaces the React.createElement function with babelHelpers.jsx

transform-react-remove-prop-types - Remove propTypes from the build, making the bundle smaller

react-boiler's People

Contributors

enzoborgfrantz avatar

Stargazers

 avatar

Watchers

 avatar

react-boiler's Issues

fix prettier config

add prettier cli

yarn add --dev prettier-eslint-cli
create a script for running prettier on all files

{
  "scripts": {
    "format": "prettier-eslint --write \"src/**/*.js\""
  }
}

add this to husky precommit

Add coverage and linting to git

Add coverage and code linting as a pr step which helps ensure that only good code is merged, and that coverage remains at a reasonable level

Create lint script

Create a script for auto-fixing lint errors and add it to the build script, should also be part of git commit hooks

Add stateful component

add one stateful react component example which

  • fetches some data using fetch and async await
  • has state (using class property)
  • maybe dynamically loads some code

Create build step

Add build script to npm run build, which should produce a production ready bundle

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.