Frontend Modern Boilerplate
Minimalist and powerful React + Webpack 4 boilerplate: pwa ready, with sass compiler and hot-reloading
Overview
The React + Webpack Modern Boilerplate is a repository containing a complete boilerplate with a Sass compiler and hot-reloading. It is designed to easily and quickly start developing projects from scratch with React 16 and Webpack 4. The project was created as a way for the developer to learn about and understand the inner workings of boilerplate generators, such as create-react-app. It follows best practices for React and style, utilizing OOCSS, ITCSS, and BEM methodologies.
Features
- React 16.4.2: The boilerplate includes the latest version of React.
- Webpack 4: It utilizes Webpack 4 for module bundling and asset management.
- Babel: Babel is used to support ES6 and JSX syntax.
- Sass Compiler: The boilerplate includes a compiler for Sass, allowing for the use of CSS preprocessors.
- Handlebar Compiler: It also includes a compiler for Handlebars, a popular templating language.
- Minifier: The boilerplate has a minifier for HTML, JS, and CSS files, reducing file size and improving performance.
- Development/Production Environment: There are separate environments for development and production, allowing for easy switching between the two.
- Style Linter: A linter for CSS styles is included to ensure consistency and quality in the codebase.
- Airbnb JavaScript Linter: The boilerplate includes a JavaScript linter based on the Airbnb style guide.
- Hot Reloading: In development mode, the boilerplate supports hot reloading of styles and scripts, allowing for faster development.
- Caching System: It includes a caching system specifically designed for the production environment.
- PWA Integration: The boilerplate has integrated support for Progressive Web Apps, using Google Workbox.
- Routing with React-router: It includes a routing environment using React-router, allowing for easy navigation and page routing.
- Test Environment with Enzyme and Jest: The boilerplate provides a test environment, including support for writing tests with Enzyme and Jest.
Summary
The React + Webpack Modern Boilerplate is a complete boilerplate for developing projects from scratch with React 16 and Webpack 4. It includes a range of features such as a Sass compiler, hot-reloading, and integrated support for Progressive Web Apps. The boilerplate follows best practices for React and style, utilizing methodologies like OOCSS, ITCSS, and BEM. It also includes features like a testing environment with Enzyme and Jest, a routing environment with React-router, and a caching system for the production environment.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Pwa
A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.