DEV Community: Nehemiah Dauda

The Basics of React Props for Beginners

Nehemiah Dauda — Mon, 04 Sep 2023 02:12:48 +0000

Introduction

React applications are developed using independent and reusable components. These components can be nested within another component, thereby creating parent and child components.

The purpose of this tutorial is on props. Props is an important React tool that helps with the flow of data from the parent component to the child component(s). Props enable the development of dynamic data and styles for reusable child components. You don’t have to repeat yourself creating multiple components for different styles and data.

This tutorial provides a basic insight into props. As you study through this tutorial, you will learn the meaning of props with practical examples of applying props to your application.

Furthermore, you will get to understand what parent and child components mean, the features of props, and benefits as well. Don’t worry if you are confused about when to use props. This tutorial has you covered. You will learn the purpose of props and when to apply them in your application.

This tutorial targets beginners as well as mid-react developers who want to improve their understanding of what props entail.

Prerequisite

To get a better understanding of this tutorial, you should be conversant with basic React structures such as components. You should know the use of components and how to create them.

Also, you should be familiar with basic JavaScript tools such as object, and object destructuring.

Your familiarity with the above terms and tools will further boost your understanding of this tutorial.

What is Props?

Props stand for properties. They are arguments passed to React components and return as an object. Props enables you to store and pass data from the parent component to the child component(s).

A parent component can call and render a child component multiple times. Thus, using props enables you to create dynamic content and styles for each reusable child component.

Props are immutable i.e., they are read-only and cannot be updated or modified upon user request.

To better understand props, let’s take a look at HTML element attributes. Note that HTML element attributes can also be referred to as properties. They work similarly to props, but props are passed as an argument to components.

Examine the HTML example below.

<img src="/imagesrc" height="20px" width="20px">

The img tag contains some attributes–src, height, and width. These attributes determine what image and how the image will be displayed on the browser.

Now, examine the React component–Greetings–below.

function Greetings(props){

return(
    <h1>{props.text}</h1>
  )
}

The above React component accepts an argument–props, which can be any name of your choice. Next, props is returned as an object with the dot (.) notation, and text value.

function App(){

  return(
    <Greetings text='Welcome' />
  )
}

Furthermore, another component–the App component above–calls and renders the Greetings component with a text attribute assigned to a string value–Welcome.

Hence, the above codes will display Welcome as a heading on your browser.

Thus, Props functionality enables the easy flow of data from the parent component to the child component(s). The Parent component through props determines what the child component(s) displays and how the child component(s) will be displayed on the browser.

What is the parent and child component?

Components is a core structure of the React application. Components are independent and reusable JavaScript codes used in creating user interfaces with React.

The App.js file is an example of a React component. The App.js file is the root component that calls and renders other components on the browser. This makes the App.js file a parent component to all other components.

A parent component is any component that contains one or more nested component(s). In other words, a parent component calls and renders another component(s).

A child component is a component that is nested within another component. In other words, a child component is called and rendered in another component.

The below code example identifies a parent and a child component.

function ChildComponent(){
  return(
    <p>This is a child component</p>
  )
}

function ParentComponent(){
  return(
    <ChildComponent />
  )
}

The above example contains two components–ParentComponent and ChildComponent. The ParentComponent calls and renders the ChildComponent, making the ChildComponent nested within the ParentComponent.

Features of props

Below are some notable features of props that are important to know.

Immutable: Props are immutable. In other words, props are read-only and cannot be modified or updated upon user request. Thus, what is displayed on the browser remains static and unchanged.
The uni-directional flow of data: Props pass data in a one-way flow i.e. from the parent component to the child component(s). Thus, the child component(s) only receives data and cannot pass data to the parent component.
Component’s argument: Props are passed as an argument in React components and returned as an object with the dot notation.

Benefits of using props

Props is a helpful tool when creating React components. Below are some of the benefits of using props.

Easy flow of data: Props create a means of connection and communication between two or more components i.e. the parent and child components. Thus, props enable the easy flow of data from one component (the parent component) to another (the child component(s)).
Dynamic contents: Props allow you to render different data and styles for your reusable component. For instance, a component can be reused multiple times with each containing different contents and styles.
Fewer codes: Instead of creating multiple components with their unique contents, props allow you to create a single and reusable child component. Each reusable component can contain its unique contents, thereby reducing the amount of codes to be written.

How to apply props with practical examples

In this section, let’s further examine and learn how to apply props in React applications.

The App.js file is where we shall be writing all our codes.

Please note that you can also create components by creating a new ‘.js’ file in the src directory. In this case, the created component will be exported and then imported into the parent component or the App.js file.

But for this tutorial, all components will be created in the App.js file.

Also, note that all components must begin with a capital alphabet. This is the standard way of creating components according to the official doc of React. Read more about React components here.

Let’s get started

In the App.js file, create an Item component with props passed as its argument. Then return an object just as the code example below.

function Item(props){

  return(
    <p>Product name: {props.name}</p>
  )
}

Next, in the return method of the App.js component, insert the below codes to render the Item component.

function App() {
  return (
    <div className="App">
      <Item name='Cars' />
    </div>
  );
}

The Item component becomes the child component of the App component—which then becomes the parent component. The App component calls and renders the Item component while also passing the value for name.

Below is the complete code for the App.js file.

import React from 'react';
import './App.css';

function Item(props){
  return(
    <h3>Item name: {props.name}</h3>
  )
}

function App() {
  return (
    <div className="App">
      <Item name='Cars' />
    </div>
  );
}

export default App;

Save your work and start your server. Open your browser and the below image displays on your screen.

Props also enable you to apply different data to each reusable child component. See the code example below.

import React from 'react';
import './App.css';

function Item(props){
  return(
    <h3>Item name: {props.name}</h3>
  )
}

function App() {
  return (
    <div className="App">
      <Item name='Car' />
      <Item name='Phone' />
      <Item name='Computer' />
      <Item name='Table' />
    </div>
  );
}

export default App;

The above code shows Item component reused multiple times with different values for the name attribute.

You can further create dynamic styles for each reusable child component. See the code example below.

import React from 'react';
import './App.css';

function Item(props){
  return(
    <h3 style={props.style}>Item name: {props.name}</h3>
  )
}

function App() {
  return (
    <div className="App">
      <Item name='Car' style={{color: 'green'}} />
      <Item name='Phone' style={{color: 'red'}} />
      <Item name='Computer' style={{color: 'blue'}} />
      <Item name='Table' style={{color: 'grey'}} />
    </div>
  );
}

export default App;

In the above code, the child component–Item returned a {props.style} object assigned to the style attribute in the h3 tag. Next, the parent component calls the child component multiple times with each containing a style attribute with different styles.

Note that CSS styles for props value must be an object.

When to apply props

You must be wondering when to apply props in your application. The following points give us basic insight on when to apply props.

Mutability of data
Props deal with immutable data i.e. read-only data. Thus, as a developer, you need to understand the nature of your data before you apply props in your component. If your data is mutable, then there are other React tools to use. But if your data is immutable, props can be applied to your component.
Nature of Component
A developer also needs to understand the nature of your component before you can use props in your application. If your component is reusable and will contain different static contents, props is a good choice to use.

Conclusion

In summary, props is a great React tool that connects the parent and the child component(s). Props ensure the flow of data from the parent to the child component(s) and also enable dynamic rendering of contents and styles for reusable components.

Thus, this tutorial walked us through the basic insight into what props entail. We looked at the meaning, features and benefits of props. We also study what the parent and child component means in general, and we learn when to apply props in our application.

I hope through this tutorial, you can now understand and apply props with ease in your React application. Kudos for adding another knowledge to your React skills. Explore other React tools as well such as states, hooks and amongst others.

Additional resources

Practical steps on how to apply the useParams hook of React router.

Nehemiah Dauda — Mon, 21 Aug 2023 23:56:15 +0000

The useParams hook is essential in developing a friendly user interface with React. Hence, an important knowledge React developers must be familiar with. The useParams hook enables the development of complex React interface with multiple parameters such as e-commerce and blogging websites.

This tutorial focus on providing the practical steps and knowledge on how to apply the useParams hook in React applications. This tutorial will cover the following topics:

1. What is the useParams hook?

2. Requirements to apply the useParams hook

3. Benefits of using the useParams hook

4. Practical steps on how to apply the useParams hook.

Prerequisite:

This is a beginner-friendly tutorial for those interested in learning React and how to apply the useParams hook of React-router. Although to get the best from this tutorial, it is important to be familiar with some basic React and JavaScript tools. These tools include:

React Routing,
Map function, and
Destructuring.

You must also be familiar with HTML and CSS. Thus, I recommend learning the above concepts first before moving ahead with this tutorial.

What is the useParams hook?

The useParams hook is a React router hook that is used to create and access multiple parameters of a website. In essence, the useParams hook gives access to multiple contents in the same URL path. The useParams hook enables each parameter to have a unique identification. Through this unique identification, each parameter can be accessed and rendered in the same URL path.

E-commerce and Blog apps are examples of applications with multiple parameters. Other examples where the useParams hook is also applicable include Learning Management System (LMS)–i.e. online tutorial sites, search buttons of websites, articles/newspapers websites, and amongst others.

A blog app, for instance, contains several blogs. Each blog will have a unique id, through which each blog can be accessed.

Requirements to apply the useParams hook

To apply the useParams hook in your React app, some basic tools and libraries are required. In this section, we shall be looking at these basic requirements.

1. React-router-dom

The react-router-dom is an external React library that provides routings in React applications. The react-router-dom comes with the useParams hook. Thus, to apply the useParams hook, react-router-dom must be installed in your React app. This section below provides the guide to set up React app and installing react-router-dom.

2. Component

A Component is a series of JavaScript codes that returns HTML elements. Components in React determine the contents to be displayed on your browser.

To apply the useParams hook, create a component and import the useParams into the component. Next, assign a variable to useParams method using object destructuring. See the code example below.

import { useParams } from 'react-router-dom';

function Blog(){
  let { blogid } = useParams();

  return<p>my unique id is {blogid}</p>
}

3. Route tag

The Route tag signifies the URL path in your browser. The Route tag accepts two attributes. They include the path attribute and the element attribute. The path attribute is assigned to a URL path. The element attribute is assigned to the component to be rendered.

To apply the useParams hook, the path attribute will also contain a placeholder. What the placeholder does is it returns dynamic content based on the value that matches it. See the example below.

<Routes>
    <Route path='/blog/:blogid' element={<Blog />}></Route>
</Routes>

Take note of the following:

blogid is the placeholder and can be any name of your choice.
The placeholder usually contains ':' before its value.
The placeholder name must match the value assigned to the useParams method in the component.
Thus, a URL path–/blog/2 will return the blog contents with the id number–2.

Benefits of using the useParams hook

The useParams hook comes with a lot of benefits both to React developers and users. Below are some of the benefits of using the useParams hook.

Multiple Parameters: The useParams hook is used to create multiple parameters containing dynamic contents. Thus, using the useParams hook in your applications provides users with a large pool of information in a friendly manner.
Increase app performance: The useParams hook renders dynamic content without leaving the current URL. This increases the app's performance and reduces loading time.
Easy Accessibility: The useParams hook is a user-friendly tool that makes it easy to access multiple parameters and contents.
Fewer codes: The useParams hook enables developers to create multiple parameters with few lines of code. In essence, this eliminates unnecessary repetitions and reduces the amount of codes to be written.

Practical Steps on how to apply the useParams hook in React.

In this section, we shall be building a simple e-commerce interface that display multiple products. Each product will have a unique id through which we can access them.

This section will be divided into three parts.

The first part will guide us through how to create a React app.
The second part will guide us through how to create a simple e-commerce interface.
The third part will guide us through how to apply the useParams hook in our project.

Let's begin.

Part One—Create React project

The below steps guide us in creating a React app and installing react-router-dom.

Step 1: Create React App

To create your react app, follow the below instructions.

Open your terminal and create a new folder for your React app.
Navigate to your newly created folder and create a new React app. Use any of the commands below to create your React app.

C:\Users\Username\Desktop>mkdir react-app
C:\Users\Username\Desktop>cd react-folder
C:\Users\Username\Desktop\react-folder>npx create-react-app my-app

C:\Users\Username\Desktop\react-folder>npm init react-app my-app

C:\Users\Username\Desktop\react-folder>yarn create react-app my-app

Take note of the following:

You must have node.js installed on your system before you can create a React app. If you don't have node.js on your system, visit https://node.js.org to install it.
react-app and my-app is the name of your folder and react app respectively. They can be any name of your choice.

Step 2: Install React-router-dom

The below instructions guide us to install React-router-dom in our React project.

Navigate to your app directory in your terminal.
Install react-router-dom using npm or yarn.

See the code example below.

C:\Users\Username\Desktop\react-folder>cd my-app
C:\Users\Username\Desktop\react-folder\my-app>npm install react-router-dom

Step 3: Start the server

While still in your app directory, start your React app server just as the codes below.

C:\Users\Username\Desktop\react-folder\my-app>npm start

Yarn users:

C:\Users\Username\Desktop\react-folder\my-app>yarn start

Note: use npm or yarn to install React dependencies and run React scripts depending on what you use to create your React app.

The start script runs your react app sever on localhost:3000.

Part Two—Set up a simple e-commerce interface

We've successfully created our React app and installed react-router-dom. Next, We can now create a simple e-commerce interface.

Step 1: Modify index.js file

Open your React app with any code editor of your choice and follow the below instructions to modify the index.js file.

Open your index.js file in the src directory.
Import BrowserRouter from react-router-dom using object destructuring.
Update root const by wrapping the App component between BrowserRouter tags.

The final codes of the index.js file should look like the code example below.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Step 2: Create Products component

This component will hold the data of our products. But before we go ahead with creating a Products component, create an image folder first in the src directory. The image folder should contain all the necessary images to be used. Next, follow the below instructions to create the Products components.

Create a components folder in the src directory.
Create a Products.js file in the components folder.
Open your Products.js file and create a Products variable.
Assign Products variable to an array of objects. Each of these objects should contain a unique id, title, description, and image.
Export the Products component.

See the code example below.

const Products = [
    {
        id: 1,
        title: "Product Name",
        description: "This is the description of product with an id of 1. Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur. ",
        image:  require('../images/product-1.png')
    },
    {
        id: 2,
        title: "Product Name",
        description: "This is the description of product with an id of 2. Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur. ",
        image:  require('../images/product-2.png')
    },
    {
        id: 3,
        title: "Product Name",
        description: "This is the description of product with an id of 3. Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur. ",
        image: require('../images/product-3.png')
    }
]

export default Products;

Step 3: Create a card component

The essence of the card component is to loop through our products and render them in an organized way. The following instructions guide us on how to create the card component.

Create a Card.js file in the components directory.
Open the Card.js file and import the Products component.
Create a Card function with a return statement.
Create a productItems variable before the return method in the card function.
Assign productItems variable to a map function that iterates through our Products. The map function should be like the code example below.

const productItems = Products.map(store =>{
        const {id, title, description, image} = store;

        return(
            <div key={ id } className="card">
                <img src={image} alt=""></img>
                <h3>{title}</h3>
                <p>{description}</p>
            </div>
        )
    })

Finally, Create a section tag in the return method of the Card function. In between the section tags, should be our productItems in curly braces. Don't also forget to export Card component.

Our final codes for the Card.js file will be like the code example below.

import Products from "./Products";

function Card(){

    const productItems = Products.map(store =>{
        const {id, title, description, image} = store;

        return(
            <div key={ id } className="card">
                <img src={image} alt=""></img>
                <h3>{title}</h3>
                <p>{description}</p>
            </div>
        )
    })

    return (
        <>
            <section className="card-section">
                {productItems}
            </section>
        </>
    );
};

export default Card;

Step 4: Style the card component

Add some CSS styles to our Card component in the index.css file.

Note: Our div tag and section tag in the Card component contains className attributes. These className attributes were created purposely for CSS styling.

Open the index.css file in the src directory and apply the below CSS styles.

.card-section{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px;
}

.card{
  padding: 1.2rem;
  font-size: 1.2rem;
  border: 1px solid rgb(104, 101, 101);
}

Step 5: Create a home page

The home page will serve as the default page of our app and will render our card component. The below points guide us to creating our home page

Create a pages folder in the src directory.
Create a Home.js file in the pages folder.
Open the Home.js file and import the Card component.
Create a Home function with a return method. The return method should contain our Card element.
Export the Home.js file.

See the codes below.

import Card from "../components/Card"

const Home = () => {

    return (
        <>
            <h1>Home Page</h1>
            <Card />

        </>
    )
}

export default Home;

Step 6: Modify App.js File

The App.js file is the root component that determines what should be rendered on our browser. In this step, we shall modify our App.js file to render our pages. The below instructions guide us to modify our App.js component.

Open your App.js file and import the Home component.
Update the return method of the App.js file to contain the Home element as seen in the code below.

import React from 'react';
import './App.css';
import Home from './pages/Home';


function App() {
  return (
    <div className="App">
      <Home />

    </div>
  );
}

export default App;

Save all files and navigate to localhost:3000 on your browser. The outcome will be like the screenshot below.

Great work in creating our e-commerce interface. But there's still a lot of work to be done. For instance, our product description should contain lesser words and there should be a link in each card that directs us to each product. Hence, we shall be applying the useParams hook.

Part Three—Apply the useParams hook

The useParams hook will enable us to create a user-friendly interface with permission to access each product through its unique ids. The useParams hook comes with the React-router-dom package. Thus we shall be importing the useParams hook from react-router-dom before we can apply them. Let's begin.

Step 1: Create a ProductDetail page

The ProductDetail page will contain and render the complete detail of each product based on its unique id. The below instructions guide us to create the ProductDetail page.

Create a ProductDetail.js file in the pages folder.
Open the ProductDetail.js file and import the following:

Products component from the component folder
useParams from react-router-dom using object destructuring.

Create a ProductDetail function with a return method.
Assign 'id' to the useParams method in ProductDetail function, but before the return method. For example: let { id } = useParams().
Create a product variable and assign it to the find method. Example:
const product = Products.find(product => String(product.id) === id);.
The find method here is used to match the id of each product so that other details of the product can be accessed.
Create a section tag in the return method of the ProductDetails function. The section tag should contain a key attribute that is assigned to the id in curly braces.
Create the other tags that receives other product objects using dot notations.
Export the ProductDetail.js file.

The final codes for the ProductDetail.js file will be like the code example below.

import { useParams } from "react-router-dom";
import Products from "../components/Products";

function ProductDetail() {
    let { id } = useParams();
    const product = Products.find(product => String(product.id) === id);

    return (
        <>
            <section key={id} className="details-section">
                <img src={product.image} alt=""></img>
                <div>
                    <h3>{product.title}</h3>
                    <p>{product.description}</p>
                </div>
            </section>
       </>
    )
}

export default ProductDetail;

Step 2: Style productDetail page

Add CSS styles to beautify and organize our productDetail page in the index.css file. Note that we already gave our section tag on the productDetail page a className.

.details-section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 90px;
  font-size: 1.3rem;
}

Step 3: Create Routes

Routes direct us to the URL path to access our content. We shall be creating all necessary routes in the App.js file. The below instructions guide us to create our routes.

Open the App.js file and import the following:
1. ProductDetail from pages folder,
2. Routes and Route from react-router-dom.
Update the return method of the App.js function to the following:
1. Create a Routes tag.
2. Create two Route tags in between Routes tags. Please note the difference between Routes and Route to avoid mixing them.
3. Each Route tag should contain a path and an element attribute.

See the code example below.

import React from 'react';
import './App.css';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
import { Route, Routes } from 'react-router-dom';

function App() {

  return (
    <div className="App">

      <Routes>
        <Route path='/' element={<Home />}></Route>

        <Route path='/product/:id' element={<ProductDetails />}></Route>
      </Routes>
    </div>
  );
}

export default App;

Take note of the following:

Our first Route path is assigned to '/', which signifies the default URL path. The default URL path displays our Home component.
Our second Route path is assigned to product with a placeholder–:id.

Step 4: Modify the card.js component

The below instructions guide us to modify the card component.

Open the Card.js file and import Link from react-router-dom.
Insert Link tag in between p tag in the return method of card component. The Link tag should contain a to attribute.
Reduce the description words using the Slice method.

The final card component codes should be like the code example below.

import { Link } from "react-router-dom";
import Products from "./Products";

const Card = () => {


    const arrayDataItems = Products.map(store =>{
        const {id, title, description, image} = store;
        return(
            <div key={ id } className="card">
                <img src={image} alt=""></img>
                <h3>{title}</h3>
                <p>{description.slice(0, 100)}<Link to={`/product/${id}`}>See more</Link></p>
            </div>
        )
    })

    return (
        <>
            <section className="card-section">
                {productItems}
            </section>
        </>
    );
};

export default Card;

Note that the value of our to attributes uses a backtick and template literals ( ${} ) with the value–id. This is the standard method of accessing the URL path of each parameter.

Save all your files and navigate to your browser. The gif image below shows the outcome of our project. Each product can now be accessed through its unique ids.

Conclusion

This document provides a comprehensive knowledge of the useParams hook. The useParams hook is essential in creating React applications that require multiple parameters. Thus, enabling easy access to each parameter in a user-friendly manner.

Thank you for reading and I hope you find this tutorial useful.

Additional Resources

React Router: How to Use the useParams() Hook

How to use the useParams hook in React Router

A Beginner's Guide: Understanding CSS Animation

Nehemiah Dauda — Fri, 04 Aug 2023 23:06:23 +0000

Introduction

Cascading Style Sheet (CSS) is a style sheet language that's used to design, organize, and beautify our web content. CSS styles our documents that are written in a markup language such as HTML–HyperText Markup Language.

An impressive feature of CSS is that it can be use to creates dynamic and interactive web content. For instance, CSS does the following:

Indicate an active link.
Renders dynamic styles on mouse hover.
Animate Web content and lots more.

The purpose of this article is on CSS animation. We aim to simplify and communicate the concept of CSS animation. What we shall be looking at in this article includes the following:

The meaning of CSS Animation.
The @keyframe rules.
The Attributes of CSS Animation.
The shorthand value of CSS animation.

Prerequisite
This article targets beginners and professionals who seek to improve their knowledge of CSS animation. Although you must have a basic understanding of HTML and CSS, as this article does not cover such knowledge. If you're unfamiliar with HTML and CSS, I recommend that you first need to learn and acquaint yourself before moving ahead with this article.

What is CSS Animation?

CSS animation is a feature of CSS that enable developers to create interactive and dynamic web content without the use of extra codes such as JavaScript. JavaScript is the popular language used to create interactive and dynamic web content. Nevertheless, CSS animation creates dynamic and animated web content. For instance, CSS animation can do the following:

Creates web contents/objects on the motion.
Renders different colors and background colors of web content.
Change and update web content styles and lots more.

To implement CSS animation, the @keyframe rule must be applied. Let's look at what the@keyframe rule implies.

What is the `@Keyframe` Rule?

The @Keyframe rule determines the CSS animation codes. Let's say you want to change the background color of an element using CSS animation, the @keyframe rule is where you'll specify the initial background color and the updated background color. See the example below.

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

The @keyframe rule contains attributes that determine CSS animation. From our above example, the @keyframe rule contains 2 attributes–' from' and 'to'.

The 'from' attribute accepts the initial CSS style attributes of your web content to be animated. In our above example, the 'from' attribute contains our initial CSS style attribute e.g. background-color: red.

The ‘to’ attributes accept the new updated CSS style attributes. In our above codes, the 'to' attribute accepts a new attribute for our background color, which is blue. As a result, our background color changes from red to blue. Impressive right? Let's see more examples.

@keyframe example{
  0% {background-color: red}
  100% {background-color: blue}
}

In our above codes, we use percentage attributes instead of the "from" and "to" attributes. Using percentage attributes is another way that the @keyframe rule permits. The percentage attribute starts from 0% and ends at 100%. The 0% accepts the initial CSS style attributes while the 100% accepts the final CSS style attributes.

One major feature of the @keyframe rule is that it can take in as many attributes as possible. See the example below.

@keyframe example{
  0% {background-color: red}
  50% {background-color: green}
  100% {background-color: blue}
}

In our above codes, we use the percentage attributes to update our background color up to three times. We can further increase our attributes to as many as possible.

Take note of the following about the @keyframe rule:

An animation name must be specified when using @keyframe.
The @keyframe keyword must first be declared before your animation name.
The @keyframe rule contains attributes wrapped in between curly braces.
The @keyframe attributes accept CSS style attributes.
The CSS style attributes are also wrapped in between curly braces.

Attributes of CSS Animation

The attributes of CSS animation are CSS style attributes/properties that help us to animate our web content. For CSS animation to take effect, CSS style attributes such as animation-name, duration, and amongst others, must be specified. Let's study the below codes.

/*index.html*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

/*style.css*/

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

In our above codes, we have two documents–index.html and style.css. The index.html file contains markup language and in between the body tag, we have a div tag with a class property–box.

Furthermore, in our style.css file, the box class in our index.html file is referenced. The box class contains some CSS style attributes for our animation.

Therefore, in this section, we shall be looking at CSS style attributes that help us animate our web content.

Animation name

The animation name is a required attribute of CSS animation. The animation name defines the name of the animation that the @keyframe rule indicates. See the codes below.

style.css

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

In our above codes, we have an animation name (example) set as a style attribute to the box class. Next, the @keyframe rule indicates our animation name, which then accepts the animation attributes in curly braces.

Animation duration

The animation duration attribute specifies how long the animation should take place. Note that the default value of animation duration is 0. Hence, if you don't specify the animation duration, the animation will not run. The example below specifies that the animation should run for 4 seconds.

style.css

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

Animation Delay

The animation-delay attribute specifies the duration before the animation should start. The code below specifies that the animation should start after 2 seconds.

style.css

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

Note that when the animation-delay attribute contains a negative value, the animation runs as if it has already started.

Animation direction

The animation-direction attribute specifies the direction of the animation. An animation-direction attribute contains any of the following values:

normal—specifies that the animation will play forward i.e from initial to final attributes
reverse—specifies that the animation will play backward i.e from final to initial attributes
alternate—specifies that the animation will play forward first, and then backward
alternate-reverse—specifies that animation will play in a backward direction first, and then forward

The below example shows the animation will play in the backward direction. That is the background color will first appear in blue and start changing from blue to red.

.box{
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-direction: reverse;
}

@keyframes example{
    0% {background-color: red;}
    50% {background-color: green;}
    100% {background-color: blue;}
}

Animation iteration count

The animation iteration count specifies the number of times that the animation will run.

.box{
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 0.1s;
    animation-iteration-count: 3;
}

@keyframes example{
    0% {background-color: red; left: 0px;}
    50% {background-color: green; height: 200px; left: 200px;}
    100% {background-color: blue; left: 0px;}
}

The above example runs the animation 3 times. The animation-iteration count also accepts the value of 'infinite', which means that the animation will run forever.

Animation timing function

The animation-timing function specifies the speed of the animation. In this case, the value of the animation timing function determines how fast and slow the animation runs. The animation-timing-function accepts the following values:

ease—specifies that the animation starts slowly, then fast, and then ends slowly. Note that this is the default value of the animation-timing-function
linear—specifies that the animation start and ends at the same speed
ease-in—specifies that the animation speed starts slowly and ends so fast
ease-out—specifies that the animation speed starts so fast and ends slowly
ease-in-out—specifies that the animation speed start and end slowly
cubic-bezier()—allows you to customize the animation speed. Note that the cubic-bezier() function accepts 4 parameters in numbers, separated by a comma.

Below is an example of using the animation-timing-function:

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 0.1s;
    animation-direction: reverse;
    animation-iteration-count: 3;
    animation-timing-function: ease-in;
}

@keyframes example{
    0% {background-color: red; left: 0px;}
    50% {background-color: green; left: 200px;}
    100% {background-color: blue; left: 0px;}
}

Animation fill mode

The animation fill mode specifies the CSS styles for the element before the animation starts and after it has ended. Below are values that the animation-fill-mode attributes accept.

none—the animation element will not apply any CSS style before and after execution.
forwards—the animation element retains the CSS style set by the final keyframe attributes when the animation stops execution. Although the final keyframe attributes depend on the animation direction and the animation iteration count.
backwards—the animation element retains the initial CSS style set by the first keyframe attributes before execution. Although the First keyframe attributes depend on the animation direction and the animation iteration count.
both—the animation element retains the initial CSS styles before execution and likewise retains the final CSS styles after execution. In other words, the animation follows the rules for both the forwards and the backwards value.
initial—the animation element retains the initial CSS style before the animation executes and when the animation stops execution.
inherit—the animation element inherits the CSS style from the parent element styles before the animation executes and when the animation stops execution.

Below is an example of using the animation-fill-mode.

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-direction: reverse;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes example{
    0% {background-color: red; left: 0px;}
    50% {background-color: blue; left: 200px;}
    100% {background-color: green; left: 0px;}
}

CSS Animation Shorthand Property

The CSS animation shorthand property enables us to write our CSS animation style attributes with just one line of code. The examples below indicate CSS animation with and without shorthand properties.

/*example 1*/

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

/*example 2*/

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    animation: example 4s ease-in 1s infinite reverse;
}

The above examples both work the same. Although the second example uses CSS animation shorthand property, hence, has shorter codes than the first example.

Conclusion

CSS animation is a great way to create dynamic and interactive web content without the use of JavaScript codes. This article explains all you need to know to implement CSS animation. For instance, this article explains basic concepts such as the @keyframe rule and attributes of CSS animation.

For you to perfect your skills in CSS animation, I recommend that you should read this article thoroughly and practice regularly.

Congratulations on adding another new CSS skill. Hope you find this article interesting. If yes, follow me on Twitter and LinkedIn as I share more insightful and educational technical content.

A Beginner's Guide: Essentials of React

Nehemiah Dauda — Sat, 29 Jul 2023 23:46:51 +0000

React is one of the most widely used JavaScript libraries in developing User Interfaces (UI). React offers several features and benefits that make it stand out in the software development industry. To be a Good React Developer, it is important to know the essentials of React.

The goal of this article is to educate on the fundamentals of React. We shall be looking at the following important topics:

What is React?
Evolution of React.
Structure of React.
Feature of React.
Benefits of React.

Ready to learn? Let's get started.

What is React?

React is a JavaScript library used in developing interactive user interfaces. React can also be used to develop Single Page Applications (SPAs), hence, increasing app performance.

Initially developed to serve as a frontend JavaScript library, React has over the years evolved and can now be used to develop server-side rendering as well as mobile applications. For instance, React Native is used to develop iOS and Android mobile apps.

Evolution of React

Jordan Walke—a software engineer at Facebook now known as Meta—developed React. Jordan Walke initially created a prototype called 'FaxJS'. FaxJS was first deployed to Facebook News Feed in 2011. In 2012, Facebook acquired Instagram and later on, deployed FaxJS to Instagram.

On May 2013, React was officially launched and it became open-source at the JSConf in the US. Maintained by Facebook (now Meta), React is used to create interactive web interfaces.

On February 2015, at the React Conference, Facebook announced the creation of React Native, which later became open-source in March 2015. React Native is used in developing iOS and Android applications.

On April 18, 2017, Facebook announced a new set of algorithms for rendering known as React Fiber. This innovation improves on the former algorithms known as 'Stack'. The Stack was slow in rendering dynamic changes. Meanwhile, with Fibers, the structure of the page is broken into segments that make it easy to maintain and update independently.

Structure of React

In this section, we shall be looking at the structural composition of React. We'll follow the officially recommended process of creating React app ready for development. Let's get started.

The official doc of React recommended using Create React App when learning React or creating a new single-page app. Example:

 C:\Users\Username\Desktop\project_folder>npx create-react-app my-app

After you've created your react app, your project should look like the below file structure.

my-app/
    node_modules/
    public/
        favicon.ico
        index.html
    src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
    .gitignore
    package.json
    README.md

Now, let's explore the above files and folders and know their uses.

node_modules folder

This folder contains all packages and dependencies that your project required. As you install these dependencies and packages, they are downloaded and copied into the node_modules folder. Note that it is recommended not to commit this folder to your version-controlled repository as it is too large.

public folder

The public folder contains the index.html file where you can set your page title and meta tags. You can add other assets in the public folder such as stylesheets, scripts, images, and fonts.

Take note of the following:

Webpack does not process the public folder.
Use an environment variable called PUBLIC_URL to reference assets in the public folder. For instance, use it like this in your index.html file:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico />

src folder

The src folder contains files that are processed by Webpack—a JavaScript tool commonly used by React to bundle and manage dependencies. All JavaScript files and CSS files must be inside the src folder for Webpack to see and process them.

Default files in the src folder include App.js, App.css, App.test.js, index.js, index.css, and so on. This folder is where you can also create components. Let's explore some of the default files.

App.js—the root component that contains contents to be rendered. Although App.js can be replaced or renamed.
App.css—the file that contains styles for the App.js component.
App.test.js—the default file where you can conduct basic tests for your app.
index.js—a JavaScript file that renders our main component.
index.css—the file that contains general styles for your project.

Note that index.html in the public folder and index.js in the src folder, must not be changed for the project to build. They must exist with their exact file names

.gitignore file

The .gitignore file specifies folders and files that Git should ignore and keep untracked.

package.json

This file contains in JSON format, important information about your project. The below lists are some of the important information in the package.json file:

name—the name of your project. It must be less than or equal to 214 characters
version—the current version of your app
dependencies—sets of packages and their version
scripts—sets of node commands we can run.

Readme.md

This is a markdown file that contains the project summary and instructions.

Features of React

React is made up of amazing and unique features. These features are what made React to be popular, easy to read, and maintain. Let's examine some of the major features of React.

Components

Components are pieces of independent and reusable codes used to create user interfaces. Components are JavaScript functions that return HTML elements. Components make it easy to read and maintain React codes. They also enable fewer codes to be written as they are reusable i.e. can be used in several parts of the application. App.js is an example of a component. See the image below.

JavaScript Syntax Extension

JavaScript Syntax Extension (JSX) also refers to the JavaScript XML is a JavaScript feature that allows us to write HTML elements in JavaScript codes. The below codes is an example of JSX.

const = listItems =  {
    <ul className="listItems">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
}

Babel library—a JavaScript compiler—transforms the HTML elements into plain JavaScript. The significance of JSX is that it simplifies JavaScript codes making them easy to read, especially for someone familiar with HTML.

Props

Props in React stand for properties. They are arguments passed into React components just as HTML attributes.

<img src="./image.jpg" width="100" height="150">

The above code is an HTML image tag that contains some attributes–src, width, and height. These attributes determined how the image is rendered. The same goes for Props. They are functional arguments passed to components. Props are read-only as they can't be modified. Let's see a simple example of props.

<Car brand="Toyota">

In the above code, the Car element has an attribute–brand.

Function Car(props){
    return(
        <h1>The Car brand is {props.name}</h1>
    )
}

export default Car;

Next, to render our attribute, the Car component receives an argument–props—which can be any name of your choice—as seen in the codes above.

In essence, props store data that is accessed by children of React component.

States

States in React, are objects that store data or information about the component. Unlike props, states are mutable—they can be modified upon user request. When a state is modified, React re-renders the component on the browser. Let's see an example of a state.

import React from "react";

class Car extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            brand: "Toyota",
            model: "Mustang",
            color: "Red",
            year: "1964"
        };
    }

    changeBrand = () => {
        this.setState({brand: "Honda"})
    }
    render(){
        return(
            <div>
                <p>The Car brand is {this.state.brand}</p>
                <button onClick={this.changeBrand}>Click</button>
            </div>
        );
    }
}

export default Sate;

The above codes display the screenshot below

When a user clicks the button, Toyota gets updated to Honda as indicated in the codes.

Take note of the following about states:

The State object can store many properties as you like.
The State objects are mutable i.e. they can be modified based on user request.
The setState method is used to change the state object.

React hooks

Hooks are functions that give access to states and other React features. With React hooks, class components are not needed.

Hooks are a new addition to React in version 16.8. Let's examine some of these React hooks.

useState Hook
This is functional hooks that keep track of a state. The useState hook accepts an initial value and gets updated upon user request.

import { useState } from 'react';

function App(){

    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1)
    }

    return (
        <>
            <p>You click me {count} times</p>
            <button onClick={handleClick}>Click me</button>
        </>
    )
}

export default App;

The above code displays the screenshot below

This example of useState hook accepts an initial value–0, and it increases the value when a user clicked the button.

useEffect hook
The useEffect hook performs side effects such as fetching data from a backend server, updating the DOM, timers, and so on. The useEffect hook accepts two arguments–function and dependency. Although the second argument is optional.

import { useEffect } from 'react';

useEffect(() => {
// Runs after every rendering
}, [])

The above is an example of a useEffect hook structure with a dependency as an empty array.

Other React hooks include

useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks.

Benefits of React

The benefit of React is enormous, as it served several purposes. Let's examine some of the benefits.

Web app development: React can be used to develop websites with backend servers, using React frameworks. Some of these frameworks include Next.js, Gatsby, Remix, and amongst others.
Mobile app development: React can be used to develop mobile applications–iOS and Android mobile apps–using React Native.
Single Page Applications: React can be used to create SPAs. SPAs render dynamic content on a single page, which reduces loading time and increases performance.
Highly demanded: React is the most widely used JavaScript library in developing interactive user interfaces. Hence, the high demand for React developers.
Easy maintainability: React apps are developed using independent components. These components serve as JavaScript functions but work in isolation and return HTML elements. As a result, making React easy to read and maintained.
Reusability: React components are reusable. In other words, React components can be used in several parts of the applications, thereby reducing the amount of code to be written and enabling quick development.

In summary, this article has helped us to understand the essentials of React. It is important to know the fundamentals of React so as to build a solid foundation in becoming a professional React developer. In this article, we looked at what React entails, its history, structure, features, and finally, the benefits of React. It's not over yet, explore in-depth of React with more practice and grow your expertise and experience.

If you find this article useful, hit the like button and follow me on Twitter and LinkedIn for more insightful and progressive tech conversation.

Quick Guide To Set Up Your React App Ready For Development.

Nehemiah Dauda — Fri, 28 Jul 2023 15:04:09 +0000

React is one of the most widely used JavaScript libraries in creating software interfaces. React offers several tools that make it stand out and popular in today’s software development industry. Thus, it's a great feat to be a React developer. The purpose of this article is to provide a quick guide in creating your first React app and setting it ready for development.

Before we set up our first React app, let’s know what React entails and its benefits. This will give us a thorough insight into React as we journey through this career in becoming a React developer. Let’s get started.

What is React?

React is a JavaScript library used in developing interactive and robust User Interfaces (UI). In other words, React is used to create front-end web applications. React can be used to develop Single Page Applications (SPAs) using independent and reusable components, thereby increasing her readability and maintainability.

Jordan Walke — a software engineer at Facebook now known as Meta — developed React. Jordan Walke first came up with a prototype known as FaxJS. FaxJS was initially deployed to the Facebook News feed in 2011. On May 2013, React was officially launched and made an open-source at the JavaScript Conference in the US.

Over the years, React has evolved to include several features which serve as frameworks for developing complete applications. Some of these frameworks include Next.js, Gatsby, and React Native, amongst others. Next.js and Gatsby.js frameworks develop backend servers of web applications. React Native is used to develop mobile applications such as iOS and Android mobile apps.

Benefits of React

React is the most widely used JavaScript library. This is because of the benefits React offers. In this section, we shall examine the notable benefits of React. Let’s get started.

Web App Development: React-powered frameworks are used to develop full Web applications. For instance, React-powered frameworks provide features for server-side rendering, data fetching, routing and so on. These frameworks are maintained by various communities, which include Next.js maintained by Vercel, Gatsby maintained by Netlify, and Remix maintained by Shopify, amongst others.
Mobile App Development: React Native — a React-powered framework — is used to develop mobile applications. React Native is an open-source JavaScript Framework that is used to develop iOS and Android mobile apps.
Easy Maintainability: React applications are developed using components. These components are independent and reusable. In other words, these components work separately and can be used in several parts of the application. Thus, increases the readability and maintainability of React codes.
Reusability: React components are independent pieces of code. These components work separately and can be used in various parts of the application. Thus, reduces the amount of code to be written and ensures the effectiveness of the application.
Testing and Debugging: React provides developers with tools to test and debug their codes and ensure the effectiveness and efficiency of their software. Some such tool includes Jest, React Developer Tools, and so on. Developers can test and debug their codes with ease and ensure they work correctly as expected.

Steps In Setting Up React Applications

This section will guide you through the steps in creating your first React app ready for development. Note that we shall be using the officially recommended process of creating a React app. Let’s get started with the various steps.

Step 1 — Install Node.js
You need to install Node.js for the local development of your React app. To install Node.js, visit https://nodejs.org and follow the instructions.

STEP 2 — Create a Project folder
Create a project folder and navigate to the directory of your project folder using your terminal as seen in the codes below.

C:\Users\Usersname\Desktop>mkdir react_project
C:\Users\Usersname\Desktop>cd react_project

STEP 3 — Create React App
Create your new React app by typing any of the commands below.

C:\Users\Usersname\Desktop\react_project>npx create-react-app my-app

C:\Users\Usersname\Desktop\react_project>npm init react-app my-app

For yarn users, run:

C:\Users\Usersname\Desktop\react_project>yarn create-react-app my-app

The installation process takes a while to complete. When completed, a folder named ‘my-app’ will be created, containing several files and folders just like the below structure. Note that ‘my-app’ is the name of your React app and can be any name of your choice.

my-app/
    node_modules/
    public/
        favicon.ico
        index.html
    src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
    .gitignore
    package.json
    README.md

STEP 4 — Start the server
In your terminal, navigate to the app directory where package.json is located. The package.json file contains scripts that give you access to run React script commands such as start, build, test, etc. Start the development server as seen in the codes below.

C:\Users\Usersname\Desktop\react_project\my-app>npm start

The above command starts the development server and opens your default browser. The development server is run on localhost:3000, with the image below displayed on your screen.

An impressive feature of React development server is the Hot Module Replacement (HMR). The HMR updates the web page without reloading when a component is modified.

In conclusion, we’ve understood what React entails and how important it is in the software development industry. we’ve also achieved a great step in setting up a React app ready for development. Congratulations on our progress. Explore other tools and functionalities in React to grow and perfect your skills as a React developer.

I hope you find this article useful. Follow me on Twitter and LinkedIn as we share insightful and innovative ideas.

React Routing: Practical Steps in Creating Navigation Bar that Renders Dynamic Content with React.

Nehemiah Dauda — Wed, 26 Jul 2023 23:08:18 +0000

A newbie in React will find it challenging in creating a navigation bar that renders different contents. Notable for building Single Page Applications (SPAs), React does not provide any modalities for routing. Nevertheless, routing in React is done using an external library known as React-router-dom. What this article aims to achieve is to create a Navigation bar with React. This Navigation bar will enable Users to navigate between internal links and renders different content.

To get a better understanding as we create our Navigation bar, this article will explain the following concepts:

React
SPAs
React Router Dom
Routing.

What is React?

React also known as ReactJS is a JavaScript library used in building interactive and dynamic web interfaces. In other words, React builds the front end of web pages that interacts with Users.

Although React was created as a Frontend library, over the years, React has evolved and can now be used to build complete applications. In general, React can be used to develop the following:

Single Page Applications (SPAs)
Backend server using frameworks such as Next.js, Gatsby.js, and so on
Mobile applications using React Native.

What are Single Page Applications (SPAs)?

SPAs are websites that render different content based on user requests without loading a new page. For instance, the default website loads an entirely new page when a user clicks a navigation link leading to other pages of the website. SPAs work in contrast to the default websites. SPAs load different web content on a single static page.

What Is React-router?

React-router is an external library that enables React apps to navigate between links and render different contents based on user requests. React router must be installed before it can be used in React.

What Is Routing?

Routing is the act of navigating to different sites, contents or pages using links based on user request. Through routing, a user can access different content on the websites.

Practical Steps in Creating Navigation Bar that Renders Dynamic Content.

In this section, we shall be building a React navigation bar that contains links rendering different contents based on user requests.

Note: To create a React app using React official doc recommendation, you must install Node.js and NPM on your computer. Visit https://nodejs.org to download Node.js and NPM if you don't have them on your computer.

Prerequisite: To have the best out of this article, it is important to be knowledgeable in JavaScript and React library tools such as Object, Object destructuring, JSX, Components, and Variables, amongst others. If you are unfamiliar with the above tools, I recommend taking some time to learn and get familiar with them. Ready to learn? Let's get started.

Step 1 - Create A React App.
Follow the below instructions to create a React app:

Create a folder for your React project.
Navigate to the directory of the folder on your terminal to create a react app.
Use npx or npm or yarn to create your react app as seen in the codes below.

C:\Users\Username\Desktop>mkdir react-app
C:\Users\Username\Desktop>cd react-app
C:\Users\Username\Desktop\react-app>npx create-react-app my-app

C:\Users\Username\Desktop\react-app>npm init react-app my-app

C:\Users\Username\Desktop\react-app>Yarn create-react-app my-app

Take note of the following:

react-app is the folder name and it can be any name of your choice.
my-app is the name of your React app and it can be any name of your choice.

Step 2 - Install react-router-dom and run the Server.
Follow the below instructions to install react-router-dom and run the sever.

Navigate to your React app directory.
Install react-router-dom using npm.
Start the server using npm after react-router-dom has finished installing.

See the codes below.

C:\Users\Username\Desktop\react-app>cd my-app
C:\Users\Username\Desktop\react-app\my-app>npm install react-router-dom
C:\Users\Username\Desktop\react-app\my-app>npm start

The development server runs some scripts and then your default browser opens on localhost:3000 and displays the image below.

Step 3 - Modify Index.js File.
In this step, we shall begin coding our program as we have already created our app with all necessary installations. The below instructions guide us to modify the index.js file.

Open your project folder with any code editor of your choice.
Open the index.js file in your src directory.
Import BrowserRouter from react-router-dom using object destructuring.
Update root const by wrapping the app component in between BrowserRouter tags.

Our final codes will look just as in the example below.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Step 4 - Create Pages.
In this step, we shall be creating different pages with different contents. The following instructions guide us to create the necessary pages:

Firstly, Create a folder called pages in the src directory with the following files:

Home.js
About.js
Contact.js.

Next, Fill each of these files with their dynamic contents as seen below.

Home.js

function Home(){

    return (
        <>
          <h1>Home Page</h1>
        </>
    );
}

export default Home;

About.js

function About(){

    return (
        <>
          <h1>About Page</h1>
        </>
    );
}

export default About;

Contact.js

function Contact(){

    return (
        <>
          <h1>Contact Page</h1>
        </>
    );
}

export default Contact;

Step 5 - Create a Navigation Component.
Next, we shall be creating a navigation component. Follow the below instructions.

Create a folder called 'components' in the src directory.
Create a Nav.js file in the components' directory.
Open Nav.js file you just created and import the Link from react-router-dom using object destructuring.
Create a Nav function that returns a nav element with a class–nav.
See the codes below.

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

function Nav(){
    return (
        <>
          <nav className="nav">
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/contact">Book</Link>
          </nav>
        </>
    );
}

export default Nav;

In our above codes, in between nav tags, we have three Link elements. The Link elements will display as links on our browser and will be used to navigate between pages. The Link opening tags accept a 'to' attribute that points to the resources it's linking to.

Step 6 - Modify the App.js file.
Open the App.js file in the src directory and execute the following instructions:

Import all pages files from the pages folder.
Import the Nav component from the components folder.
Import Routes and Route from react-router-dom using object destructuring.
Render the Nav component at the return method of the App function.
Create a Routes element containing three Route elements.
Input each Route element with a path and element attributes.

Our final codes should be like the example below.

import React from 'react';
import './App.css';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Nav from './components/Nav';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Nav />

      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/about' element={<About />}></Route>
        <Route path='/contact' element={<Contact />}></Route>
      </Routes>
    </div>
  );
}

export default App;

In our above codes, the path attributes indicate the URL route. The forward slash of the Home component signifies the default route. The element attributes accept the components to be rendered, which we imported earlier.

Step 7 - Style the Navigation bar.
Add CSS styles to our nav component. This can be done in the index.css file. See the codes below.

.navbar{
  background-color: rgb(14, 136, 207);
  padding: 3px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.navbar a{
  text-decoration: none;
  color: white;
  font-size: 1.3rem;
}

.navbar a:hover{
  color: aqua;
}

Note: we use the 'a' element selector when styling our Link element. This is because Link elements are anchor tags but with slightly different functionality.

Save your codes and navigate to your browser. Just as in the video below, we can now navigate between links and render different content.

In conclusion, we've created a React app with a navigation bar that enables us to navigate between links. All thanks to React-router-dom. This is not the end, there are many more uses of React-router-dom. Explore more about React-router-dom and gain more experience using it.

I hope this article was helpful, if yes, hit the like button and follow me on Twitter and LinkedIn for more insightful tutorials and technical articles.

DEV Community: Nehemiah Dauda

The Basics of React Props for Beginners

Introduction

Prerequisite

Table of contents

What is Props?

What is the parent and child component?

Features of props

Benefits of using props

How to apply props with practical examples

When to apply props

Conclusion

Additional resources

Practical steps on how to apply the useParams hook of React router.

Prerequisite:

What is the useParams hook?

Requirements to apply the useParams hook

1. React-router-dom

2. Component

3. Route tag

Benefits of using the useParams hook

Practical Steps on how to apply the useParams hook in React.

Part One—Create React project

Step 1: Create React App

Step 2: Install React-router-dom

Step 3: Start the server

Part Two—Set up a simple e-commerce interface

Step 1: Modify index.js file

Step 2: Create Products component

Step 3: Create a card component

Step 4: Style the card component

Step 5: Create a home page

Step 6: Modify App.js File

Part Three—Apply the useParams hook

Step 1: Create a ProductDetail page

Step 2: Style productDetail page

Step 3: Create Routes

Step 4: Modify the card.js component

Conclusion

A Beginner's Guide: Understanding CSS Animation

Introduction

What is CSS Animation?

What is the @Keyframe Rule?

Attributes of CSS Animation

Animation name

Animation duration

Animation Delay

Animation direction

Animation iteration count

Animation timing function

Animation fill mode

CSS Animation Shorthand Property

Conclusion

A Beginner's Guide: Essentials of React

What is React?

Evolution of React

Structure of React

node_modules folder

public folder

src folder

.gitignore file

package.json

Readme.md

Features of React

Components

JavaScript Syntax Extension

Props

States

React hooks

Benefits of React

Quick Guide To Set Up Your React App Ready For Development.

What is React?

Benefits of React

Steps In Setting Up React Applications

React Routing: Practical Steps in Creating Navigation Bar that Renders Dynamic Content with React.

What is React?

What are Single Page Applications (SPAs)?

What Is React-router?

What Is Routing?

Practical Steps in Creating Navigation Bar that Renders Dynamic Content.

What is the `@Keyframe` Rule?