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"]
}
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>
app.js:
import React from 'react'
import {render} from 'react-dom'
render(
<div>wellcome to react!</div>,
document.getElementById('app')
)
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)