DEV Community: Fọlájọmí

Props and Conditional Rendering

Fọlájọmí — Tue, 03 Dec 2019 10:56:59 +0000

React allows us to build dynamic web applications which facilitates interaction between the app and users. In order to achieve this, different react components need to interact with each other to properly display app responsiveness to user interactions. This is achieved by the ability of react components to pass data to one another and re-render them based on changes to these data. In this article, we are going to learn about how to pass data from one component to another using Props.

Data Flow in React

The flow of data in a react application is unidirectional and flows from top to bottom on the component tree.

To understand this concept better, lets take a look at the picture of our todo app below:

In the app above, we indicate the different components in coloured boxes/rectangles. The unidirectional data flow concept simply means that data can only be passed from the parent to the child component and not the other way round. For example, in the todo app, data cannot be passed from the TodoList component (blue square) to the entire application's state, rather the application passes data to the TodoList component.

I know this might be a lot to take in, but this is the TL;DR version:

Data can only be passed from a parent component to a child component.

Now let's talk about how data is passed from the parent to the child.

Props

Props are basically arguments to our react components that allows us to pass data from one component to another on the component tree.

Props are passed from the parent to the child as follows:

// In the parent component

<ChildComponent data={data} />

This data can be accessed in ChildComponent via the props like so:


// ChildComponent

const ChildComponent = (props) => {
    console.log(props.data); //returns the data passed from the parent component
}

In the case of our todo app, we write the following in our text editor

const App = () => {
  const todos=['install react','create-react-app']
  return (
    <div className="App">
      <h1>Todos</h1>
      <TodoList todos={todos} />
    </div>
  );
}

const TodoList = (props) => {
  return(
    <ul>
      {
        props.todos.map(todo => <li key={props.todos.indexOf(todo)}>{todo}</li>)
      }
    </ul>
  )
}

In the code above the App component is the parent which defines the data and passes it down to the TodoList component. This data is then accessed in the TodoList component via props.

Now we can see a list of our todos

Conditional Rendering

Now we have an (ugly) app that displays all our todos (as a list) :), but it renders a list of hard-coded todo. What happens if we delete all the dummy data in the todos array, leaving only an empty list? Excluding the Todo h1 element, we get a blank page that offers nothing to the user on what to do. We do not want our users staring at a blank page if they have not added a todo yet. Rather we want to display an instruction on how they can add a todo and remove this instruction once they have added one todo. This is a perfect job for an if statement, right? This operation is simply what Conditional Rendering is.

In react, conditional rendering is done the same we use conditionals in JavaScript using the if statement or the ternary operator ( ? : ). This is because...Drumroll... REACT is JS.

Let's see how we can solve our todo problem in code.

const TodoList = (props) => {

  if(props.todos.length){

    return(
      <ul>
        {
          props.todos.map(todo => <li key={props.todos.indexOf(todo)}>{todo}</li>)
        }
      </ul>
    )
  }

  return <h3>No todo(s) yet, Use the form to create new todos</h3>

This can also be done using the ternary operator

const TodoList = (props) => {

  return props.todos.length?
    <ul>
      {
        props.todos.map(todo => <li key={props.todos.indexOf(todo)}>{todo}</li>)
      }
    </ul>
  : <h3>No todo(s) yet, Use the form to create new todos</h3>
}

If either of the TodoList Components above is used, we still get the same result shown in the image above. However, if we delete all the todos in our list, leaving only an empty array, we get this:

Now, when we add todos, the instruction disappears and gives way for our todo items. We'll look at how to add todos in our app later.

You can also edit the code and experiment on the code in this sandbox
You can also read more about props and conditonal rendering in the React docs.

Please leave comments if you find any part of this post confusing or error or typos.

Building React Components II: Class Components

Fọlájọmí — Mon, 02 Dec 2019 12:13:54 +0000

In the previous blog post, we said react components are of two types, and we talked about functional components.

This blog post will focus on the other type of react components - class components.

What are class components?

Class components are react components that are defined using ES6 classes.

We can create simple components (and complex ones too) using classes, by simply defining them in an ES6 class, as follows:

class Hi extends React.Component {
    render() {
        return(<h1>Welcome to the React BookStore</h1>)
    }
}

This is the simplest form of a class component, and should return an h1 saying "Welcome to the React BookStore". Everything in this component is very similar to our functional component except the render() method.

The render method is used to render DOM nodes and is the only required* method in the class component. The class component may also contain other built-in methods called Lifecycle Methods, however these are optional. We will take a look at some important lifecycle methods in details later. First we look at State.

State

The class component gives us access to state, which functional components did not (until the introduction of hooks in react 16.8). The state property of a component helps us track the state of our components and enables us make appropriate changes to the application based on its state.

To use state in our react application, we define the property within the constructor function of our component class.

class BookStore extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            bookId: "",
            books: [],
            bookDetails: "",
        }
    }
    render(){
        return(
            <h1>Welcome to the React BookStore</h1>
        )
    }
}

Note that the constructor function is also a Lifecycle method and should only be used when initializing state or binding methods.

When using the constructor function, the super(props) should be called, else this.props will return undefined and may cause bugs in the app.

setState

This is a function that allows us to update the state of a react application. It is bad practice to reassign or edit the state of your app directly and this may cause bugs/inconsistencies in your app.
To update the state of a component, we call setState as follows:

this.setState({bookId: "123"})

It is also important to avoid carrying out destructive operations (i.e. operations that directly mutate the state) such as splice() on the state object.

What are Lifecycle Methods

React Lifecycle methods are basically functions that we want to run at specific times in the life of our applications.

The following are some of the most important lifecycle methods react gives us access to:

1. componentDidMount Method

The componentDidMount method defines a function that we want to run when the component first mounts (i.e. the first time the component is rendered on the DOM). Let's say we want to fetch a list of books from our books database, we would like to define the function in the componentDidMount method, which fetches the required data once the component is mounted on the DOM.
In code, a call to fetch a list of pictures for our books would look like this:

class BookStore extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            bookId: "",
            books: [],
            bookDetails: "",
        }
    }
    componentDidMount(
        fetch('https://bookdatabase.com/photos')
           .then(response => response.json())
               .then(json => this.setState({books: [...json]}))
    )
     render(){
        return(
            <h1>Welcome to the React BookStore</h1>
        )
    }

This fetches all the pictures we need once the component mounts (renders for the first time)

2. componentDidUpdate Method

This method is called when a component's state changes, i.e. the component has changed based on user input/interaction with the app. It takes the prevState(previous state) and/or prevProps(previous props) as arguments and runs makes appropriate changes to the DOM.

It is important to note that you must use a conditional statement to setState within the componentDidUpdate method, else you will create an infinite loop.

This method can be used to make changes to the DOM to reflect user-input. For example, if you want to get details about a book that a user selects. In code, this would look like:

class BookStore extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            bookId: "",
            books: [],
            bookDetails: "",
        }
    }
    componentDidMount(
        fetch('https://bookdatabase.com/photos')
           .then(response => response.json())
               .then(json => this.setState({books: [...json]}))
    )
    componentDidUpdate(prevState) {
    if(this.state.bookId !== prevState.bookId){
        fetch(`https://bookdatabase.com/books/${this.state.bookId}`)
            .then(response => response.json())
                .then(json => this.setState({bookDetails: json.details}))
    }
     render(){
        return(
            <h1>Welcome to the React BookStore</h1>
        )
    }
}

This code sets the book details to the details gotten from the network request only if there has been a change in the bookId. This is to ensure that no request is made when there is no change in the bookId which will cause an infinite loop.

3. componentWillUnmount Method

The componentWillUnmount method is called when before a component is removed from the DOM. It is used to perform cleanups in our app, such as canceling network requests or subscriptions to services.

You can get more information about React Lifecycle methods in the React docs

Building React Components I: Functional Components

Fọlájọmí — Sun, 24 Nov 2019 23:06:35 +0000

Now that our react application is all set up, we can now start building components for our web page!!!

We all know what react components are. If we don't or we've forgotten, let's have a little refresher in this blog post.

React components are of two types:

Functional Components
Class Components

We would be covering functional components in this post.

What Are Functional Components?

Fuctional components are the basic building blocks of React, they are the simplest components that can be created in react

How simple are they, really?

Functional components are basically, JavaScript functions. They accept a single props (short for properties) argument and returns React elements. Let's take a look at how they really work:

const Hello = () => {
  return(
    <h1>Hello React</>
  )
}

As little as it is, the piece of code above is a valid react component which renders "Hello React" to the screen. However, this is not the full picture.

To get the full picture, lets create a new react app called bookstore by running

npx create-react-app bookstore

in the terminal and cd into the created bookstore project file at the end of the create-react-app process, then run:

npm start

to start our development server.

In our code editor, let's edit the App.js file, located in the src folder. Let's change the code so we have:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Welcome to the ReactJS Bookstore</h1>
      <p>It's nice to have you here</p>
    </div>
  );
}

export default App;

Let's go over our code one line at a time,

Line 1: The first line imports the React component from the react library, which gives us the ability to write JSX in our code.
Lines 3-10 define the function which returns our JSX.

It is very important to understand the naming convention for our react components. When creating a new react component, it is important to start our component name with an uppercase letter. This will be explained in detail along the line.

Notice that we wrap our JSX in a div tag, this is because react functions can only return one component, therefore it does not support having adjacent elements without them being wrapped by another element. This way, the function only returns the div element

Also, notice the className attribute on the div tag in line 5. This is the JSX equivalent of the html class attribute. This is written like this because class is a reserved keyword in JavaScript and since our react app is a JavaScript file, we cannot use the class keyword, hence the className attribute.

The last line (10) in our little code exports the App component we created so it can be used in another file. Remember that our App.js file is actually imported and rendered in the index.js file.

The code above returns the following:

Now we may be thinking, why go through all these hassle when I can actually recreate all we've done in pure html?

You'll appreciate react more when we cover rendering dynamic components. When? NOW!!!

Rendering Dynamic Components

Now let's add a list of books we have in our bookstore to the page. How do we do these?
We could manually create a list and hard code all of the books in our store database into the JSX (and it would work). However, what happens if we have like 10,000 different books in our database, then we would type out <li>bookname</li> 10,000 times? Not efficient.

What we should do as developers is find a way to loop over the contents of the database and dynamically render each book in the database on our page, right? Luckily for us, react is JavaScript and JavaScript (ES6) provides the map function for us.

Let's do this in code:

First, lets add the following array to our code to imitate our database. We could put it anywhere before the return statement, so let's put it on line 5, just before the return statement.

const books = ["Odd Thomas", "Harry Potter",  "The DaVinci Code", "The Lost Symbol", "Forever Odd", "Angels and Demons"]

Now we have six books in our database that we want to render in our react app. To do this, we will add the following code to line 11 of our code:

<ul>
    {
      books.map(book => <li key={books.indexOf(book)}>{book}</li>)
    }
</ul>

Let's go over the code:

The first line opens up a ul tag which indicates that an unordered list is coming next. The curly braces on the second line is to signify to react that what comes next is JavaScript i.e. if you want to write JavaScript code in the middle of JSX, it should be wrapped in curly braces.

The main code is written on the third line and it maps over the database and returns an li element that contains the name of each book in the database.

You would notice, however, the key attribute specified on the li tag. This is a way for react to keep track of all the items/elements in a list so it would know which element is where in case we need to delete or edit a book.

The key for each element must be unique to the element and should not change. Generally, it is bad practice to use the index of the item as it's key because it may change and lead to inconsistencies in our app. Rather it is better to use an id library such as uuid to create unique identifiers for each element in a list.

The code above returns the following:

I have separated the code onto separate lines to make sure that they are visible and easy to understand, but it could all fit in one line and read meaningfully, which would mean that in one line of code, we have extracted all the books in the database and rendered it in our application.

This was a long one, and I hope we take our times to fully understand the concepts introduced in this page. To further improve our knowledge, here is a link to the official react documentation on functional components.

We will cover class components in the next blog post.

Walking Through the create-react-app Files

Fọlájọmí — Sat, 23 Nov 2019 20:03:22 +0000

Hey guys,

In the previous blog post, we looked at how we can get our react applications started with create-react-app. This post will walk us through the boilerplate (or template) files created for us by this simple command and how we can use them in building our applications.

For this post, I have created a new react boilerplate called pomodoro and this is what it looks like at the moment.

And if we open up our project file in the code editor (I use VS code), here's what we have:

Walkthrough of All Files

node_modules/

This folder contains all libraries and packages required for react to run. They consist of many npm packages and any new package you install for your application is stored in this folder. You would notice that this folder has a slightly faded color. This is VS code letting us know that the file is being ignored.

Q: What does this mean and why?

A: By default, node modules are ignored because of their size and because they are not really needed in the git repo and can be recovered easily. All other files that are/should be ignored are those that are not needed for you application to run and sensitive files that contain sensitive information such as API keys, Authentication tokens etc. We'll look at them more deeply at a later time.

2.public/

This folder contains the favicon.ico file (which is the small icon file displayed next to the site name in the browser tab), index.html file (the main html file of the react app), logos files, robots.txt file. (which tells web crawlers which pages can be requested from your site to avoid overloading your site with requests) and a manifest.json file, which allows you to specify the behavior of your application when saved on user devices (as PWAs).

3.src/

Presently contains all boilerplate codes for starting up, styling and testing our react application. This is the folder where we write all our code, and create each component that powers our app.

4..gitignore file

This file specifies all the files and folders we want git to ignore. The files specified in this file will not be tracked, staged, committed or pushed to the repository because they are not needed for the application to run (e.g. test files) or they contain sensitive information that cannot be exposed (e.g. .env files) or node_modules folder that is too big.

5.package-lock.json file

This is an automatically generated file that should not be tampered with. It contains information that describes the tree that was generated exactly, such that later installs are able to generate identical trees, regardless of intermediate dependency updates.

6.package.json file.

Earlier, I mentioned that the node_modules can be ignored because they can be easily recovered, the package.json file makes this possible.

This file contains all information about your application such as dependencies (libraries, packages needed for your application to run), dev-dependencies (packages used in building the application, but are not required for it to run such as nodemon), scripts (these defines what is run whenever any of the commands are executed in the terminal. For example, when we run npm start in the terminal, what really runs is react-scripts start)etc.

If you clone a repository to your machine, it would not come with the node_modules folder, since it was ignored, hence the project will not run on your device until the node modules required are installed. To install the required node modules, enter the following command into the terminal

npm install

yarn install

This command will check the package.json file and install all dependencies of the project.

Now that we are all full acquainted with the react environment, we can now start to learn the building blocks in the next post in this series.

Links

Feel free to visit the following links for further reading on the topics/files we have covered.

Getting Started II: create-react-app

Fọlájọmí — Thu, 07 Nov 2019 16:09:38 +0000

This article concludes the setting up of react, which began in the the previous blog post.

In the the previous blog post, we looked at how we can embed react and react-dom, as scripts, within our html documents, I would recommend for web pages which require very little dynamicity.

However, depending on the complexity of the dynamic part of your web page, this method may increases the length of our html document and make it difficult (at times overwhelming) to read.

Requirements

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

It is a very simple way to setup a react application from scratch, and requires that node and npm packages be installed on your device. So, if you have not, you can download the long term support (LTS) version of node here.

npm comes out-of-the-box with node

To check if you have node (and npm) installed on your device, open your command line interface (CLI) (i.e. command prompt (Windows) or terminal (Mac)), and type the following after the prompt

$ node -v

If you have node installed, it should return a version number, otherwise it should return an error. (same goes for npm).

Creating a react application

Now that we have both installed, let's get started with creating our react application.
To get started, type the following command into your CLI

 $ npx create-react-app new-app

note that npx is not a typo, it is a package that comes with npm 5.2 and higher. If your npm version is less than 5.2, I would recommend you install an updated version.

However, you can still create a react app on versions lower than 5.2 by following these two steps:

In your CLI, type

$ npm install -g create-react-app

and wait for the installation to finish, then

type

$ create-react-app new-app

note that new-app is the name of our application and you can change it to anything you want.

When a new react app has been successfully created (using npx or npm), you should see the following screen:

and a new folder named new-app inside the current folder.

To run your react application, you cd into the new folder created type the following into your CLI:

$npm start

and allow it to spin up the development server. When the server is up, your default browser should open automatically and you should see something like this.

Congratulations, your new application is up and running :).

Explain Redux/Context API Like I'm Five

Fọlájọmí — Sat, 02 Nov 2019 23:36:17 +0000

I want an explanation on how it is better/not to use react context API wit useReducer hook instead of redux

Getting Started With React

Fọlájọmí — Mon, 28 Oct 2019 09:00:00 +0000

This is where we write our first codes in our react track (kinda).

But before we proceed, it is important that we all have an understanding of the following

Basic understanding of HTML and CSS
Basic Knowledge of JavaScript (ES6+ syntax and features).
Basic knowledge of the DOM and DOM manipulation.
You should also have Node.js and npm installed globally on your computer.

If you haven't, you can download Node.js and npm here. Make sure you download the latest stable version.

Adding react to a project

There are a few different ways of using the react library for your project(s), depending on why you need react for your webpage.

Recall that react is used to add dynamic content to your web page

So it follows that, maybe, only a little section (component) of your web page (probably a widget) needs dynamic content.

The first way to use react in you web application is to embed it in your HTML file like any other javascript library.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset='UTF-8' />
      <title>Home!</title>

      <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    </head>

    <body>
      <div id="root"></div>

      <script type="text/babel">
        // all react codes will be here
      </script>
    </body>
  </html>

The code above is the basic way to get started with react applications. You would notice that the only difference between this and your everyday HTML document is the script tags (of course you have used script tags a lot), so it's basically no difference.
The script tags are used to load in the libraries needed for react to run:

React - the first script tag imports the react library
React DOM - the second script tag imports react-DOM, which allowas us to use DOM specific methods in our script.
Babel - this is a third-party compiler that allows our applications run ES6+ on older browsers.

For now, we only focus on the script tag at the bottom of the component where all our react logic would go.

Within the script tags, input the following code:

<script type='text/babel'>
  const Hello = () => {
    return <h1>Hello World</h1>
  }

  ReactDOM.render(<Hello />, document.querySelector('root'));
</script>

The code above defines the component Hello like any normal arrow function. However, you would notice the html-like code in the code, but React is a JavaScript framework, right? Well react allows us to write JSX, which is JavaScript and XML, in our code. So the html-like parts of the code are actually XML.

On the last line, we call the ReactDOM's render function (this comes with the react-dom package we added to our script) and pass in our component and where we want it to be displayed on the DOM, in this case the root div.

Notice that in naming the Hello component, we capitalized the first letter, this is the way to tell react that it is a user-defined component and not a regular html tag.

This is how the whole code should look now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  <title>Home!</title>
</head>
<body>
  <div id="root"></div>

  <script type='text/babel'>
    const Hello = () => {
      return <h1>Hello World!</h1>
    }

    ReactDOM.render(<Hello />, document.querySelector('#root'))
  </script>
</body>
</html>

The result:

The next post will deal with the second way of using react in our application. This is to ensure that we don't consume too much at a time.

React: An Introduction

Fọlájọmí — Mon, 21 Oct 2019 12:51:26 +0000

This is the first of a series where we will go from absolute newbies to building functional applications in react.

React is a JavaScript library for building user interfaces

React is a powerful tool for creating dynamic web applications that are super-responsive and is created and maintained by Facebook.

Thinking in React.

In react, separation of concerns is not talking about separating the structure, style and behavior of the application.

Rather it is separating the application into various single-purpose components that come together to for the entire application. So, when building applications using react, you think of the application as a combination of various single-purpose components.
consider the image below:

The different components of the application are identified with the rectangles.

It is important to note that the number of components you have in your application depends totally on you

However, it makes it easier to make each component responsible for only one action in your application. This helps to detect bugs easily and gives you the option to reuse each component in other areas of the application.

This post is just to introduce us to the way react allows us to think about our applications. In the next part, we will take a look at how components are created.

Things I Don't Know

Fọlájọmí — Fri, 18 Oct 2019 22:09:36 +0000

Taking inspiration from Dan Abramov's blog post on the same topic back in 2018, I am diving into technical writing with a partial list of programming topics I do not know at the time of writing this post.

Why am I doing this? Simply put, I believe it is very important for a developer at any level to be able to identify technologies that will help in writing better code and be able to publicly admit that (s)he has no idea how to use them. This is very important for learning.

"Empty your cup so that it may be filled; become devoid to gain totality." ~ Bruce Lee

Okay, enough of introductions, let's dive right into it.

Thing's I Don't Know

Wordpress: I know it is used to create websites and manage contents, but that's all I know about it, I don't even know how to set it up. And this goes for all other Content Management Systems, Joomla, Drupal....
Bash and *nix commands: I know this is very important for developers to know a thing or two about, I can create, copy, move, rename and delete files and directories, I can also print working directory, change directories, use cat and echo commands primitively and that's all I know about the CLI.
SSH: I have seen tutorials on how to set up github ssh on my local computer but I just follow along and don't know what I'm doing.
Git and Github: I have initializing a git repository, staging/tracking changes, committing changes and pushing to the github repo covered every other thing I do with my github are googled and since I have not started working on Open Source Projects just yet, I have no idea how pull requests (PR), branching and merging work.
CSS Animations: This is probably the most nagging issue I have with my CSS game.
JavaScript Terminologies: Bubbling, Hoisting, prototypal inheritance, DNS and use strict are all still fuzzy to me. While I can write code that implements some of them, I do not have full understanding of these terms.
Package Managers: I can install packages and dependencies with npm, (I have never tried yarn), I can also npx create-react-app.
CSS Preprocessors: I only know the little SASS codes from FreeCodeCamp's curriculum.
CSS Architecture: What are those?
CORS: It's a nightmare! I hate seeing them and have no idea how to skirt them.
GraphQL: Recently found out that it is a query language and is used by the github API. I have no idea how this works.
Graphics
Deployment: I just drag and drop my build files to Netlify.
Redux: I have never gotten a hang of redux, probably because I have not used it in any project I have worked on. The introduction of the useReducer hook by react has me thinking if there is still any need to use redux. (kindly drop your take in the comment section)

I am currently focusing on the front end of things, so this list is populated with concepts and technologies used in a front end development.

All of these concepts and technologies are those I am currently on a path to learn and updates will be made at regular intervals as I continue my web development journey.

Sometime very soon, this list will be reduced to nothing and I will have new concepts and technologies I can publicly say I don't know.