Adio Mojeed's Blog

Building and Deploying a react application from scratch (Part 2)

Building and Deploying a react application from scratch (Part 2)

Adio Mojeed's photo
Adio Mojeed
·

0 min read

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

  1. 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

  2. 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 our package.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 load localhost:1234 to view your served file.

  3. 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 run react-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 &mdash; 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.

Screenshot from 2020-04-24 01-45-13.png You can now continue writing your codes and and a productive experience

For further reading, reference these documentations

JavaScriptReactBabelparcel