# Setup React app from scratch - Part-1(Get your project running)

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • talent.io - Download talent.io’s Tech Salary Report
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
  • html-webpack-plugin

    Simplifies creation of HTML files to serve your webpack bundles

    now we have a dist directory. inside of dist we have main.js file, to execute the file in browser we need to add it as a script in a html file. Instead of doing it manually, we'll take the help of html-webpack-plugin.

  • webpack-dev-server

    Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

    current setup doesn't provide us a developer friendly environment, we need to check the index.html file every time we make a change, to resolve this we'll use webpack-dev-server.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • custom-react-app

    all the code of this article is available here.

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.

  • vite

    Next generation frontend tooling. It's fast!

    The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.

  • parcel

    The zero configuration build tool for the web. 📦🚀

    The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.

  • esbuild

    An extremely fast JavaScript and CSS bundler and minifier

    The name is self explanatory, it bundles modules. Usually in our projects we have multiple js libraries, bundlers them in a single javascript file which can be executed in the browser. there are a lot of popular bundlers available : esbuild, parcel, vitejs, webpack, rollup are the most popular once. create-react-app uses webpack under the hood. We'll use webpack-5 for our setup.

  • talent.io

    Download talent.io’s Tech Salary Report. Median salaries, most in-demand technologies, state of the remote work... all you need to know your worth on the market by tech recruitment platform talent.io

  • create-react-app

    Set up a modern web app by running one command.

    Create-react-app is a great tool, it gets the project running in minutes. But it binds our hands with a lot of abstractions, according to the official react docs it is meant to be a tool to get anyone started with a good dev environment. It comes out of the box with a lot of good defaults(many of which we may never need) but it's very difficult to extend or bend according to our needs. So in this series of articles we'll learn how to build our react setup from scratch.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts