In this Workshop, I will guide you through the basics of ReactJS, a popular framework used to design efficiently and dynamically web front-ends Here you will learn how to download React, setup a React application and design some funny features using this framework's main features.

A brief history behind React

A framework full of potential

Beginning of React

With it's developement starting back in 2013, It started as a concept library, made to produce webpages using what are called components, making HTML pages production faster.

By that time, PHP was the leading language in order to produce dynamic pages (and is still widely used today due to it's age and support).

React, even though it's concept was new and so very likely to not be totally understood had pretty much no chance to fail as a framework since it was made and supported by Facebook employees who had a huge technical background and by that time, the web industry was not improving a lot.

Going truly open source

After October 2014, the framework went open source and by then, it has never stopped being supported, having numerous contributors and being the most downloaded JS framework of 2021.

It gave JavaScript, it's mother language, a whole new field of use since it was not originally designed to run web applications.

What's even JavaScript ?

Java ?

JavaScript was created back in 1996 and is today handled by the Mozilla Organization, its name is a pure marketing maneuver, Java, another language was at that time very trendy because of it's pretty much limitless use case and virtual environnement. The creators decided to name it similarly to make it more attractive, which actually worked even though they have very little common characteristics.

Script ?

First thought as a scripting language, used to assist within another language's program, it was thought with it's own data format, named JSON (JavaScript object notation), today it's name is very inadequate since it's more of a web language than really a scripting language.

We're not going to use JavaScript

React introduces a new way of writing html through JavaScript, it is called JSX. This format allows the implementation of HTML tags within JS files. This format can be used in a .js file since the language isn't strict with file formatting but for the sake of understanding more easily our code, we'll use .jsx file formats.

These components are ruled by hooks which is a fundamental mechanic of this framework. Hooks are variables or methods that regenerate the components they are used in each time they change.

Main mechanics

Components

Components are the core property of React, the application is divided into little code chunks that each represent a feature or visual asset, these are components, they can hold variables, functions like objects and HTML tags and are ruled by properties which we call props.

Hooks

Hooks are what allows our application to be dynamic. They are variables that, when used within a component, will trigger a re-render of it's parent component when it changes. A very simple example is a counter, clicking it increments a value that is a hook, it's change re-renders the counter which then shows the newly incremented counter.

Easy, isn't it ?

And with that you have pretty much anything to go on, don't you ?

Conditional rendering

Quite explicit, you can render chunks or components or entire components based on conditions. You can choose to display or not an element based on the user's device format, it's personal informations or other parameters such as time or location. It is explained in details here

Modules

Just like in other languages you can import foreign code but in this case you can import any module that is an NPM package, a node package, using other people's code they publish for free. There are ALOT of packages out there that will make your development faster.

How does that run ?

JavaScript cannot run by itself and does not have a default creator-made interpreter such as python's interpreter. We're gonna need something to run it.

Remember node i just mentioned ? It's the engine behind React (and many more frameworks), it's gonna allow use to download, install and run all the code you wrote down as well as the packages you imported.

Node can be used on Windows, MacOS and Linux, not environnement constraint !

Is it really that useful to learn React ?

Being widely used across the web and but trustful companies such as Netflix, Yahoo, Airbnb and even Facebook themselves, there's no doubt, seeing the quality of these websites and web applications that you can jump into React.

It's potential has even grown recently since the apparition of React Native, a derivative version which is aimed towards mobile applications on both iOS and Android so learning React is a huge gateway to sta.

Let's get started !

Installing React

Before installing React itself you're gonna need to install Node and npm, please install LTS version, not the latest

Once installed, you can go into your terminal in Linux or your powershell in Windows and we'll finally get some code.

We'll use the npx create-react-app [Your app name in lowercase] command, this command is gonna generate all the basics to run a simple web applications, this code is always gonna be the same at the beginning and is tidy to write, we call that boilerplate code.

If the command prompt asks you to install the 'create-react-app' package, just type 'yes' or 'y' to accept

This command should have generated a directory.

Go into that one and run the following command

npm install

This may take a while, it converts node packages into node modules which can be read and ran by your code.

Run your app !

When at the root of your project (At the same level as the package.json which is a file describing your project's properties and the packages it holds) simply run

npm start

Node will run the project's code and even better, open a web tab to show you the website. What's best about that is you can modify your code while running the node instance and the website will update instantly without having you to recompile or restart the app.

FInally !

import logo from './logo.svg';
import './App.css';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

export default App;

Here you have the App.js file which is where you will start implementing code. js files are used with CSS files to customize components and tags

Simple hook example

Here we create a counter with an increment button.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

    const [counter, setCounter] = useState(0);

    function incrementCounter() {
        setCounter(counter + 1);
    }

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <button onClick={() => incrementCounter()}>Click me !</button>
                <p>{counter}</p>
            </header>
        </div>
    );
}

export default App;

What's all of that Gabriel ?! I don't even know what I'm typing.

Don't panic, we're gonna divide each part and explain what they are used for.

const [counter, setCounter] = useState(0); is a hook, we declare it using useState which is React's hook creation function.

We use const since we're not gonna re attribute it (No such thing as counter = 1 in our code)

counter will be our variable and setCounter the function we call to change counter, this is how you must do.

useState(0) means this is gonna be a hook and 0 is the value you want your hook variable to be initialized with. So here our counter will start from 0

Right after you have a function which calls the counter setter function. setCounter(counter + 1) increments the counter variable by 1, simple as that.

After that we want a button in our page so I added a tag right under the text, buttons have a onClick attribute to which you can pass a function as i did so it executes each time you click on the component. And that's it ! That was really boring Gabriel, I want to do something more vibrant Color changing hook Ok, ok. How about changing colors ? This time we'll do something funnier, change the background depending on a text color input. First let's understand how to change a color of a component. For those who know CSS, we can reuse CSS properties with hooks, to do that we call the style property of any React component and can assign easily a variable. Let's say you want to change the background color to white (#fff or #ffffff) in hexadecimal notation, you can do as follows: If you are not comfortable with hexadecimal colors you can understand them using these two links: Understanding hex notation RGB Color picker You can simply call the backgroundColor attribute within style and define it's value. Try it with any color that comes to your mind ! Here I use an <input> component which you can read about here of type="text" to handle text. It has a onChange property which is called each time the input changes. We get e from it which is the event fired each time we update the input. We can get the value of the event by getting e.target.value We pass that to a function which updates a hook, the color hook variable. Each time it updates we add an # in front of it to define it's a color value. We then define the backgroundColor as the color hook. Now try that and type something in the page's input. Here's an example, where I input pink color's code, it updates instantly ! Yup that's still way too easy. Now try to build a Portfolio Having all the basics to create components you can build a portfolio that you can use for yourself. You can see my own website as an example of a React website. With little practice and some package search you should be able to do the same ! Any question ? If you happen to love React as I do, you can read alot on their official website which has a great documentation. If you have any personal or technical question you want to ask me. Feel free to contact me through my social medias or by sending me an email. You can find these informations on my website. I'll be glad to help you.