Using babel & web pack with react without create-react-app

Active3 hr before
Viewed126 times

8 Answers


Babel is a JavaScript compiler that converts edge JavaScript (ES6) into plain old ES5 JavaScript that can run in any browser (even the old ones). In the React world it is used to transform the JSX code into vanilla JavaScript. The Babel website lists what you can do with Babel:,Now, we are going to install a bunch of babel plugins. Babel is very important to convert ES6 into ES5, which is still required in old browsers. And also the jsx react code to createElement react code.,We still don’t have the main.js because it will be created by webpack which will convert all of this complex react code to javascript.

 Pretag team - issue, fix, solve, resolve

Add Webpack Loaders (css and babel),Add Babel Tools for Env and React,Add React React-Dom libs

Let’s create a folder for a new project and install all dependencies

$ > mkdir reactproject$ > cd reactproject$ > yarn init - y$ > yarn add react react - dom react - hot - loader$ > yarn add - D webpack webpack - cli webpack - dev - server @babel / core @babel / plugin - transform - async -to - generator @babel / plugin - transform - runtime @babel / preset - env @babel / preset - react babel - loader html - webpack - pluginstyle - loader css - loader extract - text - webpack - plugin @next
load more v

So for a pretty minimal setup, you’d want to :,create-react-app has been always a lightweight way to bootstrap any React project especially for beginners, however, if you have dived into react, you may need to set-up your app from scratch. So, in this tutorial, we will be guiding you to properly configure it.,7. Write your ReactDOM renderer in src/index.js (note .js, not jsx - webpack won't find the file otherwise, without more configurations):

2. Create under /dist folder

<!DOCTYPE html>

   <meta charset="UTF-8" />

   <div id="root"></div>
   <script src="./node_modules/react/umd/react.development.js"></script>
   <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
   <script src="./dist/main.js"></script>

load more v

It's very easy to create react app with terminal by following these commands. ,Thanks for this post! I've used create-react-app as a crutch for far too long. I finally built a react app using your article as a guide. Keep at it! ,Made with love and Ruby on Rails. DEV Community © 2016 - 2021.

npx create - react - app my - app
cd my - app
npm start
load more v

module: rules: finds JSX files and uses babel-loader on them, as well as teaching your app how to view CSS and style.,Run npm run create and after it runs you should see something like this in your terminal.,After this runs you will see the familiar node_modules and package-lock.json files appear in your file tree.

mkdir scratch - reactcd scratch - react
npm install--save - dev @babel / core @babel / preset - env @babel / preset - react webpack webpack - cli webpack - dev - server babel - loader css - loader style - loader html - webpack - plugin
load more v

Creating React App doesn't require configuration of web pack (bundler for modules) and babel (compiler). They come inbuilt. Developers can right away start with coding here. However, the drawback is that they won’t be able to get an idea about things happening in the background.,Check the steps below for webpack configuration-,Create React App was built by Joe Haddad and Dan Abramov. The GitHub repository is well-maintained by the creators to fix errors and deliver updates frequently. 

Step 1- Create an app directory

mkdir myApp
load more v

Here's a stripped-down working example that's not using CRA (but has CRA-like functionality) and outputs single file bundled assets: Single Webpack Bundle Kit,Alternatively, if you're looking for the CRA that outputs single file assets, then take a look at this answer (includes repo).,Connect and share knowledge within a single location that is structured and easy to search.

 Pretag team - issue, fix, solve, resolve

6) Add babel transpiling ES6 features in webpack config file,The easiest way to start practicing React is through Create React App (CRA). But we are choosing the hard path. In this posts, we will learn how to setup React workflow without create react app, so that we will be knowing what's happening under the hood.,babel-preset-env --> responsible for transpiling from ES6 to ES5

First, we will create a package.json file to manage the production and dev dependencies.

npm init - y
load more v

Other "babel-create" queries related to "Using babel & web pack with react without create-react-app"