React JS

React The Complete Guide By Maximilian Schwarzmuller – Course Overview

Some time in the past I became very interested in React JS so I started the course React the complete guide made by instructor Maximilian Schwarzmuller. This course is basically the most famous one on React. I also recommend the Coursera React course: Front-End Web Development with React taught by professor Jogesh K. Muppala. The Coursera course is a little bit outdated but it has some very nice explanations.

Anyway, regarding Maximilian’s course I made it to 70% and interrupted it to rework one of my projects using API Platform, React JS and Next JS. The first 70% of Maximilian’s course together with Muppala’s course were enough for me to handle this project. Actually I used a React JS and GraphQL theme but still I had to personalize it and perform custom queries and mutations and also things this theme was not supposed to do. With over 60-70% of the project completed I decided to go back to Maximilian’s course to see if I can optimize my code.

Maximilian’s course has a module called Section 29: Optional: React Summary & Core Feature Walkthrough. As its name implies this module is a summary. And it is more than enough for somebody in my situation: I learned React in the past and worked with it, now I just want to know if I’m missing something. And this entire review is based on that module.

The module starts with the idea that React JS is a client side library for building modern, reactive user interfaces. Basically React runs on top of Javascript and helps us build interfaces that do not reload the page, everything happens in the browser after the page loads. According to wikipedia: “A human-to-computer user interface is said to be “reactive” if it has the following characteristics: The user is immediately aware of the effect of each “gesture”.” There are other less important characteristics of reactive user interfaces. The point is a reactive user interface reacts almost instantly to any command the user issues to it. This is normally achieved by loading the entire content of the page first even though we don’t display some of it initially. For example I may have a subpage tab with rated products and another one with sale products. The interface can be called reactive if I load both lists first and the user sees the results of clicking the subpage tabs instantly. Another idea is that React uses a declarative approach of writing code. Basically we define the elements and what we want them to do and React handles their working. For example we write a div that has an onClick event and that event is mapped to a function that opens a modal by using state. This is our part. But next React handles everything else: updates the state that controls the display of the modal which also updates the virtual DOM which in the end syncs with the DOM itself. According to the React documentation: “The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.”. So when using React we handle the logic of the UI while React handles its control.

You will not find exactly this information in Maximilian’s course – I am adding further explanations where I feel they are needed.

Next the course discusses SPAs or single page applications. The concept is a single page that shows/hides different content depending on user actions. My project is not a SPA because it is not that simple. I could not possibly load all information in a single page, the database alone has hundreds of mbs and I’m performing complex queries against it. It is an ecommerce project which needs multiple pages rather than a SPA. Don’t get me wrong: Facebook web is a SPA and is the most complex web app out there. But Amazon (eCommerce) is a MPA – multi page app. If you google SPA vs MPA you will see a lot of outdated content. Technologies like Next JS + React JS enables us to take the advantages of SPAs and put them into MPAs. For example you can have a SPA app that behaves just like a MPA one by changing the url without reloading the page – the concept is called shallow routing. So MPAs benefits like SEO or analytics are just outdated information. The only real advantage of MPAs is they are easier to build when handling complex requirements – the separation of concerns brought by multiple pages makes things a lot easier.

Furthermore the course mentions React alternatives like Angular JS and Vue JS. Angular is a framework that has multiple features so it’s an overkill for smaller projects while on large projects you don’t have to rely as much on the community (installing packages and learning how to use them). Vue JS is also a component based framework, just like Angular, it has less features than Angular but more than React. Still judging by popularity, React is by far the most popular technology among all three.

Next Maximilan explains how it is possible for us to write HTML inside Javascript as it is – without using template literals for example. The HTML like looking elements are actually React components. And these components, like all React components (built in or custom made) are transformed during the build step – behind the scenes that code is transformed before it reaches the browser. Besides, we also need a development server that serves the application and also reloads the browser after every change. So that is why when we are creating a React app we use the command “npx create-react-app my-app” which gives us everything we need. But this command requires Node JS. Node JS is a Javascript runtime which allows us to write Javascript outside the browser. But React is not a Node JS library, we are not creating a Node JS application. But the command to create a React app requires Node and Node is also used for reloading the browser and some code transformations which transforms the code we write into code that runs in the browser. After we run the create-react-app command we just need to change directory to the installation one and run “npm start”. Npn stands for node package manager and it was installed with Node and the command runs a script that starts a development server which serves our app.

We would also need a code editor and I, just like Maximilian, use Visual Studio Code. Actually I started using VS Code for PHP too because I don’t want to switch editors. PHPStorm is a lot better than VS Code for PHP but not for React or Javascript. And PHPStorm is also not free.

Further on Maximilian spends some time explaining the default app created by create-react-app. If you ever used React you can skip this lesson. The idea is we have function components (function App) and only the information these functions return is rendered in the browser, after the code has been transformed of course. A rule to be aware of is that in React custom components start with a capital letter, to differentiate from the built in components.

We can make components dynamic by passing data as props. For example we can use a component like

<SomeComponent text=“some text” /> 

and in the component we get the data using:

function SomeComponent = ({text]) => {
	//the text we passed is available here as text
}

Another important feature of React is the ability to listen to events. Events are very easy to use in React. For example we can have a div with an onClick attribute:

<button onClick={onClickHandler} />

And lastly we need a function to handle the event. Something like

function onClickHandler(event) => {
	//handle the event
}

In the button declaration you can notice the function name of the handler has been written without parentheses. This happens because we want the function to get called on click and not when the code is evaluated by the browser.

The next discussion is about the state. One basic application of state is to show/hide content depending on user actions. Let’s imagine the code:

const [modalIsOpen, setModalIsOpen] = useState(false);

The code above defines a state modalIsOpen with a default value of false. In the template we can have

{modalIsOpen && <ModalComponent></ModalComponent>}

As you can imagine the code above shows the modal component only if modalIsOpen is true. And all we have to do next is to call setModalIsOpen(true) when we want the modal to be shown.

The onClick event above would work out of the box with React components – the JSX HTML looking like elements. For custom components like ModalComponents we have to define the behavior. This is where event props come to the rescue. Let’s see the following code:

First we define a state, just like before:

const [modalIsOpen, setModalIsOpen] = useState(false);

We also add a function that sets the modal state to true thus displaying it:

function showModalHandler () {
   setModalIsOpen(true);
}

Next we add the modal and passing the showModalHandler function to it via props:

<ModalComponent onClick={showModalHandler} />

In the modal we can have a div for example which is a built in component so it has the on click prop:

<div onClick={props.onClick} />

What you can see above is that we forwarded the on click behavior (changing the state by calling showModalHandler) to the modal and trigger it by a built in component (the div) because the div has the onClick behavior of calling a function when clicking on it.

For a list with all React events you can check out the documentation.

The next lesson is about routing – a tool that watches changes in the URL and shows content depending on the URL without reloading the page. The router gives SPAs the illusion of MPAs – we talked about this earlier. I have not bothered with the React router because I use Next JS too and Next uses a file system based routing rather than React’s routing.

Maximilian continues by discussing CSS modules. In small projects we can have a single css file which contains the entire style of the app. But in larger projects with thousands of components we need to make sure styles do not clash with each other. And React provides a way of avoiding style clashes by scoping the style to each component with the help of CSS modules. Next JS supports CSS modules too which work like the React ones.

The next lesson is about outputting lists of data. Let’s say you get a list of products from an API and you want to display it in your React app. This is actually very simple to do.

Let’s say the API returns something like:

[
	{
		id: 1,
		title: “Title #1”
	},
	{
		id: 2,
		title: “Title #2”
	},
	{
		id: 3,
		title: “Title #3”
	}
]

To transform such an array of data from an API into JSX elements all you have to do is to iterate the data using Javascript map function:

let titles;
titles = data.map((element) => {
	return <li key={element.id}>{element.title}</li>;
};

And in the template we just need to use the title variable:

<h1>Titles</h1>
<ul>{titles}</ul>

After this, in the rest of the module Maximilian discusses forms, HTTP requests and context.

I really recommend the course and in the other modules you can learn about React hooks, React Redux, animating React apps, Next JS and a lot more. 

The course is very practical and asks you to write a lot of code while also discussing principles and best practices.

The only minus I can see in this course is the fact that it is quite repetitive and if you have some front end experience you might get bored sometimes. If you’re not experienced on the other hand you might find repetition useful for better learning.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.