Git Product home page Git Product logo

another-react-boilerplate's Introduction

Another React boilerplate

Setup

git clone https://github.com/MarkosKon/another-react-boilerplate.git 
cd another-react-boilerplate
rm -rf .git (remove .git folder)
touch .env (create a .env file)
npm i && npm start

Features

  • Configured with Webpack 4
  • Eslint with AirBnb rules to feel bad about yourself.
  • Jest for testing.
  • Registers a basic service worker in production with workbox-webpack-plugin.
  • The contents of the public folder are put into the root of the dist folder when building similar to cra.
  • pre-commit runs 'lint' and 'test' scripts before committing with git to ensure code quality and frustration.
  • The App component holds most of the application state. It renders a Router with the pages wrapped in a Layout component.
  • The Layout component can be used to wrap the pages. It takes as properties a page title and a description for SEO and a page as child.

NPM Scripts

- npm start: Starts a webpack dev server with hot reloading.
- npm run build: Builds the project and exports at dist folder.
- npm run lint: runs lint on src folder and it's children.
- npm run lint-fix: same as lint but tries to fix the lint errors
- npm run test: runs jest on all files that end with *.test.js
- npm run test-w: runs jest with the --watch flag.

Regular dependencies

  • prop-types for type checking. Eslint with AirBnb requires type checking for your props.
  • react-helmet for SEO. It's used in Layout for title, meta description, adding icons for site.webmanifest or loading external scripts.
  • react-router-dom for client side routing.
  • styled-components for component styling.

Lighthouse score

Lighthouse score for uploaded project on Netlify.

lighthouse score

another-react-boilerplate's People

Contributors

markoskon avatar

Stargazers

 avatar

Watchers

 avatar  avatar

another-react-boilerplate's Issues

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.