Welcome back to the tutorial. If you missed Part 1, check it here
In this article, we will be setting up the transpiler, bundler and our react packages
Getting Started
Babel: This is used for transpiling our ES6 syntax. It serves two purposes, transforming from ECMAScript5+ to more compatible versions supported by older browsers since react is written in ES6 and not all browsers support it and compilation. To install, run
npm i -D babel-eslint
Parcel: This is a zero configuration package bundler which bundles our files for build and production. Pointing it to a file figures all path to that file and bundles them. Another usefulness of parcel is that it has its own development server, helping it to serve our project on local host. To install, run
npm i -D parcel-bundler
To use the package, add this to the
scripts
property of ourpackage.json
file"dev": "parcel public/index.html" // this serves our project on local host:1234 "build": "parcel build public/index.html" // this bundles our project for production
To start the development server, run
npm run dev
Open your browser and loadlocalhost:1234
to view your served file.React: This is the main package that allows us to write react. It enables us to import all necessary modules to run react in our application. To install, run
npm i react react-dom
react
package installs all necessary packages for react to runreact-dom
package is responsible for rendering our react code on the DOM
Now, let's configure eslint
for react
. This requires us to install some plugins to enable maximum functionalities.
npm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
After installation, we need to configure them in our .eslintrc.json
file. Add this to the extends
property
"extends": ["airbnb-base", "prettier", "prettier/react", "plugin:import/errors", "plugin:react/recommended", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"]
// add this to plugins property
"plugins": ["prettier", "react", "import", "jsx-a11y", "react-hooks"]
// lastly, add this to the end of the file
"settings":
"react": {
"version": "detect"
}
}
Our project setup is complete, let's write some react
Copy this code into your index.html
file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React — App</title>
</head>
<body>
<div id="root"></div>
<script src="../src/app.jsx"></script>
</body>
</html>
Copy this into your app.jsx
file
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
class App extends Component {
render () {
return (
<h1>Hello react!</h1>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'))
Save your files and go to localhost:1234
on your browser, Your React project setup is complete.
You can now continue writing your codes and and a productive experience
For further reading, reference these documentations
- Parcel
- Babel
- React
- Intro to react-v5 by Brian Holt on Frontend Masters