DEV Community: Eboreime Rhoda

Rendering Lists in React

Eboreime Rhoda — Thu, 15 Feb 2024 07:38:07 +0000

Introduction

Rendering lists is a common task in modern web applications, especially when dealing with dynamic content such as movie listings, food orders, or book catalogs. As developers, it's crucial to master the art of manipulating and displaying lists effectively. In this tutorial, we'll explore how to render lists in React to enhance user experiences in the apps we build.

Prerequisites

Fundamental knowledge of HTML, JavaScript, and React
A code editor to follow along

Transforming Lists with the map() method
Rendering Lists in components
Using Keys Within Lists
Conclusion

In the real world, a list is a simple collection of elements, often represented as an array in JavaScript. Lists become essential when fetching data from external sources, such as APIs. For example, when creating a book listing app, you'll need to retrieve a list of books from an API and transform the data before displaying it to users. This is where the map() method becomes invaluable.

Transforming Lists with the `map()` method

The map() method allows us to selectively display data to users by iterating through an array, applying a callback function to each element, and constructing a new array from the results.

Let's consider how to transform a list of book items using the map() method in JavaScript. When working with lists in JavaScript, you'll use the array type specific to your data. In this tutorial, we'll transform data obtained from a third party (using an array of JavaScript objects) with the map() method.

The map() method is used for iterating through an array, calling a provided callback function for each element, and constructing a new array from the results.

Here's a snippet of the data:

export const bookList = [
{
  id: 0,
  title: "Atomic Habits",
  author: "James Clear",
  frontCover: "https://m.media-amazon.com/images/I/513Y5o- DYtL.jpg",
  backCover: "https://m.media- amazon.com/images/I/81DCnP7ntKL._AC_UF1000,1000_QL80_.jpg",
  datePublished: "2018",
  purchaseLink: "https://www.amazon.com/Atomic-Habits-James-Clear- audiobook/dp/B07RFSSYBH",
},

{
  id: 1,
  title: "Outliers",
  author: "Malcolm Gladwell",
  frontCover: "https://m.media-amazon.com/images/I/51CFbC0HoeL.jpg",
  backCover: "https://www.shopyaar.com/upload/product/a69375492ef2da69b89c3093a32e375e.jpg",
  datePublished: "2008",
  purchaseLink: "https://www.amazon.com/Outliers-Malcolm-Gladwell-audiobook/dp/B001LNK9C4/ref=sr_1_1?adgrpid=116047907195&hvadid=585359320515&hvdev=c&hvlocphy=21541&hvnetw=g&hvqmt=e&hvrand=8987847268972473835&hvtargid=kwd-298703248067&hydadcr=10787_13491799&keywords=outliers&qid=1699642346&s=books&sr=1-1",
},
{
  id: 2,
  title: "The 10X Rule",
  author: "Grant Cardone",
  frontCover: "https://m.media-amazon.com/images/I/51txCrB2JqL.jpg",
  backCover: "https://bookbins.in/wp-content/uploads/2021/05/The-10x-Rule-Grant-Cardone-Buy-Online-Bookbins-2.png",
  datePublished: "2011",
  purchaseLink: "https://www.amazon.com/dp/B005DGW34C?plink=Ic0UuVbawSdTNyjo&pf_rd_r=H132JYJ316N8X5G3YZY5&ref_=adblp13npsbx_1_3_im",
},
...
]

Each book item in the list has properties such as id, title, author, frontCover, backCover, datePublished, and purchaseLink.

Now, let's create a new variable to hold the transformed data using the map() operation.

const data = bookList.map(book => {
return book
})

console.log(data)

The data logged to the console is the basic structure of a map transformation. With this new array returned, we can now access the book's properties.

Rendering Lists in components

What we've done so far is transform the data received from the third party into the right form that can be rendered.

With React, we can further transform this list of books into a collection of React components. Utilizing the map() method in conjunction with the JSX syntax, we can create a BookList component.

//bookList component

const BookList = () => {
const data = bookList.map(book => {
  return book
})

console.log(data)

return (
    <div>
    {data.map((book) => (
    <div>
        <img src={book.frontCover} />
        <h1>{book.title}</h1>
        <h2>{book.author}</h2>
        <div>
            <h4>{book.datePublished}</h4>
            <a
                href={book.purchaseLink}
                target="_blank"
            >
                Buy here
            </a>
        </div>
    </div>
    ))}
    </div>
 );
};

export default BookList;

This will now be displayed on the webpage. Additional CSS has been added to ensure proper display of book items. You can find the complete code here.

Using Keys Within Lists

Keys are unique identifiers that help React identify which element has been modified, added, or removed from the DOM.
In React, using keys is crucial for dynamic list updates. These unique identifiers help React's Diffing algorithm efficiently manage changes within the component tree.

React's diffing algorithm compares the current virtual DOM with the previous one, identifying added, removed, or modified elements. While generally effective, occasional inconsistencies may arise, emphasizing the importance of unique keys.

There are several ways to use keys in a component, including external libraries and the Math.random() function. Another approach is to use the item's index. This works well to an extent in preventing duplicates and preserving the internal state of the list item. However, if the order of items in your list may change, you should not use this approach because it can negatively impact the performance of your app and cause glitches. The best practice is to use predefined keys in your data.

Let's modify the component to use keys. Our data already has an id property, so we can use it as our key.

//bookList component

...

return (
    <div>
    {data.map((book) => (
    <div key={book.id}>
        {/*rest of JSX code*/}
    </div>
    ))}
    </div>
 );
};

export default BookList;

Adding the key at the top-level element helps prevent optimization issues, especially in larger applications.

Conclusion

In conclusion, rendering lists in React is a fundamental skill for building dynamic and user-friendly applications. The map() method, combined with proper key usage, helps you to efficiently display and manage lists. By mastering these techniques, you can enhance the user experience of your React applications.

Getting Started with Angular: A Step-by-Step Guide

Eboreime Rhoda — Wed, 30 Aug 2023 12:00:46 +0000

Hello there, aspiring Angular developers! Whether you're just stepping into the world of web development or looking to expand your skill set, you've come to the right place. Welcome to the Angular Mastery Series: From Fundamentals to Real-World Projects, where we're embarking on an exciting journey through the ins and outs of one of the most potent front-end frameworks – Angular. This is the first article in this series.

Angular is more than just a framework; it's a way to create dynamic and sophisticated web applications. In this series, I'll take you from the very basics of Angular to building real-world projects that showcase your newfound skills. My goal is to help you become a confident and skilled Angular developer capable of creating modern, interactive, and efficient applications.

Let's get started!

Tutorial Outline

Introduction
Prerequsites
Setting up our development environment
Creating a new angular project
Building the UI: Creating Components
Data Binding: Connecting UI and Data
Styling the Application: Adding Basic CSS
Running the Application
Conclusion

Introduction

As I have explained at the beginning of this post, angular is a popular framework used for building web applications. It is primarily written in Typescript, open source and provides single page transitions for web apps.

Why you should consider using Angular For your next project

Angular allows you to build scalable web apps. So if you're thinking of a framework that has the capacity to handle heavier workloads as time goes on, Angular is a goto.
Angular basically provides most of the libraries that you'll need to build your app. This reduces the use of third party libraries. These libraries have features that covers routing, client-server communication, styling, animations and so on.
Lastly for this article, angular comes with development tools you'll need as you progress on your web app development stages. From the development phase to the testing phase.

Prerequsites

To successfully follow along, I recommend you have a foundational knowledge of:

HTML
JavaScript
TypeScript

Recommended softwares are:

An IDE (VS code, Sublime text etc).
Node.js
NPM

Setting Up the Development Environment

You can code your project in an online environnment like StackBlitz or CodeSandBox. For this tutorial and subsequent ones, I will be using my local environment setup. You can follow along either way you prefer.

Configuring your local development environment

After installing Node.js and NPM (Node Package Manager), the next thing is to set up your Angular workspace.

Install the CLI (Command Line Interface)
npm install -g @angular/cli
This would install the Angular CLI globally.

Creating a new angular project

For this tutorial, we're going to be building a todo app. Sounds like a good place to start! We'll tackle advanced projects as we progress in this series.

Open your code editor and then open the terminal. Create a new folder for angular projects in your preferred location with the mkdir command.

mkdir Angular-projects

This would create a new folder. Still in your terminal, cd into the new folder you created and type the command

ng new TodoApp

This would start creating our angular application.

ng is the command keyword for performing Angular operations. It is used with other keywords. We would use it a lot in our project. To see the list of all available commands, in your terminal, run ng --help.

You will be prompted with some questions.

Would you like to add Angular routing? No
For our basic todo app, we would not be using angular routing.

Which stylesheet format would you like to use? CSS

Click enter to select an option. Down arrow and up arrow keys for movement. For this project, I'll be using CSS but you can select your preferred option.

After these prompts, Angular would start creating our todo app project. If this was successful, you should see a message that says "packages successfully installed".

Open the folder you just created in a new window. You should see the basic folder structure of an angular project.

Next, we're going to start our application so that it runs in the browser.

Open a new terminal and run ng serve or npm start. Either of them would run your appication. Go to http://localhost:4200/ to see it.

We have successfully created our Angular project!

Building the UI: Creating Components

Its time to create the components for our app. Components are like building blocks for an application. Instead of having a central component, the app implementation is split into units. This is one advantage of using Angular. If you've used React, then you should be familiar with the concept of components.

Our Todo application will have three components, and the default app component making it four. The first component would be the header. The second is the todo list component where the app logic would be and the last is a footer component. Below is a wireframe showing the way the components are divided.

cd into your src directory and then, into your app directory. Create a components folder mkdir components.

Next, cd into the components folder you just created.

To create the first component run the command

ng generate component header

This would generate the Header component.

Similarly, run

ng generate component todolist

ng generate component footer

ng generate component can be shortened to ng g c.

If you check your components folder, you should see the new components.

You may have noticed that each of the components have four files.

file.component.css - This is where your CSS code will be.
file.component.html - This is where the content that would be displayed on the webpage would be.
file.component.spec.ts - This is the test file for this component. You don't need to edit it.
file.component.ts - This is the typescript file where the logic of the component would be.

Your CSS file should be blank. Your HTML file should show a p tag and your .ts file should show be like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

The first line just imports the Component decorator from the @angular/core module. It is used to define Angular components. You'll see it in every component.

Next, we see the component definition. Three important terms are inside the component declaration.

selector - This is the HTML selector for the component.
templateUrl - This holds the path to the HTML file for the component.
styleUrls - This holds the paths to the CSS files that would be used in the component.

Below this is the class declaration for this component. Each component has a class declaration that defines properties and methods for the application logic.

We're going to start by clearing out the default files.

Go to your app.component.html file. Highlight everything and clear it out. Then add the following HTML selectors for the components we created.

<!--Header component-->
<app-header></app-header>

<!--Todolist component-->
<app-todolist></app-todolist>

<!--Footer component-->
<app-footer></app-footer>

Quickly, we'll add a simple header and footer so that we can focus on building the todo app.

In your header.component.html add the following (you can also customize it):

<div>
    <h1 class="header">My TodoApp</h1>
</div>

In your footer add a "Built by [name]" (you can also customize it).

<div>
    <p>Built by Rhoda</p>
</div>

Now, it's time to start the main app.

Data Binding: Connecting UI and Data

Data binding has to do with connecting your data with your User Interface (UI). It's like the thread that weaves together the fabric of your web application, making it both interactive and dynamic. Angular has two major categories of data binding.

There is the one-way data binding where just as the name implies, the data flows in one direction. That is, the data can be connected to the UI and the UI would be updated with the components data. However, the UI cannot update the component's data. You should use this if you only need to display data from the component in the UI but do not need to capture user input or changes in the UI back into the component.

The other is the two-way data binding which is an opposite and extension of the one-way data binding. It allows data to flow in both directions. That is, from the data component to the UI and from the UI to the data component.

There are many examples of these data bindings and we would encounter them as we begin our app.

Here's the HTML skeleton of the todo list

<!--todo component-->
<div class="todo-container">
  <div class="todo-input">
    <input placeholder="Add a new task" />
    <button>Add</button>
  </div>
  <ul class="task-list">
    <li>todo</li>
    <button>Delete</button>
  </ul>
</div>

For our data component, first, we'll need an array where we can push the new todo items into. We'll also need a variable to store the new items to be added to the todo list. Then, we'll need an add and delete function that will handle the addition of items to our list and deletion of items.

//todo array
 todos: string[] = [];
//new todo item
  newTodo: string = '';

//function to add items to to do array
addTodo() {
    if (this.newTodo.trim() !== '') {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }

 //function to delete items from to do array
  deleteTodo(todo: string) {
    const index = this.todos.indexOf(todo);
    if (index !== -1) {
      this.todos.splice(index, 1);
    }
  }

Once we've set up our data component, its time to connect the variable, array and methods to our UI.

Updating the UI with angular two-way binding

A common two-way binding used is the ngModel. It is used in a form element to get data from an input and then send the data to the property that would store the input.

Thus, in our app:

<input [(ngModel)]="newTodo" placeholder="Add a new task" />

Here's a breakdown of what is happening:
The square brackets [ ] denote property binding (binding from component to the template), and the parentheses ( ) denote event binding (binding from the template to the component).

This combination allows the input field and the component property (newTodo) which the input is bound to, to stay synchronized in both directions.

When you type a task in the input field, the newTodo property of the component is updated with the input's value, and if there is any change in the newTodo property, the input would also be updated.

Important note: the ngModel binding is exported from the FormsModule library. We will need to import it in our app.module.ts file and add it in the imports array:

//other imports
import { FormsModule } from '@angular/forms';

@NgModule({
imports: [FormsModule]
})

Updating the UI with event binding

Similar to javaScript event handlers, event binding listen for and responds to a user actions such as keystrokes, mouse movements, clicks, and touches.

(click) is a popular event binding that listens for a click event on the element it is binded to. We have created two methods for our todo app. We want an item to be added when the add button is clicked. We also want an item to be deleted when the delete button is clicked. To achieve this, we would bind the methods to their respective HTML buttons so that they would listen for a user's click and be triggered.

<button (click)="addTodo()">Add</button>
<button (click)="deleteTodo(todo)">Delete</button>

Observe that the delete button has the todo argument passed to it. It takes in the specific todo item to be deleted.

Updating the UI with angular directives

Directives in Angular are like special instructions you give to your HTML elements. They tell Angular what to do with those elements or how they should behave. They are one of the ways to update a UI and make a web application more interactive and dynamic.

Learn more about directives.

In our todo app, we will need to use an angular directive to pass our array of todo items to the UI. Angular has different types of directives, one of which is the built in angular directive. We would come across all of them as we progress in this article series.

Built-in directives controls the HTMl elements and manupulates the UI. A popular one is *ngFor which works like a normal loop statement. That is, it loops through a list of items and returns each item in the list.

We have a list that holds the todo items a user adds and we want to loop through it and then display each item. To do this, we would use the *ngFor directive.

Update the HTMl to use this directive:

<li *ngFor="let todo of todos">
      <!--code-->
</li>

Here's a breakdown of what is happening:
let todo of todos - This sets up the loop. It says: "For each item in the todos array, temporarily assign each item to the variable todo." In other words, it iterates through the todos array and assigns each element to the variable todo for each iteration.

Updating the UI with interpolation

Interpolation is a way to update a UI with string data.

The todo items would be string values therefore, we would use it to pass the looped todo items to the web page for the users to see.

   <li *ngFor="let todo of todos">
      <!--code-->
      {{ todo }}
</li>

Now, a user can see the todo items they have on the web page.

Having explained these bindings, here is the full html template code with the bindings I explained:

<!--todo list component-->
<div class="todo-container">
  <div class="todo-input">
    <input [(ngModel)]="newTodo" placeholder="Add a new task" />
    <button (click)="addTodo()">Add</button>
  </div>
  <ul class="task-list">
    <li *ngFor="let todo of todos">
      <!--code-->
      {{ todo }}
      <button (click)="deleteTodo(todo)">Delete</button>
    </li>
  </ul>
</div>

Remember, I have provided the full component's code already.

Styling the Application: Adding Basic CSS

I have provided a basic css styling below for the app:

.todo-container {
  width: 100%;
}
.todo-container input {
  padding: 10px;
}
.todo-container button {
  border: 1px;
  border-radius: 100%;
}

Running the Application

Start your server with npm start or ng serve.

Conclusion

In conclusion, the todo app we've developed represents a fundamental example of a dynamic and interactive web application built using Angular. Throughout the process of creating this app, we've covered several key concepts and techniques that are foundational to web development with Angular. I have linked some resources below for a flexible learning experience.

In upcoming articles in this series, Angular Mastery Series: From Fundamentals to Real-World Projects, we would delve deeper into:

Mastering Angular Components and Directives
Exploring Angular Routing and Navigation

And more!

Designer vs. Developer: what do they do?

Eboreime Rhoda — Thu, 25 Mar 2021 22:39:57 +0000

Most people know this already, but for most beginners, these terms are often confusing. For someone new to web development, there is a need to understand what the roles of a developer and designer are so that it will be easy to decide whether to learn how to be a developer, or how to be a designer. In this article, I'm going to explain as much as I can who a developer and a designer is, their differences and where they overlap.

Who is a designer and who is a developer?
A designer or web designer, is an IT professional that works on the appearance, layout, and in some cases content of a website. On the other hand, a developer or web developer, is an individual who is responsible for bringing the designer's work to life by using various programming languages to develop the product. Let's dive a little deeper into their differences. But first, I'll explain the phases of building a project so that you can clearly see the differences between these two sets of people.

Planning phase

The first phase of building any project is the planning phase. It is the first and most important. This is when you decide and map the entire project. Also, at this stage, you interact with your clients to decide what their goal is and what they want. You should also ask yourself some important questions like, how should the product look?; how should the product feel?; or what should it do?.

Design phase

From the planning phase, we go into the design phase. At this point, you've gathered information about what your client wants and the expectation of the user. You should already have a visual representation of how the product will look and what the users will see. You then take the information from the planning phase and make it a reality by creating or designing the site structure, mobile structure, appearance and layout of the product.

Development phase

The development phase is where the designer's work is implemented with various programming languages. In this phase, you use all the assets and information that have been gathered from the design phase and try to implement it into a live website or mobile app.

Launch phase

Once the product has been developed, we can now talk about launching it. That is putting it on a server or hosting it. In this phase, you deliver your product to the users. After the product has been launched, there may be some design tweaks and testing of the product to make sure it works properly. Once you've launched your product, it doesn't end there, there is another phase which is the post-launch phase.

Post-launch phase

In this phase, you will have to monitor how the users use the product to see if there are any issues or bug fixes that need to be addressed. More testing is done based on how the users interact with the product, like, how they navigate through the site, why they are not clicking on a button, and so on.

The phases of building a project outlined above will eventually turn into a loop because from the ideas and insights you will get after the launch, you can start improving or updating your product. Improving your product means planning again, designing again and developing again. As time goes on, you may get better ideas and improve the product over and over again. This whole process continues.

You can never really finish developing a product because a product can always be improved.

Now, coming back to the topic of the discussion, a designer is involved in the planning phase, design phase and post-launch phase. They are heavily involved in the planning phase and design phase. They are the ones that will interact with the clients and design what their clients want. They have the responsibility of designing the product to meet the user's expectation. They are also involved in the post-launch phase because they learn from the user and improve their design.

The developer is mainly concerned with the development, launch and post-launch phases. They receive the designs and use tools and technologies like HTML, CSS and JavaScript to implement the designs into an actual working website or mobile app. They are involved in the launch phase in the sense that, they put the code they have written on a server so that their clients can have access to it. While testing is going on, they may likely encounter bugs in their program or see a need to improve or add a feature.

In conclusion, a designer is involved more at the beginning and later stages of product development. Whereas, the attention of a developer is needed at the intermediate and later stages of product development. There is no restriction on either field, a designer can also be a developer and a developer can also be a designer.
Below are some resources for further studying. Thanks for reading!. Feel free to connect with me on Twitter.

Illustrations credit - undraw.co

DEV Community: Eboreime Rhoda

Rendering Lists in React

Introduction

Prerequisites

Table of Contents

Transforming Lists with the `map()` method

Rendering Lists in components

Using Keys Within Lists

Conclusion

Getting Started with Angular: A Step-by-Step Guide

Tutorial Outline

Introduction

Why you should consider using Angular For your next project

Prerequsites

Setting Up the Development Environment

Configuring your local development environment

Creating a new angular project

Building the UI: Creating Components

Data Binding: Connecting UI and Data

Updating the UI with angular two-way binding

Updating the UI with event binding

Updating the UI with angular directives

Updating the UI with interpolation

Styling the Application: Adding Basic CSS

Running the Application

Conclusion

Designer vs. Developer: what do they do?

Planning phase

Design phase

Development phase

Launch phase

Post-launch phase

Resources

DEV Community: Eboreime Rhoda

Rendering Lists in React

Introduction

Prerequisites

Table of Contents

Transforming Lists with the map() method

Rendering Lists in components

Using Keys Within Lists

Conclusion

Getting Started with Angular: A Step-by-Step Guide

Tutorial Outline

Introduction

Why you should consider using Angular For your next project

Prerequsites

Setting Up the Development Environment

Configuring your local development environment

Creating a new angular project

Building the UI: Creating Components

Data Binding: Connecting UI and Data

Updating the UI with angular two-way binding

Updating the UI with event binding

Updating the UI with angular directives

Updating the UI with interpolation

Styling the Application: Adding Basic CSS

Running the Application

Conclusion

Designer vs. Developer: what do they do?

Planning phase

Design phase

Development phase

Launch phase

Post-launch phase

Resources

Transforming Lists with the `map()` method