Setting up React Ecosystem from Scratch
React has been a widely used framework in the frontend community and the community is growing with each day and many of us started on our first react project using the create-react-app starter kit provided by the official React team.
As good as this starter kit is, it does not showcase how things are working behind the scenes. if you ever wondered how different plugins work with react and how your code is compiled & bundled together you have come to the right place.
Before we proceed any further if you are someone who likes to understand things by going through the code, you can check out the repository here.
In this article, We will be covering Webpack, babel, Sass, unit testing with jest and enzyme, code linting, and formatting with Eslint & prettier, and many performance-related things.
So For simplicity and readability purposes, I have subdivided this article into the following pieces —
- Setting up Webpack 5 and Babel 7 for React.
- Setting up Eslint and Prettier.
- Setting up Unit Testing framework with Jest and Enzyme.
- Setting up Sass and Sass 7–1 pattern with React.
- Setting up support for static content.
- Code Splitting and Route-based chunking.
- Hot Module Replacement
- Performance improvements for React
