Module 1 - React Components and Component States

Intro to React

In this Core Competency, you will delve into the heart and soul of React programming, exploring its fundamental building blocks that empower developers to create powerful and interactive user interfaces.

React (React.js or ReactJS as it is sometimes referred to) is considered to be the new architecture for JavaScript Web Development. A favorite amongst developers worldwide, React is not only a JavaScript library, but a new approach to web design and implementation. It was originally developed - as Facebook still maintains it.

It all started as a desire to build new features over vanilla JS to make it easier for Facebook to create and maintain its complex interface. But eventually, React became a very popular open-source tool, given its modular nature. React can also be considered a framework, as it offers other modules for more advanced applications. You will explore some of them!

Third-party frameworks (collections of practices, modules, and libraries) are also built to work with React. For instance, Next.JS is a popular framework that contains tools for optimizations, data fetching, and server components. But let's not get overwhelmed!

First, you will learn the fundamental concepts of React and how to bootstrap a React app in your local environment. At its core, React revolves around the concept of components. Components are encapsulated units of functionality that allow developers to break down complex user interfaces into smaller, reusable parts. With React, we harness the power of these building blocks to construct dynamic and responsive UIs with ease.

Understanding the React Library

React has quickly become one of the most commonly used libraries for building applications today.

Because you've now seen some code that allows you to build custom components with so-called vanilla JavaScript (JS), you've understood how to use JS to manipulate DOM elements. React will take that knowledge you have learned and abstract away many of the traditional DOM syntax, methods, and properties (e.g., document.getElementByClassname). As you'll see later, your entire application will live within one targeted DOM element. React will handle the rest for you.

User interfaces today are rich and must deal with ever-changing data. As users interact with DOM elements and many animations and events are fired, the DOM is undoubtedly doing a lot of work. Imagine an app like Twitter or Facebook with users clicking everywhere and constantly changing data (including instant status updates). For these types of large-scale applications, React is very helpful, but you can also use React to bootstrap a simple application quickly!

To keep up with today's demands of the web, we need a way to build applications that can take care of much of the work for us. As developers, we should concentrate on the actual business logic of the application instead of worrying about every single element of the page. Think of React as a higher-level programming language, if you will.

Let's face it, working with the DOM API is hard. The React team recognizes this, so they built a simple engine called the virtual DOM that interacts with the actual DOM for us. We tell the virtual DOM what to render to the actual DOM, and it will do so. Beyond that, it will "react" when our app's state (current condition) changes and will update the DOM accordingly. All on its own!

In a process called "reconciliation," React will detect that the app's state has changed. Then it will update the virtual DOM, noting which nodes have changed due to the state changes. Finally, once it knows which nodes have changed, it will update only those specific nodes on the actual DOM. React takes a lot of pressure off our browsers (and significantly reduces the code size), and it's why React is as powerful as it is.

Today, web applications are enormous, complex pieces of software that millions and millions of users interact with simultaneously. React provides a smooth experience for our users, as well as for those developing applications.

npx @bloomtools/react@latest project-name

npm install
npm run dev

code .

import React from 'react'

export default function App() {
  return ();
}

Working with components

Anatomy of a React Component

React components are the building blocks of the application. Inside the JS file, a component is simply a function, returning a special type of data which looks like HTML. Components are usually created in their own JS files, and are exported so that other JS files (typically the index.js) can import and use them.

The main (root) component is often called App. So go ahead and edit the App.js file like this:

import React from 'react';

const Intro = () => {
  return (
    <div>
      <h1>Hi Bloomtech!</h1>
    </div>
  );
};

Understand that a "component" is a pretty loose term to describe a discrete chunk of your site. A header could be a component, for example. Or a footer, or a video frame, etc.

This one's pretty simple; you're rendering a div with an h1 inside of it. Go check your local web server, which should have updated automatically when you saved the App.js file. The header, the footnote, and the page styling are defined somewhere else (index.html and index.js).

This component is going to render exactly what you'd expect if you had the exact same code below in your HTML file:

<div>
  <h1>Hi Bloomtech!</h1>
</div>

So what's so odd about this? Well, you're mixing two different syntaxes. Part of this block is a regular JavaScript function, and part is HTML. In vanilla JavaScript, you can't have HTML. So if you can't have HTML in JavaScript, then what is that HTML-looking thing?

The HTML inside the return statement is called JSX, or JavaScript Extension. Underneath its disguise, the result of JSX is just a JavaScript object. The React library will parse this return data and translate it into a JS object like this:

import React from 'react';

const Intro = () => {
  return (
      {
          type: 'div',
          props: {
              children: {
                  type: 'h1',
                  props: {
                      children: "Hi Bloomtech!"
                  }
              }
          }
      }
  );
};

During runtime (i.e., when the application is running), the React library will know precisely how to interpret this object and send proper render data to the DOM.

So when you return what looks like HTML in a React component, you secretly return a JavaScript object that describes the kind of HTML we want to make. But, of course, React will figure out how to make it work.

Early on, it's essential to understand that a React component is just a regular JavaScript function. We could return an object like the one written above, which would work, but we want to use JSX for several reasons. First, it's easier to read than that big nested object. And second, it's going to allow us to put our application's logic where it belongs: directly next to the thing the logic applies to.

In other words, JSX is easier to write, read, debug, maintain, and extend. As long as you understand the basics of the JSX syntax, you should be ready to go!

A brief demonstration of React's power

In the above example, you saw the text hardcoded in the h1 tag to read 'Hi BloomTech!'. But React gives you the ability to control our app's content dynamically. Look at this:

import React from 'react';

const Intro = () => {
  const greeting = "Hi BloomTech!";
  return (
    <div>
      <h1>{greeting}</h1>
    </div>
  );
};

The code changed, but the output is the same. That's because the code is a regular JavaScript function, and you're free to declare a variable the way you would normally do:

const greeting = "Hi Bloomtech!";

Once you're in "JSX mode" (inside the return statement), React gives you the power to escape back into regular JavaScript and refer to that variable by using the curly brackets: <h1>{greeting}</h1>

These curly brackets will evaluate any valid JavaScript expression. So if you change the content of the h1 to <h1>{2 + 2}</h1>, you get the text "4" in the h1 header. Try it!

Now you know the underlying mechanism of React. You don't want to have to hardcode the content of our HTML; instead, you want to compute it.

By now, some of you are probably thinking, "Computing our markup, isn't that what we learned DOM manipulation for?" It's a great question.

Why do it this way?

We're going to focus on two central pillars of React's design philosophy: the separation of concerns and declarative programming.

Separation of concerns

In computer programming, "the separation of concerns" refers to a design philosophy that each piece of your code should do one and only one thing, as much as possible. Functions with a lot of moving parts are hard to debug. In addition, one large function might be tricky to test. If we can split that function into smaller pieces that are easy to test individually, our application will be more robust and easier to understand.

Think of a button. We can't truly separate a <button> tag from the function the button invokes. Separating the two (one in an HTML file and another in a JavaScript file) isn't a separation of concerns; it's cutting one concern in half and then placing them apart. It's a headache we don't need.

Consider the difference between creating a button with HTML and JS verses doing it in React

//HTML FILE
<button class="button"></button>

//JS FILE
let button = document.querySelector('.button');
button.addEventListener("click", (data)=>{...logic} )

This works fine if you are using the traditional DOM methods, since you don't want to to clutter your HTML file, or have to come back to it for edits.

But with React, you are doing it all at once inside the JS file:

<button onClick={ () => submitForm(data) } />

Imperative Programming vs Declarative Programming

You have an array. Say you want to iterate over it and double each number. Here are two ways you could go about it.

let myArray = [1,2,3,4,5];

for (i = 0; i < myArray.length; i++) {
    myArray[i] = myArray[i] * 2;
}

Or:

let myArray = [1,2,3,4,5];

const double =  number => number * 2;
myArray.map(double);

The first approach is an example of imperative code, and this is the kind of approach with which we're most familiar. There's nothing wrong with imperative code, it's very explicit, and all code is ultimately imperative at a lower level. The problem with imperative code is it's pretty tricky, and in more complex examples, it can be hard to understand what the code does at a glance.

The second approach is an example of declarative code. Instead of telling the computer, step by step, how you want it to do something, you just tell it what you want it to do.

myArray.map(double) means "Map over my array and double everything inside of it."

With practice, declarative code is easier to work with. This is important because, believe it or not, as a programmer, most of your time is spent on something other than writing code. Instead, it's spent reading other people's code and trying to understand what it does. If you can grasp this distinction and appreciate its value, congratulations! You now understand the basis of functional programming, the programming paradigm that React is modeled after.

export default function App() {
  return (
    <div className="App">
      <p>
      😂
      </p>
    </div>
  );
}

const emoji = "😂";
const titleObj = {
  title: "Emoji!"
};

export default function App() {
  return (
    <div className="App">
      <h2>{titleObj.title}</h2>
      <p>
      {emoji}
      </p>
    </div>
  );
};

Conclusion

At this point, you have learned the fundamentals of React, including its JSX extension, and how it is related to components and rendering.

React is great way to build dynamic applications, abstracting a lot of low level JavaScript into components that are easy to read, write and debug.

Moving on, you will learn how to use React to deal with events, manage and pass data across components!

State in React

State management is a vital aspect of building robust and interactive React applications, or most applications in any language, for that matter. The concept of State Management dates back to the first studies about Computer Science, where the computer and its program are often called a State Machine.

State refers to the condition of all data at any given time. When the application is in a steady mode, waiting for some event to decide what to do next and continue, we say that the application is ready to move from one particular state to another.

In this Core Competency, you dive deep into the concept of state and its significance in the React ecosystem. You will explore how React components utilize state to handle dynamic data and UI updates, allowing for seamless user experiences. With practical examples and best practices, you'll gain a comprehensive understanding of state management techniques in React, empowering you to create scalable and responsive applications.

In the past, dynamic pages used to rely on back-end servers to handle data and perform UI updates. The frontend would constantly communicate back and forth with the web server to provide a dynamic experience to the user.

React allows a complete self-contained dynamic application running solely on the user's browser! This not only improves responsiveness but makes it significantly easier to design and maintain apps.

Get ready to unlock the full potential of the state in React and elevate your development skills to new heights.

Working with state

In React, you will often talk and think about "state". But what is state, and why is it so essential?

At a high level, state represents the condition of a system at a particular point in time, which is subject to change as actions are performed. For example, consider a soccer match where each team has scored three goals. In this context, we say the "state" of the game is "tied, 3x3". Similarly, a traffic light alternates between three states: red, yellow, and green, each representing a different condition with corresponding behaviors, and each happening in a pre-defined order.

If you've ever used a to-do list app, think about the various conditions it could be in. You might start with a state of "three to-dos, none of which are completed." Then, as you mark a task as done, you've changed the app's state. This change in state might be reflected visually on the screen, such as by crossing off a completed item or updating the count of remaining tasks.

Managing the state of your application is crucial to providing a responsive and dynamic user experience. The state dictates the behavior and presentation of your app at any given moment. React's state management capability allows developers to track these changes efficiently and update the interface in response, ensuring that the user always interacts with the most current "version" of your application. This is the power of state in React, a fundamental concept you'll soon become intimately familiar with as you journey into this exciting library.

import React from 'react';

const happyEmoji = "😁";
const sadEmoji = "😞";

export default function App() {
  return (
    <div className="App">
      <h1>
        {happyEmoji}
      </h1>
      <h1>
        {sadEmoji}
      </h1>
    </div>
  );
}

import React from 'react';
import {useState} from "react";

const happyEmoji = "😁";
const sadEmoji = "😞";

export default function App() {

  const [happyOn, setHappy ] = useState();

  return (
    <div className="App">
      <h1>
        {happyEmoji}
      </h1>
      <h1>
        {sadEmoji}
      </h1>
    </div>
  );
};

const [happyOn, setHappy ] = useState();

let happyOn;
let setHappy = (value) => {happyOn = value;};

setHappy("true");
console.log(happyOn); // "true"

const [happyOn, setHappy ] = useState();

const [happyOn, setHappy ] = useState(false);

let happyOn = false;
let setHappy = (value) => {happyOn = value;};

import React from 'react';
import {useState} from "react";

const happyEmoji = "😁";
const sadEmoji = "😞";

export default function App() {
  const [happyOn, setHappy] = useState(false);

  return (
    <div className="App">
      {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
    </div>
  );
};

<div className="App">
  {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
</div>

{happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}

const [happyOn, setHappy] = useState(true);

const [happyOn, setHappy] = useState(false);

Changing state using events

Now that you have learned the concept of state in React, let's dive into how to change it using events. You're likely already familiar with event listeners, such as click listeners, from your previous JavaScript experience. In React, you'll continue to use them but with a slight twist. If you want to listen for a click event on a React component, you'll use a special event handler called onClick. Note the camel-case spelling - this is a key aspect of the JSX syntax, which treats event handlers differently than regular HTML.

The onClick event handler receives a function, which is called a "callback function". React invokes this function when the event occurs, allowing your code to perform various actions, including updating the state. State will change in response to user events, and callback functions provide a flexible means of defining these responses.

Before you practice with state changes, it is essential to understand React's process for dealing with state changes. Every time any state is updated, React will:

1. Decide if the page needs to be rendered
2. Render the page if needed
3. Set the new state
4. Re-enter the "waiting for changes" mode again

You must follow some rules when updating state to ensure this process works as it should. Following these rules will avoid issues and debugging time in the future. Here are the rules:

happyOn = false;

setHappy(false);

<div className="App" onClick={ () => setHappy(false) }>
  {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
</div>

<div className="App" onClick={setHappy}>
  {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
</div>

<div className="App" onClick={setHappy(false)}>
  {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
</div>

import React from 'react';
import {useState} from "react";

const happyEmoji = "😁";
const sadEmoji = "😞";

export default function App() {
  const [happyOn, setHappy] = useState(false);

  return (
    <div className="App" onClick={ () => setHappy(true) }>
      {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
    </div>
  );
};

import React from 'react';
import {useState} from "react";

const happyEmoji = "😁";
const sadEmoji = "😞";

export default function App() {
  const [happyOn, setHappy] = useState(false);

  return (
    <div className="App" onClick={ () => setHappy(!happyOn) }>
      {happyOn === false ? <h1>{sadEmoji}</h1> : <h1>{happyEmoji}</h1>}
    </div>
  );
};

Conclusion

You have built a fully functional and interactive application with just a few lines of code! That's the power of React.

By simply initializing your project, the project automatically pulls down the libraries and imports the components correctly into index.js for you. Now you can fully concentrate on the component's code instead of configuring your project. By understanding the "React syntax" and respecting some general rules, creating and adding interactive components to your app is easy and fun with React!

Guided Project

React Components and Component State Starter Code

React Components and Component State Solution

Module 1 Project: React Stateful Widgets

This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored React components and component state. During the module, you studied what React is, what React components are and how to build them, what state is and how to make a component stateful, and how to update component state with click handlers. In this project, you will demonstrate proficiency of these subjects and principles by fleshing out several stateful components.

The module project contains advanced problems that will challenge and stretch your understanding of the module's content. The project has built-in tests for you to check your work, and the solution video is available in case you need help or want to see how we solved each challenge, but remember, there is always more than one way to solve a problem. Before reviewing the solution video, be sure to attempt the project and try solving the challenges yourself.

Instructions

The link below takes you to Bloom's code repository of the assignment. You'll need to fork the repo to your own GitHub account, and clone it down to your computer:

Starter Repo: React Stateful Widgets

• Fork the repository,
• clone it to your machine, and
• open the README.md file in VSCode, where you will find instructions on completing this Project.
• submit your completed project to the BloomTech Portal

Solution