Creating a React App From Scratch

A tutorial of how to setup a React web application from scratch without using any build tools, frameworks or compilers and then gradually evolving it, step-by-step, to include support for the following:

• JSX in-browser transformation using a standalone build of Babel
• JSX precompilation using the Babel command-line interface
• JavaScript/ECMAScript 6 modules (ESM)
• Consuming packages using the Node Package Manager
• Bundling and caching using Webpack
• Live reloading of changes in development mode using the Webpack Development Server
• CSS including modules and pre-processing using Sass
• Unit testing using the React Testing Library and Jest
• JavaScript and CSS linting using ESLint and Stylelint respectively
• Browser backwards compatibility and polyfilling using Babel, Browserslist, Core-js and PostCSS
• Type safety and improved tooling support using TypeScript

 
You’ll end up with something that you can use a boilerplate for any React project that doesn’t need any full-stack framework specific features. Hopefully you will also get a better understanding of some of the most commonly used components in the open-source JavaScript ecosystem and what role they play in the context of developing, building and testing a client-side rendered React web application.
Read »