DEV Community: Software Development Academy

Handling multiple pages with the external component React Router DOM

Software Development Academy — Fri, 04 Jun 2021 12:25:07 +0000

Video tutorial for this article

React Router DOM is an external component that allows you to build bigger projects by separating your project into different pages.

Pre-requisites

What is a Single Page Application (SPA): An excellent short video explaining what a single page application is and why they are so important.

Quick disclaimer

After watching the SPA video above, we can expand about this world of SPA's using React and React Router DOM (I will refer to it as Router from now on to keep it short).

The Router simulates multiple pages with a little trick of changing the browser URL using JavaScript. It is like typing google.com and then google.com/search but without pressing the enter key to change the page. This allows the Router to tell React it has to render different content based on the URL.

The router can utilize this trick to pass information as well. For example, adding an "?" at the end of the URL like google.com/search/?cats or google.com/search/?dogs will allow the Router to use that keyword as a variable and send it across pages.

Intended result

We will have by the end of the article: React Router DOM interactive example.

Figure 1: Collage of the pages we intend to replicate.

Figure 2: The app hierarchy diagram.

Figure 3: React Router DOM most-used components.

Legend:

🟦 Blue: Component created by us.
🟥 Red: Browser Router external component.
🟩 Green: Switch external component.
🟪 Purple: Route external component.
🟨 Yellow: Link external component.

Getting started

Just by looking at the diagram, you can see how big this article will be. Now it should start making sense why it is best to teach certain React concepts in a different order.

To tackle this project we will focus on 3 areas:

How to install the Router
How to set up the App component
How to set up the Header component

How to install the Router:

First, we need to install the external component using NPM:

npm install --save react-router-dom

App component:

Then we proceed to import and utilize the Router components, similar to what we did in the previous article.

import { BrowserRouter, Switch, Route } from "react-router-dom";

import HeaderBar from "./components/HeaderBar";
import PageA from "./components/PageA";
import PageB from "./components/PageB";
import PageC from "./components/PageC";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <HeaderBar />
        <Switch>
          <Route component={PageA} path="/" exact />
          <Route component={PageB} path="/page-b" />
          <Route component={PageC} path="/page-c" />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

Let's break the new code into detail:

We import not 1 but 3 components from react-router-dom: BrowserRouter, Switch, and Route.
<BrowserRouter> wraps around everything. This is because anything inside it will have access to the web browser URL as a state variable.
<Switch> is the area where you want your navigable components to appear.
<Route> is the component that holds our individual pages. It has 2 important properties:
1. component: Receives the component you want to use as a page.
2. path: The browser's route that will allow users to navigate directly to this page.

Note 1: Watch out the moment you do the import. React has a library called react-dom (without the word router). React uses this library to navigate between components inside other components. Choosing the wrong import library will lead to errors with messages that make no sense.

Note 2: The header bar is outside of the Switch because we do not want it to change when we navigate between pages. However, it is inside the BrowserRouter because it has links that need to interact with the web browser URL.

Note 3: The first route is / to represent the home page, and this route needs the word exact to inform the Router to not confuse it with other routes starting with / but with more words after it.

Header Bar component:

Figure 4: The header bar component.

import { Link } from "react-router-dom";

export default function HeaderBar() {
  return (
    <header className="header">
      <Link to="/">Page A</Link>
      <Link to="/page-b">Page B</Link>
      <Link to="/page-c">Page C</Link>
    </header>
  );
}

Lets analyze the code:

We import Link from react-router-dom, just like we did on App.jsx with the other Router components.
<Link> behaves like an anchor or button tag. It has the property called to, where you need to write the same route you put in the <Route path="" /> property.

Conclusion

This covers the basics of Router navigation. In class, we will cover more complex cases like using the URL to pass variables between pages.

For now, we can move to the next article: Manage server state with useEffect hook to learn how to fetch data in React.

Additional reading:

React Router Tutorial: A 30 min video that explains everything you need to know about this external component. It may be long, but it explains the advanced cases like sending variables through the URL.

Credits

Cover: Photo by Heidi Fin on Unsplash

Form events in React

Software Development Academy — Fri, 04 Jun 2021 12:23:46 +0000

This article will combine the state to manipulate formularies.

Intended result

This is what we will have by the end of the article.

Figure 1: A quick and simple form made in React.

Figure 2: Hierarchy chart of the app. Note the boxes with dotted lines aren't components but tags inside the App.jsx

Getting started

Our code examples are getting more complex, but we can still break this down by focusing only on new things:

The form tag
The input tag

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  function onSuscribe(event) {
    event.preventDefault();
    alert(`Welcome on board ${name}`);
  }

  function onName(event) {
    setName(event.target.value);
  }

  return (
    <div className="App">
      <h1>Our new customer is {name}</h1>

      <form onSubmit={onSuscribe}>
        <input value={name} onChange={(event) => onName(event)} />
        <br />
        <button>Suscribe</button>
      </form>
    </div>
  );
}

Form tag:

Note that the code to trigger the submission is attached to the form instead of the button.

onSubmit property in the form tag to run a function when the user press the form button.
event.preventDefault() on the onSuscribe function. This line is necessary to avoid the webpage to reload automatically after sending the form.

Reloading the page was the normal behavior when you needed server-sided languages to do basic form manipulation before JavaScript became a powerful language.

Because the form is not directly connected to a state that changes the event, you can omit the arrow function to pass the event like in the input field.

Input tag:

The input has a property value that receives the state.
The input also has a property onChange that runs an arrow function each time the user types inside the field.
The arrow function has 2 events:
1. The input event fired each time the user types.
2. The same event passed as an argument to be used in a function.

Conclusion

Now we are halfway done in React. The next day, we will start building large-scale applications by fetching data from a server and handling multiple pages inside our React project.

You can take a break before moving to the articles intended for the next day, or click here to continue your studies.

If you want to see the finished code, open this link and open the branch forms.

Credits:

Cover: Photo by Kelly Sikkema on Unsplash

Button events in React

Software Development Academy — Fri, 04 Jun 2021 12:22:30 +0000

Behind the scenes, buttons in React behave like pure JavaScript buttons. The advantage is that you can put the event directly in the button without creating a variable to reference the button.

Pre-requisites

Arrow functions: A video that will help you convert normal functions to arrow functions to be comfortable reading React code.

Intended result

Figure 1: A simple page with 2 buttons.

Figure 2: App hierarchy diagram.

Legend:

🟦 Blue: Component created by us.
◻️ Grey: Normal tags.

Getting started

There are many ways to create button events in React, but let's focus on 2. They depend if you want to call a function without passing arguments or if you need to pass arguments.

Calling a function without passing arguments
Calling a function that needs to pass arguments

Calling a function without passing arguments:

export default function App() {
  function myFunction() {
    alert("You click me");
  }

  return (
    <div className="App">
      <button onClick={myFunction}>Click me</button>
    </div>
  );
}

Let's analyze the code:

function myFunction() {} Is the function called when you click on a button.
onClick={myFunction} the onClick property will fire the function that you pass to it.

Note: We don't put parenthesis in the function inside onClick. Doing so will run the function when the page load, and then the button won't work when the user clicks on it.

Calling a function that needs to pass arguments:

export default function App() {
  function myGreet(name) {
    alert(`Hello ${name}`);
  }

  return (
    <div className="App">
      <button onClick={() => myGreet("Ana")}>Click me</button>
    </div>
  );
}

Let's analyze the code:

function myGreet(name){} The function to run, note that it has an argument.
onClick={() => myGreet("Eduardo")} In order to pass a function with arguments, we need to create a function on the fly, inside the onClick event. When the user clicks on the button, it will call the arrow function, thus, running any code inside it.

Here is where the arrow function comes to fruition. This allows us to write a shorter syntax to avoid making our JSX messy.

Finally, you can pass as many arguments as you want. But to be organized, stick to 1 or 2 arguments. If you need to pass more arguments, use an object or array for better organization.

Conclusion

This article will allow you to practice how to use buttons to modify information on the screen by manipulating the state.

The next article is Form events in React that goes deeper into the state, so users can submit data to your application.

In you want to see the finished code open this link and open the branch buttons.

Additional reading

Handling Events official React documentation

Credits:

Cover photo: Photo by Matthew T Rader on Unsplash

Manage global state with Recoil.js

Software Development Academy — Fri, 04 Jun 2021 12:21:01 +0000

Video tutorial of this article

So far, we have built small projects. In the prop article, we learn how to pass information from a parent to a child. But what happens if we need to pass information between siblings. You can create the state on the parent and then send it to each child, but at one point, your main component will be full of states that should belong somewhere else.

Enter global state management, a way to create state variables in a separate file that any component can import without receiving data using props.

In this article, we will use Recoil.js, a library created by one Facebook developer working in the React team that is the easiest way to implement global state management.

Intended result

Interactive demo

Figure 1: Application to do.

Figure 2: App hierarchy chart. Click the image to zoom it to read the description of each component.

Notes:

The global state is floating around to denote its independence to the component diagram.
The state file extensions are .js because they are plain JavaScript files instead of React components.
We could have a single JavaScript file for both global state variables, but I want to teach how to import and export variables in different files.
Each Recoil variable must have its own unique name, even if you have the variables in different files.

Getting started

To work with Recoil, we need to do these steps:

Install Recoil
Setup App.jsx
Export State Variables
Import State Variables

1. Install Recoil

First, we need to install Recoil using NPM inside your project folder.

npm install recoil

2. Set up App.jsx

This step needs to be done in the App.jsx regardless of where we need to use global state data.

// App.jsx

import { RecoilRoot } from "recoil";

export default function App() {
  return (
    <div className="App">
      <RecoilRoot>
        <h1>Pet shop</h1>
      </RecoilRoot>
    </div>
  );
}

import { RecoilRoot } from "recoil" to enable the Recoil library
<RecoilRoot> needs to wrap around any parent or child component that may need access to the global state.

3. Export state variables

I'm showing one 1 state file, but this applies to any other state file as well.

// state/userData.js

import { atom } from "recoil";

export const petState = atom({
  key: "petState",
  default: "No pet choosen",
});

import { atom } from "recoil": A Recoil atom is a JavaScript Object used to hold the data you want as a global state variable.
export const petState To indicate that we will import this variable into other files.
atom({}) The object that set up this global state variable. Its parameters are:
1. key: The unique id of this state. To avoid confusion, use the same name as the constant.
2. default: The initial value of this state. It can be a string, boolean, array, object, etc.

4. Import state variables

I'm showing the Content component, but this applies to the App, Header, and Footer components.

// components/Content.jsx

// Core
import { useRecoilState } from "recoil";

// Internal
import { countState } from "../state/siteSettings";
import { petState } from "../state/userData";

export default function HeaderBar() {
  // Global state
  const [count, setCount] = useRecoilState(countState);
  const [pet, setPet] = useRecoilState(petState);

  // Method
  function onClear() {
    setPet("");
    setCount(0);
  }

  return (
    <header className="header">
      <span className="pet-choosen">{pet}</span>
      <button onClick={onClear}>Clear choice</button>
    </header>
  );
}

This one is longer but lets take our time to analyze it:

import { useRecoilState } from "recoil" Instead of using React useState to handle a local state, we use Recoil to handle a global state.
import { petState } from "../state/userData" Here we import the variable we created in the State file.
useRecoilState(petState); instead of using useState we use useRecoilState. petState is the initial value that we imported in the previous step.

You can see that inside the JSX and the function that controls the button, the code is the same as using the useState hook.

Conclusion

Recoil has a key advantage over other global state management libraries: It looks and behaves exactly like React hooks. Thus, making it easy to mix them without needing to learn that much.

If you want to see the finished code, open this link and open the branch global-state.

Additional reading

Recoil documentation: To learn more tricks that Recoil can do.
Context API: The current way to do global state management on React. Is not hard to learn, but it does not organize your code as elegantly as Recoil.
Redux: The original way to handle global state on React. Please do not click on it unless you want to have nightmares. It is the equivalent of the SE module (SDA students understand this inside joke) but on code.

Combining Recoil with React Router DOM

If you have <BrowserRouter> to handle navigation, it does not matter if Recoil wraps BrowserRouter or the other way around.

// Valid
<div className="App">
  <BrowserRouter>
    <RecoilRoot>
      <Switch>
        <Route component={Page} />
      </Switch>
    </RecoilRoot>
  </BrowserRouter>
</div>;

// Also valid
<div className="App">
  <RecoilRoot>
    <BrowserRouter>
      <Switch>
        <Route component={Page} />
      </Switch>
    </BrowserRouter>
  </RecoilRoot>
</div>;

Credits

Cover picture: Photo by Edgar Chaparro on Unsplash
Video tutorial: RecoilJS - State Management Library For React by Maksim Ivanov.

Manage server state with useEffect hook

Software Development Academy — Fri, 04 Jun 2021 12:18:49 +0000

Video tutorial of this article

This article will teach the basics of the useEffect() hook to make fetch calls to a server.

We will use the fantastic and free API mockup resource called JsonPlaceholder to practice some network calls.

Pre-requisites

Promises: Explains a way to run code only after other code that we don't know when is going to be ready.

Note: If you want to use Async & Await, there is a special hook called useCallback, more info in the section: Additional reading.

Intended result

Figure 1: Todo list

Figure 2: App hierarchy chart.

Anatomy of the useEffect hook

Figure 3: The parameters of the useEffect hook.

The first parameter is a function usually written as an arrow function. Inside the function, you do your network call using fetch().

The second parameter is an array of state variables. It is used to tell React to re-render the page only when these state variable changes.

If you omit the second parameter, React will enter an infinite loop, crashing the application. Why? Because as we mentioned during the Introduction to State management, React refreshes the page each time the state changes. But if we refresh the page, the fetch data will be called again, changing the state, and the page will be refreshed and so on a so forth.

Think about the second parameter as a brake to tell React to refresh the page once instead of entering an infinite loop.

Getting started

To tackle the complexity we will focus on 3 areas:

General app setup
useEffect first argument (function)
useEffect second argument (array)

import { useEffect, useState } from "react";
import TaskItem from "./components/Item";

export default function App() {
  console.log("1 App.jsx created");

  // State
  const [taskData, setTaskData] = useState([]);

  // Method
  useEffect(() => {
    console.log("2 App.jsx useEffect()");

    fetch("https://jsonplaceholder.typicode.com/todos/")
      .then((response) => response.json())
      .then((json) => setTaskData(json));
  }, [setTaskData]);

  // Component
  const TaskList = taskData.map((item) => {
    return <TaskItem key={item.id} prop={item} />;
  });

  return (
    <div className="App">
      <ol>{TaskList}</ol>
    </div>
  );
}

Note: This is the first exercise we have a console.log() inside the code. This is on purpose, so you can open the console and see the exact moment the App.jsx component is destroyed and recreated once we have the server's data.

Lets break down the code line by line:

General App:

We import the new hook useEffect in addition to the useState hook.
We create a state variable called taskItemData as an empty array to hold the todo items fetched from the server.
We use the useEffect() hook directly without assigning a const or a function.
Finally, TaskList is a list of <TaskItems/> by using the taskData state getter, and we pass to each copy its corresponding item.

useEffect first argument:

Inside useEffect, we pass the arrow function. This will be called each time the contents of the App component change. In this case, we want to refresh the page when new data arrives from the server.

Inside the arrow function, a fetch() function calls the server. Note that we need to append 2 then() statements to:

To convert our raw data into legible JSON.
To assign this JSON to our taskData state using the setTaskData() setter.

useEffect second argument:

We put setTaskData in the array inside the second argument of the useEffect hook. Because we are only calling the setter and not the getter, we don't need to add taskData.

If you omit the [] entirely, React will enter an infinite loop because each time you set setTaskData, the state will change, refresh the page, and when you set the data again, it will refresh over and over.

If you put the [] but leave it empty, React will refresh the page 1 time only. This will work for this small example, but on bigger projects, this will stop calling other network calls because you aren't allowing the page to refresh when other pieces of state change. So get used to putting the necessary state getters and setters.

Conclusion

This example taught you the basics of fetching data using the useEffect hook.

You can take a break before moving to the articles intended for the next day, or click here to continue your studies.

My recommendation is to practice creating individual projects for each API endpoint that JSONPlaceholder has. The goal is to get comfortable setting up the useEffect hook and write its 2 arguments without copying and pasting the code.

If you want to see the finished code, open this link and open the branch server-state.

Additional reading

React hooks documentation: For a detailed explanation of the difference between all the available hooks.
useCallback hook: A short video tutorial to help you organize your useEffect code into smaller separated async functions.

Credits

Cover: Photo by Alexey Savchenko on Unsplash
Video tutorial: Learn useEffect In 13 Minutes - React Hooks Explained by Web Dev Simplified.

Manage local state with useState hook

Software Development Academy — Fri, 04 Jun 2021 12:17:44 +0000

Video tutorial for this article

Let's put into practice the concepts of state by using the useState hook to show and update information on the screen.

Pre-requisites

Destructuring: Watch from the beginning when it mentions arrays until it mentions objects.

Intended result

Figure 1: The components we will build, the one on the left without state and the one on the right with the state hook.

Figure 2: The application hierarchy diagram.

Type of React Hooks

React has many kinds of hooks, but today we will focus on the most basic yet most used scenario to keep the learning process simple.

The most common used React Hooks to manage different kinds of state:

This article will cover the first case, the useState() variable for local state management.

Creating a useState() hook

To create a useState() state, follow these steps:

import { useState } from "react";

export default function App() {
  const [state, setState] = useState(0);

  function increase() {
    setState(state + 1);
  }

  return (
    <div className="App">
      <p>Count {state}</p>
      <button onClick={increase}>Increase counter</button>
    </div>
  );
}

For now ignore, the button that calls a function, we will see it in greater detail on the article about buttons.

Let's analyze the code line by line:

import {useState} from "react" allows us to import the React Hook functionality.
const [state, setState] = useState(0); allows us to initialize the React Hook.
- The first value is the getter.
- The second value is the setter.
- Inside useState(), we put the initial value.
{state} inside the JSX is used to call the getter and display the information on the screen.
setState()is used to call the setter and update the information on the screen.

You can create hooks using strings, numbers, booleans, arrays, and objects.

Technically, it will allow you to use functions and classes, but those have some synchronization issues, so please stick with the basic data types mentioned above.

Conclusion

By reading the theory article and practicing with the code example, it will be easy to understand how to use hooks.

Now we can move to the next article: Button events in React, to learn how to use events to manipulate the page using buttons.

In you want to see a similar exercise, open this link and open the branch state.

Additional reading

State and Lifecycle: The official documentation of React covering state management. Ignore the components that use classes because they are obsolete and focus only on components that use functions.
Hook API Reference: The official documentation of React covering the topic of React Hooks. Read it in case you want a in depth review of how hook works and more advance types of hooks.

Credits

Cover: Photo by Mael BALLAND on Unsplash
Video tutorial: Learn useState In 15 Minutes - React Hooks Explained by Web Dev Simplified.

Introduction to state management and React Hooks

Software Development Academy — Fri, 04 Jun 2021 12:15:46 +0000

This article is about theory. Please read it before seeing the application in the next article.

How React update information on the screen?

Before teaching about how to update information on the screen, we need to explain what React does behind the scenes to keep a balance between:

Showing information on the screen as fast as possible.
Making your code easier to maintain.

Each time you want to update information on the screen, React destroys and recreates a component to show the updated changes.

This means any variable inside the component will be recreated using its initial value instead of the value you tried to update.

How React make information survive on the screen?

To have variables that survive this destruction and recreation, we need to have a way to create those variables outside the component.

This is what state variables do. Each time you create a state variable, it will be created outside the component so it can survive each time the component is destroyed and recreated.

How React uses Hooks to manage the state?

React Hooks are functional programming methods to create a state variable. In addition, it gives you a getter and a setter method to call this variable when you need to show its current value or modify it.

Interactive example

React Hooks interactive example

Click this link and follow its instructions to see how components with traditional variables and state variables behave.

Conclusion

In Ancient Chinese philosophy, yin and yang ("bright-black", "positive-negative") is a concept of dualism, describing how seemingly opposite or contrary forces may actually be complementary, interconnected, and interdependent in the natural world. - https://en.wikipedia.org/wiki/Yin_and_yang

I hope that by seeing this cover picture and then reading the article for a second time, this concept of destruction and recreation is not only understood, but you accept it as a necessary evil to have projects that have high performance and are easier to maintain.

With this theory and philosophy out of the way, we can move to React Hooks' application in the next article: Manage local state with useState hook.

Credits

Cover: The Yin-Yang Master: Dream Of Eternity by Netflix

Unmovable rock: Photo by Zoltan Tasi on Unsplash
Yin-Yang: Photo by Дмитрий Хрусталев-Григорьев on Unsplash

Install external components using NPM

Software Development Academy — Fri, 04 Jun 2021 12:14:22 +0000

Even if React is harder to learn than other JavaScript front-end frameworks, installing external components is where it all pays off.

Because React is so popular, there are pre-built components for almost anything you can imagine. This makes your work way easier.

Intended result

This is what we will have by the end of the article.

Figure 1: A basic YouTube video player using external components.

Figure 2: App hierarchy chart.

Legend:

🟦 Blue: Component created by us.
🟨Yellow: External component installed using NPM.
◻️Grey: Simple tags.

Getting started

Let build this small YouTube player by first installing the external component called React Youtube by using a terminal window inside your project folder.

npm install react-youtube

Once it is installed, we proceed to import it and utilize it.

import YouTube from "react-youtube";
import { useState } from "react";

export default function App() {
  const [videoId, setVideoId] = useState("1_Aq5rQdPso");

  const options = {
    height: "390",
    width: "640",
    playerVars: { autoplay: 1 },
  };

  return (
    <div className="App">
      <YouTube opts={options} videoId={videoId} />

      <button onClick={() => setVideoId("1_Aq5rQdPso")}>
        Golden Eye
      </button>

      <button onClick={() => setVideoId("rwDUWnOVf0c")}>
        Tomorrow Never Dies
      </button>
    </div>
  );
}

Let's analyze the new lines of code:

import YouTube from "react-youtube" the package we installed using NPM. Note that it uses a route without dots or slashes because it is a global NPM package.
const options = {} A configuration file for the YouTube player (see the options available).
<YouTube/> The external component you imported.
opts={options} This is where we put the parameters we set up in the previous step.
videoId={videoId} The most important element of the player: the state that will change the video being played.

Note:
Many React external components behave like Java classes with constructors and allow you to initialize the component using parameters.

In the case of React YouTube is the parameter options, but each external component will have their own property names to initialize, so always read the documentation of each component you install.

Conclusion

With this knowledge of how to use external packages you have expanded greatly your ability to make useful front end projects.

In the next article: Handling multiple pages with the external component React Router DOM, we will cover one of the most important external components of React, the React Router DOM. This external component allows your project to behave like a traditional web page with multiple pages.

If you want to see the finished code, open this link and open the branch external-components.

Recommended external components

Here is a short list of components so you can get started:

React Router DOM: Official NPM package of React Router DOM, a package that add multi page navigation to React.
Formik: Official NPM package of Formik to add pre-build forms instead of building and validating yourself.
FontAwesome: Official NPM package of Font Awesome to add its icon library.
Material UI: Official NPM package of Material UI, a library of pre-designed components.
React Leaflet: To embed maps in your apps.
React YouTube: For embedding YouTube videos.

Credits

Cover picture: Photo by Lajos Szabo on Unsplash
Golden Eye music theme: By Tina Turner.
Tomorrow Never Dies music theme: By Sheryl Crow.
The World is Not Enough music theme: By Garbage.
Die Another Day theme: By Madonna.

Creating a list of components using functional programming

Software Development Academy — Fri, 04 Jun 2021 12:13:16 +0000

In this article we will automatize the creation of multiple components by using an external JSON file to hold our information.

This will make our projects more organized because we make a clear separation of concerns.

The JSON contains our information.
The components are the visual representation.

Pre-requisites

Arrow functions: A modern way to write functions in JavaScript. Is used all across React and in the map, filter, reduce methods.
Map function: A JavaScript method that allows to create a new array based on information from another array. (watch from 1:58 to 2:54)

Intended result

Figure 1: The same pet shot app but more organized behind the scenes.

Figure 2: Hierarchy diagram. The element in the middle with dash lines is not a component, but an array holding components.

Anatomy of a map function

Before we get started let's explain a bit about:

The map function.
Arrays of components.

The map function

Figure 3: A comparison between the map function with an arrow function inside vs. a traditional for loop.

As you can see, the map function is just a shortcut to write more compact code. The less code you write, the less bugs you will have.

Arrays of components

Figure 4: The contents of ComponentArray.

As you can see, JavaScript arrays can literally hold anything, from strings, numbers, to even React components.

Getting started

For this exercise we will use a JSON file to create our list of components.

JSON file.
App component.
MyComponent

JSON file:

Create a json file inside your src/ folder. Preferably inside a folder name data/.

Note: Each object inside the array needs a key called id. React needs this in order to keep track of each component.


[
    {
      "id": 1,
      "title": "Puppy",
      "fileName": "dog.jpg"
    },
    {
      "id": 2,
      "title": "Whiskers",
      "fileName": "cat.jpg"
    },
    {
      "id": 3,
      "title": "Birdie",
      "fileName": "cat-food.jpg"
    }
]

App component:

import MyJSON from "./data/pets.json";
import MyComponent from "./components/MyComponent";

export default function App() {
  const ComponentArray = MyJSON.map((item) => (
    <MyComponent key={item.id} title={item.title} fileName={item.fileName} />
  ));

  return (
    <div className="App">
      <section className="grid">
        {ComponentArray}
      </section>
    </div>
  );
}

Let's analyze the code:

import MyJSON from "./data/pets.json": We import our JSON.
const ComponentArray we create a variable to hold our array of components.
MyJSON.map() creates an array of components using the map function. This is where the Map function comes into play.
<MyComponent> is a copy of MyComponent, the map function will create as many components as the the json needs.
Inside the JSX we put the ComponentArray inside curly braces {}.

MyComponent:

export default function MyComponent({ title, fileName }) {
  const imageObject = require("../images/" + fileName);
  const imageURL = imageObject.default;

  return (
    <article>
      <h2>{title}</h2>
      <img src={imageURL} alt={title} />
    </article>
  );
}

The only change

imageObject: Is a variable to import image combining a location in our project folder with a prop received from a parent.
require("../images/" + fileName): require is a Node.js command to open a file from our project folder.
imageURL: We create another variable to assign the specific key that has the image path. In this case imageObject.default.
Finally, inside the JSX we use {imageURL} in the <img/> source property.

Conclusion:

Congratulations this conclude the articles for the first day of React.

You can practice by refactoring your Cupcake website's product page and seeing how easy it is to organize the products. (only for the SDA students)

You can take a break before moving to the articles intended for the next day, or click here to continue your studies.

If want can to see the finished code, open this link and open the branch create-list.

Credits:

Cover picture: Photo by Curology on Unsplash

Passing data to components using props

Software Development Academy — Fri, 04 Jun 2021 12:09:46 +0000

Props, a shorthand for properties, is a way to send information from a parent to a child. This allows components to look and behave differently based on properties that the parent sends.

Pre-requisites

Destructuring: A way to extract the keys from an Object for easier use in JavaScript. (watch from 1:05)

Intended result

This is what we are going to have by the end of the article.

Figure 1: A webpage with the 3 copies of the same component, but with different titles and pictures.

Figure 2: The app hierarchy chart. Note that we are sending the title and the picture from App.jsx to each copy of MyComponent.jsx.

Getting started

In order to pass props, we need to modify the component that sends information called the parent, and the component that receives the information called the child.

Pass props from the parent
Receive and use the props in the children

Pass props from the parent:

// App.jsx

import MyComponent from "./components/MyComponent";

// Images
import DogPicture from "./images/dog.jpg";
import CatPicture from "./images/cat.jpg";
import BirdPicture from "./images/cat-food.jpg";

export default function App() {
  return (
    <div className="App">
      <MyComponent title="Puppy" picture={DogPicture} />
      <MyComponent title="Whiskers" picture={CatPicture} />
      <MyComponent title="Birdie" picture={BirdPicture} />
    </div>
  );
}

Let's analyze the code line by line:

Add a property to the instance of the component. In this example, title with the value "Puppy".
If you want to use images, you need to import them first.

Receive and use the props in the children:

// MyComponent.jsx

export default function MyComponent({ title, picture }) {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <img src={picture} />
    </div>
  );
}

Let's analyze the code line by line:

Put the props send from the parent as arguments in the function parameters. Note that the props are wrapped around curly braces {} This is called destructuring. Watch the pre-requisites video for more information.
To show the text put the property inside the tags <h2>{title}</h2>.
To add a property to a tag, use the syntax src={picture}

Conclusions

You are close to finish the contents of the first day of React. Take a pause and practice what you have learned so far before going to the last article of the day.

Seriously, take a break. You have achieve a lot so far. But for the next topic I need you well rested in order to absorb a lot of new information. So take a break, then practice what we have done so far and then open the last link of the day.

If want can to see the finished code, open this link and open the branch passing-props.

Finally, this is the TLDR (To Long Didn't Read) version of this article.

Credits:

Cover: Photo by Annika Gordon on Unsplash
Dog picture: Photo by Karsten Winegeart on Unsplash
Cat picture: Photo by Manja Vitolic on Unsplash
Bird picture: Photo by Alistair Dent on Unsplash

Create functional components in React

Software Development Academy — Fri, 04 Jun 2021 12:07:09 +0000

One of the biggest benefits of using a front-end framework is making your application easier to manage by breaking down the page into smaller pieces called components.

Think of components as boxes where you can put anything, including other smaller boxes, to organize your stuff. This article will explain how to create and import React components.

Pre-requisites

JavaScript modules: Know the basics about the import and export statements. Ignore the parts that mention Node.js and require().

Intended result

This is what we will have by the end of the article.

Figure 1: A simple page with 3 elements (components) on screen.

Figure 2: This is the app hierarchy chart. We will use it as a simplified version of the Activity diagram to see how the project looks behind the scenes.

Getting started

To create a component, follow these steps:

Create a folder called components inside the src folder
Create a new file with the extension .jsx inside your components folder.
Create a function with the same name as your file using this pattern:

//MyComponent.jsx (the name of the file)

export default function MyComponent() {
  return (
    <div className="my-component">
      <p>Hello world</p>
    </div>
  );
}

Here we are going to learn what each line of code does:

export default: As the name says, it tells React this is the main component inside this file. You can export more than 1 component per file, but it is frown upon.
MyComponent(): Is the name of the component. You can change it to anything, but do not forget that it must be the same name as your .jsx file. In the next chapter, we will learn what arguments we can put inside the parenthesis.
return(): Is the content to be displayed on the webpage. You can nest as many tags as you need, but only 1 can be on the root.
className: This is the way to add a CSS class in React.

Using a component

To use a component, you need to do 2 things. Importing the component and using it inside the parent component.

Importing:

Open the component file where you want to insert your newly created component, for example, App.jsx, and follow these steps:

Use import on the top of the file followed by
The name of the component. In this example MyComponent.
from determines the route.
"./components/MyComponent" a string with the relative path of the component.

Using the component inside another component:

Inside the return():

<MyComponent/> you use the component like a HTML tag.
As you can see, you can put as many copies (instances) of the same component. In another article we will learn a better way to make multiple copies.

// App.jsx

import MyComponent from "./components/MyComponent";

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

Conclusion

Now that you have learned how to create components and import them, you can move to the next chapter: Passing information to components by using props.

In you want to see the finished code, open this link and open the branch create-component.

Finally, this is the TLDR (To Long Did not Read) version of this article.

Credits

Cover image: Photo by Mildlee on Unsplash

React Introduction

Software Development Academy — Fri, 04 Jun 2021 12:02:33 +0000

Video tutorial of this article

Hello to this quick course on React. The most in-demand JavaScript frontend library in the market for 2021.

This series of articles are written for the Software Development Academy, a joint venture between KTH and Novare Potential to re-skill people to become junior developers in Sweden.

Although these articles are written for them, I will try to make them self-contained as possible so anybody can use them, even graduates from the SDA could come back and have a refresher on React in the future.

Getting started

Figure 1: An overview of the category of articles this course contains.

To tackle this library's complexity, I will divide the articles into 5 categories. Each category has a few articles to expand on it.

Table of contents sorted by difficulty

Getting started:
Making stuff interactive:
Handle multiple pages:
Manage large projects:
- Manage global state with Recoil.js

Table of contents sorted by category

Beware, this approach will make you read certain articles that are harder to understand before others. Use it as a quick reference once you read the articles sorted by difficulty.

📕 Introduction:
- React introduction (this article)
- Create a React app using the command line
📙 Components:
📒 State management:
📗 Event handling:
- Button events in React
- Form events in React
📘 Manage large projects:
- Handling multiple pages with the external component React Router DOM

Conclusion

This will be a long course, but I will try to break it down into small bite-size articles, so they don't become tiresome to read. Also, the contents will allow you to go directly to a particular topic when you need to remember it. To go to the first article, click here

By the way, this is chibi Godzilla. Sometimes it will appear on the articles to give additional information and even emotional support. On some occasions, he goes full evil and can be a bit mean, so be aware of it.

Credits

Cover picture: Photo by Vladislav Klapin on Unsplash
React in 100 seconds: By Fireship YouTube channel.
Mini dinosaur: Icons made by Freepik from www.flaticon.com