DEV Community

roggc
roggc

Posted on

Setting up a dev environment for React with Parcel and Babel

#react

Create a project folder named react1. In it create package.json file with npm init -y. Then install, in that order, the following dependencies: npm i parcel-bundler parcel-plugin-clean-dist react react-dom @babel/core @babel/preset-react @babel/plugin-proposal-class-properties. Then edit .babelrc file as follows:

{
  "presets":["@babel/preset-react"],
  "plugins":["@babel/plugin-proposal-class-properties"]
}
Enter fullscreen mode Exit fullscreen mode

Create src folder. Inside it create index.html, app.js and favicon.ico files.
index.html:

<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <title>my app 🥳</title>
</head>
<body>
  <div id="app"></div>
  <script src='app.js'></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

app.js:

import React from 'react'
import {render} from 'react-dom'

render(
  <div>wellcome to react!</div>,
  document.getElementById('app')
)
Enter fullscreen mode Exit fullscreen mode

Now run npx parcel src/index.html and browse to localhost:1234 to see your React app up and running with life reloading.
To build your app you run npx parcel build src/index.html. This will create dist folder with output files in it ready to be deployed in a hosting service.

Top comments (0)

Read next

joshuaamaju profile image

The Right Way to Add Images to Emails in Next.JS

Joshua Amaju -

garciadiazjaime profile image

React: How Often Does a Cleanup Function Run?

Jaime -

paharihacker profile image

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Rajesh Dhiman -

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -