DEV Community: steffanboodhoo

React Quickstart Tutorial

steffanboodhoo — Sun, 26 Jun 2022 23:58:22 +0000

React Quickstart Tutorial

Inspiration
Prerequisites
Setup
The React Component
Events
State
Hooks
Routing
Extra Bits
Sample Network Request and Render

Inspiration

I like using React, building reuseable blocks of code ( Components ) in your own style is quite a fun and stimulating experience. You may meet several react persons who use the framework but their code can be drastically different ( which can also be a very bad thing ), but I like to find my own way of doing things and react allows that.

Prerequisites

To start you'll need Node, npm and preferably npx, you can skip to the next section if you already have these installed ( next section )

Installing Node

OPTION A: (Recommended NVM ( Node Version Manager)

It's generally recommended that you use nvm to install and manage versions of node. You can see instructions on how to install for you OS here. Definitely use the above link if you can, however if not you can try running these...

install via curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
reload your terminal
source ~/.bashrc
check the install
nvm -v
use nvm to install a version of node ( e.g. 16 )
nvm install 16
OR
use nvm to install the latest version of node
nvm install node

use nvm to use a version of Node it installed ( e.g. 16 )
nvm use 16

OPTION B: Direct Install

You can visit here for installation instructions for your specific OS.

npm and npx

npm and npx are usually installed alongside node, you can test with npm --version and npx --version.

Note: Node, npm and npx are all different things, Node is the execution environment ( basically the thing that runs the code ); npm, Node Package Manager, manages packages for node; npx, Node Package Execute, allows us to run installed node packages. The versions of each of these things are (mostly) independent and therefore when you run npm --version or node --version or npx --version DON'T EXPECT to see the same number.

Depending on which option you chose npx may not be installed, as such you can run the following:

install npx globally ( DO NOT RUN IF YOU ALREADY HAVE npx INSTALLED, again check with npx --version )
npm install -g npx

Setup

Files and Core Dependencies

Let's create a folder react_app, and inside react_app create a src folder and a public folder, inside public create an index.html file and inside src create an index.js file.

Edit index.html and index.js to reflect the following:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Tutorial App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

console.log('Hello I\'m working');

Now let's initialize our package management

npm init -y

Now let's install our core dependencies

npm install --save react react-dom

Your structure should look something like

react_app
  |- /node_modules
    |- ...
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js

React Scripts

react-scripts is a tool we will use to run and build our react code. The browser doesn't actually understand react, we can use react-scripts to create a development server which would transpile and serve our code in the browser while constantly watching for changes we make and reloading those bits. We will also use react-scripts to build a bundled app that we can deploy, for now let's install

npm install --save-dev react-scripts

Now for react scripts to work, it needs at minimum, a specific structure and some specifications in our package.json. For the structure it expects a public folder with an index.html file and a src folder with an index.js. As for the specifications, we have to say which browser(s) we're going to use to develop and build to support. We will add these specifications after the devDependencies section in our package.json

,"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
}

The development subsection is fairly obvious, however you can read about the browserslist production values here.

Your package.json should look something like this ( exact values WILL DIFFER DO NOT COPY )

{
  "name": "react_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
   }
}

Now let's start our development server, navigate to the react_app folder and run

npx react-scripts start

Your browser should open to localhost:3000, with index.html loaded and index.js injected for us, so if you open the console you'll see our log 'Hello I\'m working'.

Note: There is a tool create-react-app that could have been used to automatically create our initial structure however when I first started out it felt a bit overwhelming and often conflated my understanding of things operated. When learning it feels much better to take things one step at a time rather than having to decipher a bunch of boilerplate code.

The React Component

JSX

What is JSX ? Well it stands for Javascript XML but we can basically think of it as Javascript in HTML... in Javascript. As a dumb example, think about how you would put some stored text input text_variable in a <div> tag.

Normally you would do something like add an id to the tag <div id='some_reference'> then grab the element using document.getElementById('some_reference') and then do something like set it's innerHTML to text_variable.

With JSX if we want to put text_variable in a <div>, we just put it

<div>{text_variable}</div>

With JSX we can put any Javascript Expression directly into HTML by putting it into curly braces. ( Javascript Expression = any javascript code that resolves to some value ). How does this concept of Javascript Expressions in HTML helps us ? Well now we can use html almost as a template whose contents are created by our logic and data, this is the basis of a component.

What is a Component

Components are the building blocks of react, a component can be conceptualized as a custom element that you create. This 'custom element' or component usually structured as accepting some data input and returning some JSX ( recall JSX allows us to build a template whose contents we manipulate via javascript ).

As a quick example here's a CalculatorComponent that accepts two parameters; two numbers num_1, num_2 and then returns JSX that displays the sum.

const CalculatorComponent = (params) => {
    const { num_1, num_2 } = params;    // we are pulling out the two arguments we passed in num_1 and num_2, the name params is not important and can be changed
    return (<div>
        {num_1 + num_2}
    </div>)
}

Now we can use our component almost like any other element like <CalculatorComponent/> we can pass in our values similar to how normal attributes are passed in to html elements like <CalculatorComponent num_1={3} num_2={4} />. Now that we have some idea about components let's actually put it into action.

Rendering React

Let's finally render our first component, to do that we'll need to use the core react libraries react and react-dom. To render react we need to (1) find a place on the DOM where we want to render our component(s) (2) actually load our component into that place. Let's do it using our CalculatorComponent

edit your index.js to reflect the following:

import React from 'react';
import { createRoot } from 'react-dom/client';

console.log('Hello I\'m working');

const CalculatorComponent = (params) => {
    const { num_1, num_2 } = params;    // we are pulling out the two arguments we passed in num_1 and num_2, the name params is not important and can be changed
    return (<div>
        {num_1 + num_2}
    </div>)
}

const root_element = document.getElementById('root');
const react_root = createRoot(root_element);
react_root.render(<CalculatorComponent num_1={3} num_2={4} />);

Once you have saved you should see a '7' appear on your browser, congratulations you've created your first react app. let's talk a bit about what's going on, first our imports; without getting into the mess of things React from 'react' is used to construct our Component and { createRoot } from 'react-dom/client' is used to load our component onto the page. We then define our component CalculatorComponent using the code from before, grab the empty div identified by root ( see index.html ), create the root or base of our react application then finally render our component using the created root/base.

App Structure

This was a very simple example using one file, however it's not very realistic, let's see how we can split our code across multiple files using some established conventions ( this in most cases is how you should structure and load your app ).

First let's seperate our CalculatorComponent in it's own file Calculator.js inside our src folder and make some minor modifications

import React from 'react';

export const Calculator = (params) => { // no need for the word 'Component' to be attached, it's already understood
    const { num_1, num_2 } = params;    // we are pulling out the two arguments we passed in num_1 and num_2, the name params is not important and can be changed
    return (<div>
        {num_1 + num_2}
    </div>)
}

Now let's create a component that will be used as the root of our application where we will load all other React components, we'll call the component App, create a new file App.js inside src and add the foll:

import React from 'react';
import { Calculator } from './Calculator';

export const App = () => {

    return (<div>
        <Calculator num_1={3} num_2={4} />
    </div>)
}

Explanation: Our App component imports our Calculator component from Calculator.js and uses it with num_1 as 3 and num_2 as 4

Finally let's modify our index.js to render our root/base component App

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

console.log('Hello I\'m working');

const root_element = document.getElementById('root');
const react_root = createRoot(root_element);
react_root.render(<App/>);

Your file structure should look like the foll:

react_app
  |- /node_modules
    |- ...
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js
    |- App.js
    |- Calculator.js

Once saved you should see the result rendered on your page.

Events

DOM and VDOM

The DOM is a representation of an HTML document that facilitates it's manipulation. For example when we call document.getElementById we retrieve a DOM node which we then use to apply changes to the document. Without going into too much depth, react creates it's own version of the DOM called the virtual DOM ( or VDOM ). The VDOM is used to optimize rendering, i.e. instead of replacing the entire DOM, react compares the DOM and it's VDOM and only changes what's needed in the DOM to reflect new changes. This bit is a bit beyond this tutorial, you can read more about these concepts here and here.

Synthethic Events

Since when using react we don't use the DOM directly but a representation of it, we can't use native DOM events (e.g. onclick) but rather synthethic events that react provides for us (e.g. onClick). Secondly since we're using JSX i.e. using components to create HTML in our javascript code, when we pass functions to these events we pass the function itself rather than a string.

Traditionally it may have looked something like this

<button onclick='handleOnClick'> 
    Click 
</button>

In react using JSX we have

<button onClick={handleOnClick}> 
    Click 
</button>

Again, note onclick is the native DOM event which we replaced by react's synthethic event onClick, case being the only difference (lowercase vs cammel case), this is done by design to make things easy to remember yet distinct; and secondly instead of using a string of the function we pass in the function itself ( again JSX ).

State

useState

State, simplified, is variables. State within your app can be thought of then as, all the data currently loaded within your application. Let's zoom in a bit, to the state for a component i.e. the data / variables within the component. State can be thought of as the core react, why ? Components update their content ( or react to ) the data within them. Therefore when working with data within a component i.e. when we create 'variables' or state, we have to do so in a way react can keep track of it. We create these 'variables' or state by calling useState function.

When we call useState there are 3 things to note; (1) a react variable, (2) a function to update this react variable, and (3) what the default value of this react variable should be. Let's see a quick example of useState, we will use it to keep track of a count

const [count, updateCount] = useState(0);

In the example, (1) count is the special react variable, (2) updateCount is the function we use to update the value of count, and 0 is count's initial value.

REACTing to state

In order to fully appreciate how state works, we need to actually use it. let's create a component to count based on user inputs, we'll call it Counter and create it in Calculator.js.

Edit Calculator.js to reflect the foll:

import React, { useState } from 'react';

export const Calculator = (params) => { // no need for the word 'Component' to be attached, it's already understood
    const { num_1, num_2 } = params;    // we are pulling out the two arguments we passed in num_1 and num_2, the name params is not important and can be changed
    return (<div>
        {num_1 + num_2}
    </div>)
}

export const Counter = () => {
    const [count, updateCount] = useState(0);// useState creates our variable 'count' and a function 'updateCount' to update our variable;

    const handleCountBtnClick = (ev) => {
        updateCount(count + 1); // a replacement for count = count + 1
    }

    return (<div>
        Clicked {count} times.
        <button onClick={handleCountBtnClick}> Click</button>
    </div>)
}

Now all let's add Counter to our App component, edit App.js to reflect the following:

import React from 'react';
import { Calculator, Counter } from './Calculator';

export const App = () => {

    return (<div>
        <Counter />
        <Calculator num_1={3} num_2={3} />
    </div>)
}

Your page should automatically refresh with our Counter component loaded, now whenever you click the button, the count should increase.

Hooks

Hooks are a bunch of functions that allows us to use react features easily. useState is actually an example of a hook, as seen it allows us to create special react state that our components use update it's content.

useEffect

useEffect is the next most popular hook, it allows us to perform 'effects' between changes in specific states. useEffect has two bits to take note of, (1) the functionality or 'effect' we want run, and (2) the pieces of state we want to run the 'effect' inbetween.

As an example, let us modify our Calculator to take in two user inputs num_1, num_2 and an operator operator, our calculator will work such that if num_1, num_2 or operator changes we will attempt to recalculate the result live. To do this, of course we will use a useEffect, the effect will be calculating a result, and the pieces of state we will be observing will be num_1, num_2 and operator because if any of these changes then we will need to recalculate the result.

import React, { useState, useEffect } from 'react';

export const Calculator = (params) => { // no need for the word 'Component' to be attached, it's already understood
    const [num_1, updateNum1] = useState(0);
    const [num_2, updateNum2] = useState(0);
    const [result, updateResult] = useState('0')
    const [operator, updateOperator] = useState('+');

    const calculate = () => {
        let updated_result = '';
        if (operator == '+')
            updated_result = num_1 + num_2;
        else if (operator == '-')
            updated_result = num_1 - num_2;
        else if (operator == '/')
            updated_result = num_1 / num_2;
        else if (operator == '*')
            updated_result = num_1 * num_2;
        else
            updated_result = 'Invalid Operator';

        updateResult(updated_result);
    }

    useEffect(calculate, [num_1, num_2, operator]);

    const handleOnChange = (ev, field) => {
        const new_value = ev.target.value;
        if (!new_value) // if input changed to nothing / null, then don't update anything
            return;
        if (field == 'num_1')
            updateNum1(parseInt(new_value));
        else if (field == 'num_2')
            updateNum2(parseInt(new_value));
        else
            updateOperator(new_value)
    }

    return (<div>
        <input type='number' defaultValue='0' onChange={ev => handleOnChange(ev, 'num_1')} />
        <input type='character' defaultValue='+' onChange={ev => handleOnChange(ev, 'operator')} />
        <input type='number' defaultValue='0' onChange={ev => handleOnChange(ev, 'num_2')} />
        =
        {result}
    </div>)
}

export const Counter = () => {
    const [count, updateCount] = useState(0);// useState creates our variable 'count' and a function 'updateCount' to update our variable;

    const handleCountBtnClick = (ev) => {
        updateCount(count + 1); // a replacement for count = count + 1
    }

    return (<div>
        Clicked {count} times.
        <button onClick={handleCountBtnClick}> Click</button>
    </div>)
}

Let's take a minute to dissect what's here, in order;

First we used useState 4 times to create 4 pieces of state, functions to update them, and gave them default values.

    const [num_1, updateNum1] = useState(0);
    const [num_2, updateNum2] = useState(0);
    const [result, updateResult] = useState('0')
    const [operator, updateOperator] = useState('+');

Then we created a calculate function, which uses num_1, num_2 and operator to calculate and update result.

    const calculate = () => {
        let updated_result = '';
        if (operator == '+')
            updated_result = num_1 + num_2;
        else if (operator == '-')
            updated_result = num_1 - num_2;
        else if (operator == '/')
            updated_result = num_1 / num_2;
        else if (operator == '*')
            updated_result = num_1 * num_2;
        else
            updated_result = 'Invalid Operator';

        updateResult(updated_result);
    }

We then used a useEffect to say anytime num_1, num_2, or operator changes run the calculate function, as shown useEffect is a function call that accepts 2 things, (1) the functionality or 'effect' we want run in this case calculate, and (2) the states we want to observe or rather states which affect our 'effect' in this case num_1, num_2, and operator.

useEffect(calculate, [num_1, num_2, operator]);

The rest are things we've already gone over, handleOnChange is a function we create to handle the changing of something, it accepts the actual change event ev as well as some identifying keyword state_name, it uses the event ev to fetch the current entered and based on the keyword state_name we update the relevant piece of state.

    const handleOnChange = (ev, state_name) => {
        const new_value = ev.target.value;
        if (!new_value) // if input changed to nothing / null, then don't update anything
            return;
        if (state_name == 'num_1')
            updateNum1(parseInt(new_value));
        else if (state_name == 'num_2')
            updateNum2(parseInt(new_value));
        else
            updateOperator(new_value)
    }

Finally we have the JSX where we define our inputs to call our handleOnChange function by attaching it to react's synthethic onChange event, however we wrap this function call in an anonymous function so that we can pass a specific keyword for each input.

    return (<div>
        <input type='number' defaultValue='0' onChange={ev => handleOnChange(ev, 'num_1')} />
        <input type='character' defaultValue='+' onChange={ev => handleOnChange(ev, 'operator')} />
        <input type='number' defaultValue='0' onChange={ev => handleOnChange(ev, 'num_2')} />
        =
        {result}
    </div>)

Routing

Why Have Routes ?

Modern frontend frameworks operate on the basis that the entire app operates on a single page ( single page apps ). However, we still like the illusion of routing to different pages ( this can also be useful to the user since they often identify and navigate directly to a specific view by typing in the route ). It is entirely possible ( not recommended ) to build your own routing system however there's also react-router-dom which is the defacto routing solution used for react.

Basic React Router

react-router-dom is a library that provides routing for react. To get started lets install react-router-dom run

npm install react-router-dom

To get started we need to the root of our application in a Component from react-router-dom called BrowserRouter, let's modify our index.js to reflect the foll:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { App } from './App';

console.log('Hello I\'m working');

const root_element = document.getElementById('root');
const react_root = createRoot(root_element);
react_root.render(<BrowserRouter>
    <App />
</BrowserRouter>);

Now let's modify App to have two routes, /counter for our Counter and /calculator for Calculator, to do this we'll need to use the Routes and Route components from react-router-dom. Routes is where we initialize the routes for our application, it will contain all the Route components for our app. Each Route component is simply a path e.g. /calculator and what to render e.g. <Calculator/> let's edit App.js to see these in action :

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Calculator, Counter } from './Calculator';

export const App = () => {

    return (<div>
        <Routes>
            <Route path='/counter' element={<Counter />} />
            <Route path='/calculator' element={<Calculator />} />
        </Routes>
    </div>)
}

Now when you visit /counter you'll see our Counter component and when you visit /calculator you'll see our calculator component (easy right!).

Remember this is an illusion of different routes, we will not actually serve different pages; visting /calculator loads the same page, the same code, but the Component specific to /calculator; simply put BrowserRouter must read the state of the browser and load the required Component / View. However there are many more things that BrowserRouter does for us right out of the box, a quick example is keeping track of where the user has visited and facilitating backwards and forwards navigation between routes. Again remember these routes aren't real we are never leaving the page so there isn't anyting to go back or forward to. You can read more about react router here.

Routing Necessities

You'll very quickly notice, that the base of our application has nothing loaded i.e. if you go to localhost:3000 you'll see nothing, this is because we do not have a Route for our base path /, therefore nothing will load, there are a few options we will explore

OPTION 1: The most obvious let's just add Route and choose a component e.g. Calculator,

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Calculator, Counter } from './Calculator';

export const App = () => {

    return (<div>
        <Routes>
            <Route path='/' element={<Calculator />} />
            <Route path='/counter' element={<Counter />} />
            <Route path='/calculator' element={<Calculator />} />
        </Routes>
    </div>)
}

This works fine, Components are meant to be reusable so no problems here, but a bit crude

OPTION 2: If we don't have something for a particular route e.g. / we can redirect them to one, let's redirect / to calculator

import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import { Calculator, Counter } from './Calculator';

export const App = () => {

    return (<div>
        <Routes>
            {/* <Route path='/' element={<Calculator />} /> */}
            <Route path='/' element={<Navigate to='/calculator' replace={true} />} />
            <Route path='/counter' element={<Counter />} />
            <Route path='/calculator' element={<Calculator />} />
        </Routes>
    </div>)
}

Again works fine, demonstrates how to render a redirect such within BrowserRouter so BrowserRouter can keep track of where user has been.

OPTION 3: Create a new component that acts as a menu

In src create a new file Menu.js and add the following:

import React from 'react';
import { Link } from 'react-router-dom';

export const Menu = () => {

    return (<div>
        Most desolate menu in the world
        <ul>
            <li>
                <Link to='/calculator'>Calculator ( ಠ ʖ̯ ಠ ) </Link>
            </li>
            <li>
                <Link to='/counter'>Counter ◔_◔ </Link>
            </li>
        </ul>

    </div>)
}

Now edit App.js

import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import { Calculator, Counter } from './Calculator';
import { Menu } from './Menu';

export const App = () => {

    return (<div>
        <Routes>
            {/* <Route path='/' element={<Calculator />} /> */}
            {/* <Route path='/' element={<Navigate to='/calculator' replace={true} />} /> */}
            <Route path='/' element={<Menu />} />
            <Route path='/counter' element={<Counter />} />
            <Route path='/calculator' element={<Calculator />} />
        </Routes>
    </div>)
}

Once you've saved, the base route will now render our very ugly menu Menu. React Router has a lot more and very good documentation, please give it a read through if you ever find yourself amiss with routing.

Extra Bits

Conventions

A lot of the code I wrote was done to maximize readability however in practice there are some things that are common place.

Param Destructuring

This is how we access properties / parameters for a component, let's look back at the first version of <Calculator\>, for reference

const CalculatorComponent = (params) => {
    const { num_1, num_2 } = params;    // we are pulling out the two arguments we passed in num_1 and num_2, the name params is not important and can be changed
    ...
}

We accepted an object we named 'params' and then proceeded to destructure and pull our num_1 and num_2 however in practice the norm is to destructure in the method signature / parameter list itself like so

const CalculatorComponent = ({num_1, num_2}) => { // we are expecting two properties to be passed, called exactly `num_1` and `num_2`, we can therefore pull them out immediately
    ...
}

useEffect

When we used the useEffect we created a function calculate to pass into the useEffect
reference

const calculate = () => {
        let updated_result = '';
        if (operator == '+')
            updated_result = num_1 + num_2;
        else if (operator == '-')
            updated_result = num_1 - num_2;
        else if (operator == '/')
            updated_result = num_1 / num_2;
        else if (operator == '*')
            updated_result = num_1 * num_2;
        else
            updated_result = 'Invalid Operator';

        updateResult(updated_result);
    }

    useEffect(calculate, [num_1, num_2, operator]);

However the 'effects' or functionality in useEffects are usually only meant to be triggered in the useEffect so people usually use an anonymous function or rather ES6's version, an unassigned arrow function, and write the functionality directly in the body

    useEffect(()=>{
        let updated_result = '';
        if (operator == '+')
            updated_result = num_1 + num_2;
        else if (operator == '-')
            updated_result = num_1 - num_2;
        else if (operator == '/')
            updated_result = num_1 / num_2;
        else if (operator == '*')
            updated_result = num_1 * num_2;
        else
            updated_result = 'Invalid Operator';

        updateResult(updated_result);
    }), [num_1, num_2, operator]);

As you can see the body of the functions are exactly the same, the only difference is we just wrote it directly in the useEffect using an unassigned arrow function.

Sample Network Request and Render

As a quick example of how we can do network requests and render the results I'm going to fetch art pieces using The Art Institute of Chicago API.
Let's begin by installing axios to make making requests easier.

npm install --save axios

Now create an Art.js in src, we'll have two components Art being the main component and ArtPiece being an individual art piece. The code here will be a bit closer to how things would usually be done

import Axios from 'axios';
import React, { useRef, useState } from 'react';

export const Art = () => {
    const [art_data, updateArtData] = useState([]);
    const searchInput = useRef(null); // holds a reference to an element

    const handleSearchArt = (ev) => {
        const title = searchInput.current.value; // similar to title = document.getElementById('search-text-input').value;
        const params = { q: title, limit: 5, fields: 'id,title,image_id,artist_display' }; // sample set of params, limits the number of results to 5, and only returns the id, title, image_id, and artist_display fields    
        Axios.request({
            url: 'https://api.artic.edu/api/v1/artworks/search',
            params
        }).then(res => {
            const { config, data } = res.data;
            const updated_art_data = data.map(artPiece => ({ config, ...artPiece })); // add config to each art piece
            updateArtData(updated_art_data);
        }).catch(err => console.log(err));
    }

    return (<div>
        <input ref={searchInput} id='search-text-input' type='text' />
        <button onClick={handleSearchArt}> search </button>
        {art_data.map(art_piece_data => (<ArtPiece key={art_piece_data.id} {...art_piece_data} />))} 
        {/* Don't be overwhelmed by {...art_piece_data} this is another example of destructuring, each key,value pair is passed down as if it were independent */}
    </div>)
}

// Again we pull out each argument passed by name using destructuring
const ArtPiece = ({ config, title, image_id, id, artist_display }) => {
    return (<div>
        <img src={`${config.iiif_url}/${image_id}/full/843,/0/default.jpg`} />
        <h3>{title}</h3>
        <p>{artist_display}</p>
    </div>)
}

useRef is an example of a hook we can use to hold a reference to an element, in this case we used it to hold a reference to our search input element; The id is left in for comparison.
Now we simply need to add a route to load Art, edit App.js

import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import { Art } from './Art';
import { Calculator, Counter } from './Calculator';
import { Menu } from './Menu';

export const App = () => {

    return (<div>
        <Routes>
            {/* <Route path='/' element={<Calculator />} /> */}
            {/* <Route path='/' element={<Navigate to='/calculator' replace={true} />} /> */}
            <Route path='/' element={<Menu />} />
            <Route path='/counter' element={<Counter />} />
            <Route path='/calculator' element={<Calculator />} />
            <Route path='/art' element={<Art />} />
        </Routes>
    </div>)
}

We can access our /art and search for art pieces, feel free to add it to the great menu :P

Final Thoughts

There you have it, a basic yet somewhat comprehensive ( I hope ) guide on react, there are many more concepts, however, I'd say those are much more advanced and will only serve to conflate someone's understanding if they're new to react. Not to worry you WILL eventually encounter them, as for me I may or may not make an advanced guide, I suppose it depends on demand either way, let me know in the comments, and thank you very very much for reading this far <3 (◠﹏◠).

Edit: to include css, import your css file in index.html as you normally would ( doing a webpack config is a bit too much for introductory purposes ).

Practical WEBPACK Basics: Pure Javascript frontend

steffanboodhoo — Mon, 20 Jun 2022 18:46:42 +0000

Inspiration
Prerequisites
Setup
Webpack basics
Sample App and Bundling
Configurations
Development
Module and Loaders
Extra Bits

Inspiration

About two years ago I created a Webpack setup to suit my specific needs when developing with react. Since then I've mainly been on large projects and because I used react, I never needed to revisit. Recently I decided to do some small experiments and found myself struggling a bit to create a pure Javascript Webpack setup. I didn't want to copy someone else's without actually understanding what it is it was doing. So after revisiting in some depth here I am, creating a guide that's would be easy to digest, practical and would maybe even serve me later down if I eventually forget and need to return 😅.

Prerequisites

To start you'll need Node, npm and preferably npx, you can skip to the next section if you already have these installed ( next section )

Installing Node

OPTION A: (Recommended NVM ( Node Version Manager)

use nvm to use a version of Node it installed ( e.g. 16 )
nvm use 16

OPTION B: Direct Install

You can visit here for installation instructions for your specific OS.

npm and npx

npm and npx are usually installed alongside node, you can test with npm --version and npx --version.

Dependending on which option you chose npx may not be installed, as such you can run the following:

install npx globally ( DO NOT RUN IF YOU ALREADY HAVE npx INSTALLED, again check with npx --version )
npm install -g npx

Setup

Create a folder for our tutorial, let's say sample-frontend, go into sample-frontend and initialize this folder by running npm init, this will take you through some questions to setup your project.

Once you're finished you can create a sample_index.html file then a src folder and inside src create a sample_index.js file.

Right now your folder should look something like this

sample-frontend
  |- package.json
  |- sample_index.html
  |- /src
   |- sample_index.js

sample files

sample_index.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        I am body !
        <script type='text/javascript' src="./src/sample_index.js"></script>
    </body>
</html>

sample_index.js

window.onload = ev => {
    init();
}

const init = () => {
    console.log('hello I am a sample index.js');
}

Check your page and ensure everything is okay by visiting //sample_index.html on your browser.

Webpack basics

What is Webpack ? well according to the official documentation

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

To generalize and simplify ( for starters )

Webpack looks at all your code and outputs a single something.

Some questions that you might ask are (1) How does it work (2) what does it output (3) how is this helpful

How does it work and what does it output

Let's install webpack and find out.

Install webpack and it's cli
npm install --save-dev webpack webpack-cli

navigate to the root of your project sample_project and run the following:
npx webpack --entry ./src/sample_index.js --mode production

This command and it's output tells us a lot. It says please take a look at my code starting from sample_index.js and output something that's ready for production.

If we look at our project directory we'll see a folder dist and inside a file main.js.

sample-frontend
  |- package.json
  |- package-lock.json
  |- sample_index.html
  |- /src
    |- sample_index.js
  |- /dist
    |- main.js
  |- /node_modules...

main.js should contain something like this
(()=>{window.onload=l=>{o()};const o=()=>{console.log("hello I am a sample index.js")}})();

main.js is minified and obfuscated version of our code base. ( Minification - helps load time by removing unnecessary characters from code; Obfuscation - helps protect your code/logic by making it difficult to read/understand )

We can edit our sample_index.html to use main.js and it will work in the same way.

sample_index.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        I am body !
        <!-- <script type='text/javascript' src="./src/sample_index.js"></script> -->
        <script type='text/javascript' src="./dist/main.js"></script>
    </body>
</html>

( you can test by visiting your page in the browser )

There's something else going on ( the main thing actually 😅 ) but we need to add dependencies to see it in action. We'll add two dependencies, one being a node package we install and another being our own, we will use these to build an art search app.

Sample App and Bundling

Note: Since this tutorial isn't about writing code itself, explanations on how the app works will be documented in the comments within the files themselves.
Let's add our first dependency, a package to help us make requests
npm install --save axios

Now our own, in src create a file art_helper.js.

sample-frontend
  |- package.json
  |- package-lock.json
  |- sample_index.html
  |- /src
    |- sample_index.js
    |- art_helper.js
  |- /dist
    |- main.js
  |- /node_modules...

Edit your art_helper.js to include the following:

import Axios from 'axios';

export const searchArt = ({ title }) => {
    const params = { q: title, limit: 5, fields: 'id,title,image_id,artist_display' }; // sample set of params, limits the number of results to 5, and only returns the id, title, image_id, and artist_display fields
    return Axios.request({
        url: 'https://api.artic.edu/api/v1/artworks/search',
        params
    }).then(res => {
        const { config, data } = res.data;
        const artPieces = data.map(artPiece => ArtPiece({ config, ...artPiece })); // map the data to an array of HTML strings where each HTML string is an art piece (see ArtPiece function below)
        return { artPieces };
    }).catch(err => {
        console.log(err);
    });
}


// Takes a config and the data for an art piece and returns an HTML string
const ArtPiece = ({ config, title, image_id, id, artist_display }) => {
    const image_url = `${config.iiif_url}/${image_id}/full/843,/0/default.jpg`;
    console.log(image_url);
    return (`<div class='art_piece'>
        <img src="${image_url}" />    
        <h3>${title}</h3>
        <p>- ${artist_display}</p>
    </div>`);
}


/**
 * Fetches art from The Art Institute of Chicago API ( https://api.artic.edu/docs )
 * First queries the API for art pieces with the given title ( https://api.artic.edu/api/v1/artworks/search )
 * Then returns an array of ArtPiece objects
 * The image URL for each ArtPiece is constructed from the IIIF URL ( config.iiif_url ) and the image_id
 */

Edit your sample_index.html to reflect below:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id='root'>
            <input type='text' id='title-search-input'/>
            <button id='title-search-button'>Search</button>
            <div id='search-results'>
            </div>
        </div>

        <!-- <script type='text/javascript' src="./src/sample_index.js"></script> -->
        <script type='text/javascript' src="./dist/main.js"></script>
    </body>
</html>

Finally Edit your sample_index.js to the following:

import { searchArt } from './art_helper';

window.onload = ev => {
    init();
}

const init = () => {
    console.log('hello I am a sample index.js vn');
    document.getElementById('title-search-button').addEventListener('click', handleSearchClick);
}

const handleSearchClick = (ev) => {
    const title = document.getElementById('title-search-input').value;
    searchArt({ title }).then(renderResults);
}

const renderResults = ({ artPieces }) => {
    document.getElementById('search-results').innerHTML = artPieces.join('');
}

Once more at the root of your project run

npx webpack --entry ./src/sample_index.js --mode production

then go to your page refresh and try it out.

We now have a bare bones art search app, a couple things to note: We did not have to use script tags in our sample_index.html for our dependencies, art_helper.js and Axios, along with that we did not have to worry about the order in which they were included. Also if we view our main.js file, though minified and obfuscated making it difficult to read, we see that our ES6+ syntax has been translated down allowing us to use all of ES6+ without having to worry about compatibility issues across browsers.

Starting with our entry point sample_index.js our code has been thoroughly parsed all the while building a graph of our exact dependencies to bundle, transpile (ES6+ JS to browser compatible version), obfuscated and minified into one file main.js with which we can use.

Configurations

Running quick commands are fine however when we want to specify and do a lot more, configuration files become a necessity, especially when working with others, it's easier to debug a config file than an exceptionally verbose command. Let's translate our build command into configuration, in the project directory sample-frontend create a file webpack.config.js.

sample-frontend
  |- package.json
  |- package-lock.json
  |- sample_index.html
  |- webpack.config.js
  |- /src
    |- sample_index.js
    |- art_helper.js
  |- /dist
    |- main.js
  |- /node_modules...

Edit webpack.config.js to reflect the following:

const path = require('path');

module.exports = {
    entry: {
        main: './src/sample_index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production'
}

Now you can run npx webpack --config webpack.config.js and achieve the same result.

What's happening here ? We're exporting an object that describes what we would like to happen.

entry

Where should Webpack start, which, can be rephrased as where "does my app start ?", in this case './src/sample_index.js'.

You'll notice entry is an object ( a set of key value pairs ) and we've called our entry point 'main', this is because by default 'main' is name given to the bundled javascript file. However we can rename this to whatever we like, a popular name or term is simply 'bundle'.

const path = require('path');

module.exports = {
    entry: {
        bundle: './src/sample_index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production'
}

If you run npx webpack --config webpack.config.js now in the dist folder you'll see two files main.js and bundle.js. Now we have two problems with this (1) if we generate a file with a different name the old one stays and (2) our sample_index.html will need to be updated to load our new file name. We can solve one by configuring the next section of the configuration object output.

output

In output we describe what we would like webpack to output (crazy right ?). Currently we have one specification here, the path, i.e. where do we want our bundled file to be output, path.resolve(__dirname, 'dist') which means the get the absolute path to the current directory then output to folder dist.
Now after reconfiguring entry above we saw that the old files generated under a different name are just left there, to fix this we have to tell webpack to clean up after us.

const path = require('path');

module.exports = {
    entry: {
        bundle: './src/sample_index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    mode: 'production'
}

Now if we run npx webpack --config webpack.config.js we'll see that main.js was removed, however we're still left with the other problem of having to edit sample_index.html whenever the bundled filename changes. To get around this we move to a new section plugins

plugins

Plugins like the name suggest can add a wide array of functionality, in this case we would like to tell webpack to generate an index.html file for us and automatically inject our generated bundle into this file.

First we need to install the plugin needed for this html-webpack-plugin

npm install --save-dev html-webpack-plugin

Now we can edit out webpack.config.js to use the html-webpack-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        bundle: './src/sample_index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './sample_index.html',
            filename: 'index.html'
        })
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    }
}

As shown above, plugins accepts a LIST of plugin objects, we only have one, our html-webpack-plugin which is configured to use our sample_index.html as a template for creating a new file called index.html which will contain a script tag that correctly links whatever generated bundle. This means we must edit our sample_index.html and remove our manual efforts of doing such.

sample_index.html now becomes

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id='root'>
            <input type='text' id='title-search-input'/>
            <button id='title-search-button'>Search</button>
            <div id='search-results'>
            </div>
        </div>
    </body>
</html>

Now if we run npx webpack --config webpack.config.js we'll see both our javascript bundle and an index.html file in dist. Now you can open index.html in the browser and test it out.

Development

So far we have been manually refreshing our page and re-opening html files, that's ridiculous, let's fix that. Instead of using some other tool and creating some complex pipeline of building with one then live & hot reloading using another, thankfully Webpack provides a solution within the same ecosystem webpack-dev-server.

Let's install webpack-dev-server

npm install --save-dev webpack-dev-server

Now copy your current configuration into a new file called webpack.dev.config.js and rename your old file webpack.prod.config.js

sample-frontend
  |- package.json
  |- package-lock.json
  |- sample_index.html
  |- webpack.dev.config.js
  |- webpack.prod.config.js
  |- /src
    |- sample_index.js
    |- art_helper.js
  |- /dist
    |- main.js
  |- /node_modules...

Edit webpack.dev.config.js to reflect the following:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        bundle: './src/sample_index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './sample_index.html',
            filename: 'index.html'
        })
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devtool: 'inline-source-map', // allows error messages to be mapped to the code we wrote and not compiled version
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist'),
        },
        port: 3000,
        host: 'localhost',
        hot: true,
        open: true
    }
}

As you can see we added a devServer section to our configuration and in it described how we would like our development server to behave. Firstly static tells it where to find our code i.e. the same place where our code builds to, host and port are self explanatory, setting hot to true enables hot reloading ( keep the app running and to inject new versions of the files that you edited at runtime ), and finally setting open to true will open the browser when we run this configuration.

We've also added a devtool inline-source-map, this maps output ( logs and errors ) to the source code instead of the bundle, this way we can actually use our console to debug.

Now we have two different configurations a dev and prod

we can start the development server by running

npx webpack serve --config webpack.dev.config.js

Your browser should open on localhost:3000 with your app running, now whenever edit your javascript files the app will automatically reload with the changes.
Now note that I specifically said javascript files, this is because as is webpack will only understand javascript and json files. This is why we haven't used any CSS for example, we can use CSS by doing it the normal way ( adding a tag for it ) but we would loose out on the optimizations that webpack would provide when building our output. To make utilize files we need to make use of another section module.

Module and Loaders

Webpack by default only accepts javascript and json files, loaders change this. It does this by adding the ability to load and process these other file types treating each almost as it were another javascript module. The ability to view these other files (e.g. a CSS file) as modules allows webpack to add these to their dependency graph and optimize our build.
Similar to plugins, there exists a wide array of loaders for various file types and the functionality. A loader, somewhat similar to plugin needs to be installed and then setup in our webpack configurations.

Let's add two loaders to help us with CSS

npm install --save-dev style-loader css-loader

Now let's use them in our configurations

first webpack.dev.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        bundle: './src/sample_index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './sample_index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devtool: 'inline-source-map', // allows error messages to be mapped to the code we wrote and not compiled version
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist'),
        },
        port: 3000,
        host: 'localhost',
        hot: true,
        open: true
    }
}

then webpack.prod.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        bundle: './src/sample_index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './sample_index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
}

As you can see we added a module section, where we define rules on what files we want read and how we would like our loaders to be used on those files. The two parts of each rule test and use, tell us exactly which files to look at and which loaders to use respectively. For our rule test basically says use any file that ends with '.css' and use the style-loader and css-loader to process these files. Rules and Loaders can be a bit tricky for example it executes in the order they are included in the configuration and a different ordering can produce a very different result.

Here some more documentation on loaders and heres a list of some loaders.

Let's add some style, create a style.css in src

sample-frontend
  |- package.json
  |- package-lock.json
  |- sample_index.html
  |- webpack.dev.config.js
  |- webpack.prod.config.js
  |- /src
    |- sample_index.js
    |- art_helper.js
    |- style.css
  |- /dist
    |- main.js
  |- /node_modules...

You can do whatever you like with style.css tbh :P but here's a quick something in case you're busy

#title-search-input {
    width:50vw
}
#title-search-button {
    width:30vw
}

#search-results{
    width: 100%;
    text-align: center;
}

.art_piece{
    width: 100%;
    margin: 30px 30px 30px 30px;
    padding:3%;
    -webkit-box-shadow: 0px 10px 18px 2px rgba(0,0,0,0.67); 
    box-shadow: 0px 10px 18px 2px rgba(0,0,0,0.67);
}

(edit: thanks to cswalker21 for reminding me to show this step)
Finally edit sample_index.js and import the style.css like such

import './style.css';

I'm definitely not the best CSS guy so I encourage you to try out your own stuff.
Now let's run start our development server and see how it looks

npx webpack serve --config webpack.dev.config.js

We can also test our build

npx webpack --config webpack.prod.config.js

Now you're all set to start building and exploring on your own, the following are just some extra bits.

Extra Bits

Commands

In case you want to make things a bit simpler either for yourself or for those in your team, you can create a 'shortcut' for your commands using the scripts section of your package.json ( aka npm sripts ).

For example instead of always writing npx webpack serve --config webpack.dev.config.js to start our development server, we can create a 'shortcut command' for example npm run start by editting the "scripts" section and adding a key "start" with value npx webpack serve --config webpack.dev.config.js.

{
    ...
    "scripts":{
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "npx webpack serve --config webpack.dev.config.js"
    }
    ...
}

So now we can run npm run start to start our development server
We can also do something similar for building

{
    ...
    "scripts":{
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "npx webpack serve --config webpack.dev.config.js",
        "build": "npx webpack --config webpack.prod.config.js"
    }
    ...
}

Now we can run npm run build to build our app

TypeScript

Always wanted to try typescript but didn't know how to transpile to javascript for development or even building, let's do it.

Let's install what we need typescript itself and a loader for webpack

npm install --save-dev typescript ts-loader

Now let's add a rule to load .ts ( typescript ) files and also tell webpack what types of files we need to resolve ( module resolution deals with where to find what at build time ). ( see module resolution )
First webpack.dev.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        bundle: './src/sample_index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './sample_index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devtool: 'inline-source-map', // allows error messages to be mapped to the code we wrote and not compiled version
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist'),
        },
        port: 3000,
        host: 'localhost',
        hot: true,
        open: true
    }
}

then webpack.prod.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        bundle: './src/sample_index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './sample_index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
}

Finally we need to add a tsconfig.json to sample-frontend ( tsconfig documentation ) to describe how our typescript should be compiled

sample-frontend
  |- package.json
  |- package-lock.json
  |- sample_index.html
  |- webpack.dev.config.js
  |- webpack.prod.config.js
  |- tsconfig.json
  |- /src
    |- sample_index.js
    |- art_helper.js
    |- style.css
  |- /dist
    |- main.js
  |- /node_modules...

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true,
        "moduleResolution": "node"
    }
}

Congrats now we can write write typescript, as an example create validation_helper.ts in src and add the following:

export const validateSearchQuery = (title: string, limit: number, offset: number) => {
    if(title.length == 0)
        throw new Error("Title is required");
    if(limit < 0)
        throw new Error("Limit must be greater than 0");
    if(offset < 0)
        throw new Error("Offset must be greater than 0");
    if(limit > 10)
        throw new Error("Limit must be less than 10");
    return true;
}

Now you can import validadateSearchQuery from validation_helper.ts and use it to well validate your query
We can edit sample_index.js to following:

import { searchArt } from './art_helper';
import { validateSearchQuery } from './validation_helper';
import './style.css';

window.onload = ev => {
    init();
}

const init = () => {
    console.log('hello I am a sample index.js v5');
    document.getElementById('title-search-button').addEventListener('click', handleSearchClick);
}

const handleSearchClick = (ev) => {
    const title = document.getElementById('title-search-input').value;
    validateSearchQuery(title, 5, 10);
    searchArt({ title }).then(renderResults);
}

const renderResults = ({ artPieces }) => {
    document.getElementById('search-results').innerHTML = artPieces.join('');
}

Now we can develop and build using typescript.

DEV Community: steffanboodhoo

React Quickstart Tutorial

Contents

Inspiration

Prerequisites

Installing Node

OPTION A: (Recommended NVM ( Node Version Manager)

OPTION B: Direct Install

npm and npx

Setup

Files and Core Dependencies

React Scripts

The React Component

JSX

What is a Component

Rendering React

App Structure

Events

DOM and VDOM

Synthethic Events

State

useState

REACTing to state

Hooks

Hooks

useEffect

Routing

Why Have Routes ?

Basic React Router

Routing Necessities

Extra Bits

Conventions

Param Destructuring

useEffect

Sample Network Request and Render

Final Thoughts

Practical WEBPACK Basics: Pure Javascript frontend

Contents

Inspiration

Prerequisites

Installing Node

OPTION A: (Recommended NVM ( Node Version Manager)

OPTION B: Direct Install

npm and npx

Setup

sample files

Webpack basics

How does it work and what does it output

Sample App and Bundling

Configurations

entry

output

plugins

Development

Module and Loaders

Extra Bits

Commands

TypeScript