# Setting up Webpack, Babel and React from scratch, revisited

DevFeed: [Setting up Webpack, Babel and React from scratch, revisited](<https://devfeed.tech/articles/setting-up-webpack-babel-and-react-from-scratch-revisited-37372.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/webpack-babel-react-revisited/>)

Author: Stanko

Published: 2017-10-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [React](<https://devfeed.tech/topics/react.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

A step-by-step tutorial for setting up React projects from scratch with Webpack and Babel. It explains the tools, creates a minimal development setup, and begins configuring the project using npm and JavaScript.

## Source excerpt

Last summer I wrote this post which quickly became my most popular one to day. With webpack 2 and 3 it got outdated, so I decided to write a new one. Before we start # I'll assume you have a basic knowledge of unix terminal, npm and JavaScript. You did some React, but now you want to level up and learn how setup React projects from scratch. This is detailed step-by-step guide, as I'll try to explain the whole process. If you just want code to play with, check this repository I created for this tutorial. Every time I talk about changing a source file, I'll paste complete file's content beneath it. You can look for ADDED IN THIS STEP comments which point out specific things that changed. Please note that this tutorial is written on macOS using node 8.5.0, but it should work on Linux and Windows without any major issues. If you find something that is not working, please provide a correction in the comments below. What are we trying to build? # Simple development setup for React applications using Webpack and Babel. But my main goal is for people to better understand these tools and how to use them. Setup that we are going to create is minimal, but it follows the best practices and gives you a solid ground to start from. Who am I and why should you listen to me? # Well, I'm a principal developer at Work&Co. I have a lot of experience on production level React projects, for clients like Twitter, Mastercard, Aeromexico, Hampton Creek... Marvin boilerplateWe have big plans for Marvin in the near future. is my creation as well, and what I'm trying to teach you is directly based on my experience on these projects. Init # Create a new folder, and package.json file in it, with the following content: { "name": "webpack-babel-react-revisited" } Of course you can replace "webpack-babel-react-revisited" with your project name. - package.json Show file structure after this stepHide file structure after this step Webpack # We'll start with installing webpack for module bundling. It