Ryan dropped out of college and worked as a musician and violin instructor. He spent 5 years teaching himself how to program before getting freelance gigs, and ultimately landing developer jobs.

We talk about:

• Life as a broke musician

• Teaching yourself to code while working full-time

• How Ryan had to move back in with his parents after a divorce

• His 5-year journey to his first developer job

Also, I want to thank the 11,384 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. Be sure to follow the freeCodeCamp Podcast there so you'll get new episodes each Friday.

Links we talk about during our conversation:

Ryan's podcast, Web Dev Dialogues: https://www.webdevdialogues.com/episodes

Ryan's website: https://www.ryanfurrer.com

A freeCodeCamp course on the Astro front end development framework taught by freeCodeCamp podcast guest James Q Quick: https://www.freecodecamp.org/news/learn-the-astro-web-framework/

The JavaScript ecosystem is changing so fast that it can be overwhelming to pick the best tools to use. To solve this problem, in this article, I’m going to walk you through how to set up a front-end project from scratch.

We'll cover things like must-have editor extensions, adding JavaScript libraries to your project, why you'll use Node.js even if you want to do front-end development, and setting up an application bundler that will generate a live preview as you code in your browser.

You can also watch this article as a video on YouTube. Let's dive in.

Table of Contents

1. How to Choose a Code Editor

2. How to Auto-format Your Code in VS Code

3. Why Do You Need Node for a Front-End Project?

4. How to Run Your Project

5. How to Add Libraries to Your JavaScript Project

6. How to Get Coding Tips While You Code

7. Initialize a Project with Vite

8. Summary

How to Choose a Code Editor

Let’s start with the foundations. As a web developer, you mostly edit text, so you need a good editor. So which one should you use?

Picking an editor is highly based on personal preference, as most editors have very similar features.

If you don’t have a personal preference, I highly recommend VS Code. Lately, it has become the de facto standard editor for web development.

One of the greatest features of all the mainstream editors is that you can add extensions to them. Let’s walk through two extensions that are must-haves.

How to Auto-format Your Code in VS Code

Prettier is an extension that makes your code more readable and more consistent.

Let’s say you copy-pasted some code, and it’s hard to read. The tabulation is off, a line is too long, and so on. Then you just save the file, and magically, everything looks as it should be.

This is what Prettier does. It formats the code based on best practices. It doesn't just fix tabulation and wrap the lines. It also adds parentheses to improve code readability, makes sure you are consistent with quotation marks, and many more.

To make it work in VS Code, we must first install the Prettier extension. To do so, go to the extensions panel in VS Code, search for Prettier, and then install it.

Installing this extension doesn't format your files automatically on save by default. The default behavior is that once you install this extension, you can right-click within a file and select Format Document. You can also select part of a file and choose Format Selection.

The first time you do this, you need to select the default formatter. VS Code already has a formatter, but it isn’t as powerful as Prettier. Now that you have two formatters, you have to let VS Code know that you want to use Prettier for formatting in the future.

If you wish to auto-format your files when you save them, you need to change the settings. Go to Settings in your VS Code preferences and search for the Format on Save option. By default, this is false, so make sure that you tick this checkbox. With this, Prettier formats your files every time you save them.

Formatting can be controversial, though. I highly recommend the default settings, especially for beginners. But if you prefer a different style, you can customize things.

You can indicate with comments to ignore specific lines and create a config file to list your preferences.

In the root folder of your project, you can create a file called .prettierrc and add a few options. A typical option could be if you prefer single quotes instead of double quotes in your files. Or if you don't want to have semi-colons at the end of your lines.

With this configuration, you will have a different format once you save your files.

{
  "singleQuote": true,
  "semi": false
}

There are many more options, of course. If you want to dig deeper, check out Prettier's documentation.

Why Do You Need Node for a Front-End Project?

Before we get to the second must-have extension, we need to set up a few other things. First, we need to talk about Node.js. What is Node, and why do you need it even if you work as a front-end developer?

Node is often associated with backend development, but that's not its only job. Node is a JavaScript runtime – this means it runs JavaScript files outside of the browser.

There are two ways of running JavaScript code. You can either have it as part of a website and run the entire website in a browser, or run only the Javascript file with a runtime like Node.

In the example below, we have a very simple Javascript file that prints "Hello World" to the console. If we have Node installed, we can go to the terminal, navigate to the folder where this file is, and then run it with Node like this. You can see that the file was executed, and the result is in the console.

That's what Node really is: a tool that runs JavaScript files on their own.

JavaScript mostly behaves the same way in both environments. But there are also differences in what JavaScript can do in a browser vs when it runs with Node.

For instance, when running in the browser, JavaScript can access and modify HTML elements. That's the main point of having JavaScript in the first place.

In Node, there's no HTML file. JavaScript runs on its own. On the other hand, in Node, JavaScript has access to your file system and can read and write your files.

For instance, you can run scripts on your machine to initialize a project. We are going to do that. You can run checks on your files and automatically correct the mistakes. Or you can run your test files.

In short, Node lets you run some tools that make your life much easier as a developer.

To install Node, go to nodejs.org and install it. If you are unsure if you already have Node, you can also go to your terminal and run node -v to check. If you get a version number, you have Node.

So, why do people associate Node primarily with backend development? If the backend code is in JavaScript, the servers must run it somehow without a browser. So yes, if you are a backend developer using JavaScript, then you're most probably going to use Node. But Node is much more than that.

How to Run Your Project

Now that we have Node, we can use a live server to see our site live in the browser as we develop it. Without this, you need to manually refresh the browser window every time you make a change.

These tools are called bundlers because they take all your files and turn them into a neat package you can run in the browser. So why do you need them?

• They update your site live in the browser with hot reloading. When you save a file, you immediately see the result in your browser.

• As web development tools have evolved, the browser won't understand your files when you use anything more advanced. For instance, are you using React? Then, you're using the JSX syntax – the one that looks like HTML. The JSX syntax is not part of JavaScript. You need a tool to convert it into plain JavaScript. Otherwise, it won't run in your browser. Or are you using TypeScript? You also need to turn that into JavaScript. Or, if you're using SCSS or any other CSS dialect, you need to convert it to plain CSS.

• If you import libraries using the JavaScript module system, you need a live server to avoid CORS issues in your browser.

This is what bundlers do. They make sure that you can use modern-day tooling while you're developing your application, and they can also create a final production build that you can publish on the internet.

How do you pick a bundler? There are several options, and essentially, they all do the same thing. The difference between them is in their performance, configuration options, and ease of use.

The most used bundler is still webpack, one of the earliest bundlers in the field. But the one that seems to have taken over the throne and gained more and more popularity is Vite. Here's a chart from the latest edition of the State of JavaScript survey.

This chart shows that while most developers have used Webpack, they don’t necessarily love it. At the same time, Vite's popularity is rising while still maintaining a positive sentiment.

If you haven't checked out the State of JavaScript survey before, I highly recommend going through it. It gives you an excellent overview of the latest trends with JavaScript. You can learn which tools and libraries people love to use and which they will abandon soon. If you feel overwhelmed by all the changes in the JavaScript ecosystem, the results of this survey can be a great guide.

Once we have a folder for our project, let's navigate to it using our terminal. The easiest way to do this is to open the folder in VS Code and then use the built-in terminal. VS Code will open the terminal with the correct folder.

Then, you can run the project in the terminal with the following command. npx is a command line tool that comes with Node. This is one of the reasons we installed Node: to be able to run commands like this.

npx vite

The first time you run this script, it will ask you to install Vite. Say yes. Then, it will show you the URL of a local server, which you can open in a browser to view your project.

  VITE v6.1.0  ready in 162 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Now, if you update a file and save the changes, the new version appears in the browser immediately. It generates a live preview of your site until you stop the script or close the terminal. You can keep it running while you're developing your site.

Once you have finished, you can press Ctrl+C to stop the script. If it gets desynchronized or you break it with an error, restart it by pressing Ctrl+C to stop it and rerunning the same script. So that's how you run a project with Vite.

How to Add Libraries to Your JavaScript Project

Now that we have Node, we can also use npm or Note Package Manager to add libraries to our project. npm is another tool included with Node. So how does it work?

First, I will walk you through setting things up step by step the manual way so it's clear how the different parts come together. Then, I will show you how to automate most of these steps.

Navigate to your current folder in the terminal and run the following command to initialize the project. This command initializes a package.json file with some metadata.

npm init --yes

At this point, this file is not very interesting. It contains the project name, description, version number, and so on. You can change these values.

Now, we can add libraries to our package with the npm install command. In a previous article, we used Three.js to render 3D boxes in the browser.

So, as an example, let's install Three.js. Go to your terminal again, make sure you are in the correct folder, and run the following command:

npm install three

This command will install Three.js. But how do you know that the keyword is three here, not Three.js?

When you don’t know the package name, you can just google npm and the name of the library you need. Or, if you don't even know the library name, you can also just search for an npm 3D library and see what Google comes up with.

We can go through each package one by one and pick one based on their capabilities and other info. These packages mostly come with descriptions and quick examples to give you an idea of what the library can do for you.

Another indicator you might want to look for is the weekly downloads and the date of the last update to ensure you select an actively maintained library that people still use.

Once you find the package you are looking for, you can see the command to install it at the top right corner: npm i three. The i here is just shorthand for install. Another way to learn how to install Three.js is to go to its official documentation and check the installation guide.

When we install a package, three things happen:

• It adds the latest version of Three.js in our package.json file as a project dependency.

• It also creates a package-lock file, which NPM uses to keep track of the dependencies. You should never edit the dependency section of your package.json file or the package-lock file manually. Instead, you should always use commands like npm install and uninstall to add, remove, or update packages.

• Finally, the node_modules folder gets created. This folder contains the source code of Three.js. When we import Three.js in our project, it looks for it in this folder. The content of this folder is also something that you should never change. You can look into it if you're interested in the source code of the library that you're using, but you shouldn't change it.

If something goes wrong and you have an error with your dependencies that you can't figure out, then you can always safely delete the node_modules folder and the package-lock file and reinstall your dependencies based on the package.json file. This is not something that you should do, but you can always go back to having a clean slate.

Now that we have installed Three.js, we can create a simple website that displays a 3D box. It's a simple HTML file and a JavaScript file with the code for the 3D box. The key here is that we import Three.js with the import statement in the JavaScript file. This import will use the package that we just installed.

Then, we can run the project with Vite. Using imports means that we use the module system now. Running a project with the module syntax can be a bit tricky, as the browser gives you CORS errors by default. However, as we are using Vite to run our project, it works seamlessly without any questions. That’s one of the reasons we use Vite.

If you want to learn more about building 3D games with Three.js, check out my earlier article on building a minimalistic car in the browser.

How to Get Coding Tips While You Code

The second must-have editor extension is ESLint. While Prettier formatted the code, ESLint gives you coding tips.

It helps you catch basic mistakes and avoid patterns that can cause bugs or be misleading when you try to understand the code.

Here’s a simple example where you declare a variable, but then you have a typo, and you try to use another variable that doesn't exist. ESLint will highlight this for you. It will give you an error both at the variable declaration, saying that you created a variable you don't use, and add the usage, saying that you're trying to use a variable that is not declared. With ESLint, it's easy to spot that you made a typo.

ESLint, of course, is much more complex than just being able to catch simple errors. There are also less obvious use cases where you might not understand why ESLint is complaining. Then, you can always click the link in the error popup for more details explaining why this pattern is harmful and what you can do to avoid it.

So how can we use ESLint in our projects? This time, we need to have an extension and a configuration. First, as we did with Prettier, we must install the ESLint extension. Go to your extensions, search for ESLint, and install it.

We also need to set up ESLint for our project. Before we do that, we need to make sure that the project already has a package.json file. If you don't already have a package.json file, we first have to run npm init --yes to initialize the project. Then, we can generate an ESLint config with the following command:

npm init @eslint/config@latest

This script will ask you a few questions. Based on your answers, it will customize the configuration and the rules to check. For most cases, you can use the default option.

• The first time, it will ask for permission to install ESLint. Say yes.

• Then, it will ask you whether to use ESLint only for syntax checks or to find problems as well. Choose the second option to get the most help from ESLint.

• Then select that you’ll use it with JavaScript modules. Modern web development projects use the JavaScript module system. We use JavaScript modules if we have imports and exports in our code.

• Then, it will ask what framework we are using. If we select a framework, it will add framework-specific rules to our project. For instance, using it with React will force us to define the prop types. If we don't use a front-end framework, just vanilla JavaScript, then select "None of these".

• Then, it will ask if the project is using TypeScript. Choose based on your preference.

• It asks where you run the code. As we have a front-end project, select "Browser".

• Then, it will ask if you want to install the additional dependencies that are required for the rules based on your selections. Select yes.

• It will also ask what package manager we’re using. We haven't talked a lot about this, but there are multiple package managers that we can use. Select the default: npm.

These were a lot of questions. Let's see what happened after we ran this command.

After this step, we have ESLint and some other dependencies based on the answers in the package.json file as development dependencies. Development dependency means that ESLint won't be part of your website's final code, but we need it during development.

ESLint also became part of our node_modules folder, and there are many more packages here now. This is because a dependency can have other dependencies, and the dependencies of the dependencies will also be part of the node_modules folder.

ESLint also created a config file that sets up the rules based on your answers. We will see how to customize the rules.

Now that ESLint is working, you should also see errors in the code once something is off. If you go to your JavaScript file and try to use an undeclared variable, ESLint will highlight the issue.

ESLint is also highly customizable. For instance, we might not want to mark an unused variable as an error. First, we go to the error popup and select the identifier of this type of error. Then, we go to the ESLint config and override this error as follows. Here, we can reduce the severity to a warning or completely turn off this rule.

import globals from "globals";
import pluginJs from "@eslint/js";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  {
    rules: {
      "no-unused-vars": "off", // Turn off the No Unused Variables rule
    }
  }
];

But if you're a beginner, I recommend following the rules that ESLint has by default. Sometimes, it might be annoying to fix all the seemingly harmless issues, but all these rules are based on industry best practices, so it's good to follow them. For more details, check out ESLint's documentation.

Initialize a Project with Vite

We walked through the step-by-step process of setting up a project. We used npm init to initialize the project, manually set up ESLint, and ran our project with Vite. Vite can also initialize the project with a sample application and all the necessary files, which is especially handy when we set up a React project.

Let's see how to set up a vanilla JavaScript and a React project. Let's navigate to a folder in the terminal that will contain our project. We don't need to create a project folder this time because the script will make it for us. Then, run the following command to initialize a project:

npm create vite@latest

This command asks you a few questions.

• First, it will ask you for the project name, which will also be the name of the folder created as the project root.

• Then, it will ask what framework you use. If you don't use any framework and want plain old JavaScript, choose "Vanilla." If you use React, choose React.

• Then, it will ask you if you want to use TypeScript or JavaScript. Here, the default is TypeScript. If you're a beginner in web development, choose JavaScript. If you are more confident with your skills, then go with TypeScript. TypeScript is more complicated, but it has become the industry standard in web development, and most jobs require you to know it. As a beginner, you can go with JavaScript.

Now, we can navigate to the new folder created and check out what we have here. If you choose a vanilla JavaScript project, you can see it generated a simple application with HTML, CSS, and some JavaScript files. You can change or even delete these. You'll need an HTML file as an entry point, but you can replace the rest.

We can run this project with npx vite as we did before, but there’s a better way. For a real project, we want to add Vite as a development dependency to ensure consistency with the version we are using.

{
  "name": "my-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^6.1.0"
  }
}

The package.json file shows that Vite has been added as a development dependency. To use this hardcoded version, we first have to install it via npm install. This command installs all the dependencies listed in the package.json file.

npm install

This package.json file now also has a scripts section. This section can define scripts to run your app locally, create a production build, or test your application. You can run them with npm run. So, for instance, to run the application, you can open the terminal with the correct folder and run the following command.

npm run dev

This runs the script labeled as “dev” in the scripts section, which will run the Vite version we just installed with npm install.

Vite does not install ESLint when you create a vanilla project, but you can always install it manually, as we did before with npm init @eslint/config@latest.

If you choose React as a framework when we initialize the project, we will have a couple more files. For instance, we have an ESLint config with the recommended React settings. We also have a Vite config that enables us to use React and a sample application that we can run.

To run this app, we need to install the dependencies. So, let's go to the terminal and run npm install. This will install all the dependencies, including React. Then, we can run this app with npm run dev, and we will have a working React application.

Summary

In this article, we set up and run a front-end project with Vite. We also covered how to find and add dependencies, how to have consistent and automatic formatting with Prettier, and how to avoid bugs with ESLint.

What happens once you finish developing your app? How do you upload it to the web and share it with the world? That's the topic of a future article.

Subscribe for more tutorials on Web Development:

A strong foundation in JavaScript is the cornerstone of any successful front-end project.

In this article, I aim to provide you with the fundamental JavaScript knowledge required to succeed in React and other front-end frameworks. By the end of this piece, you will better understand key JavaScript concepts—such as destructuring, short-circuiting, and fetching data, among others—and how to use them effectively.

Are you ready to improve your JavaScript skills? Let's dive right in 😉

Table of Contents

• How to Use Template Literals

• How to Destructure Objects and Arrays

• Ternaries Instead of if/else Statements

• How to Use Arrow Functions

• Short-Circuiting with && , ||, and ??

• How to Use Array Methods

• How to Fetch Data

• You Can Start React Now

How to Use Template Literals

Ever felt like string construction in JavaScript was a bit of a chore? Imagine putting together a birthday message and constantly adding quotes and plus(+) signs to include the name.

Before ES6, that was the reality with string concatenation. Let's say you wanted to greet a user:

let name = prompt("What is your name?");
let greeting = alert("Hello, " + name + “!");

This code works, but it can get messy when dealing with multiple variables or dynamic content.

Then came template literals! Introduced in ES6, they offer a more elegant way to create strings using backticks (``) instead of quotes. Here's how to rewrite the greeting with template literals:

let name = prompt("What is your name?");
let greetings = alert(`Hello ${name}`);

See the difference? The ${name} part tells JavaScript to insert the value of the name variable directly into the string.

Template literals give you the power to perform string interpolation easily in the JavaScript ecosystem, no more clunky concatenation 😉!

The Benefits of Template Literals include:

• Readability: Your code becomes clearer and easier to understand.

• Maintainability: Updates are simpler since changes are localized within the template literal.

• Expressiveness: You can create multi-line strings and even use functions within them!

Not only do template literals make your life easier, but they're also instrumental in building dynamic components with React. You can, for instance, create dynamic list items, conditionally render components, or format output based on data.

const name = 'Alice';
const greeting = `Hello, ${name}! How are you today?`;
console.log(greeting); // Output: Hello, Alice! How are you today?

const items = ['apple', 'banana', 'orange'];
const listItems = items.map(item => `<li>${item}</li>`).join('');
const list = `<ul>${listItems}</ul>`;

As you can see, template literals make building dynamic and readable string-based components in React easier.

How to Destructure Objects and Arrays

Destructuring in JavaScript allows you to extract values from arrays or properties from objects into separate variables, providing a concise and efficient way to handle data structures.

How to Destructure Objects in JavaScript

To destructure an object, use curly braces { } and specify the property names you want to extract. Let's consider an example:

const person = {
    firstName: 'Olalekan',
    lastName: ‘Akande',
    middleName: ‘Toheeb’,
    age: 30 
};

const {  lastName , firstName} = person;
console.log(firstName, lastName); // Output: Akande Olalekan

In this code, we destructured the person object and extracted the firstName and lastName properties into separate variables.

Nested Destructuring:

You can also destructure nested objects:

const address = {
    street: '123 Main St’,
    city: 'Ilorin'
    state: {
        name: 'Kwara',
        abbreviation: 'KW'
    }
};



const { street, city, state: { name } } = address;
console.log(street, city, name); // Output: 123 Main St Ilorin Kwara

Default Values:

You can provide default values for properties if they are undefined:

const config = {
    theme: 'light'
};

const { theme = 'dark' } = config;
console.log(theme); // Output: light

Renaming Property

Occasionally, you might need to change an existing property name to a different one for better readability or consistency within your project. Destructuring offers a convenient way to achieve this.

Using a different property name within the destructuring assignment can effectively rename the property as you extract it.

const person = {
    firstName: 'Olalekan',
    lastName: ‘Akande',
    middleName: ‘Toheeb’,
    age: 30 
};

const { firstName: givenName, lastName: familyName } = person;
console.log(familyName, givenName); // Output: Akande Olalekan

In this example, firstName is renamed to givenName, and lastName is renamed familyName during the destructuring process.

This renaming technique can improve code clarity and maintainability, especially when dealing with complex objects.

Destructuring Arrays

To destructure an array, you use square brackets [] and specify the indices of the elements you want to extract:

const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first, second, rest); // Output: 1 2

Destructuring in React

Destructuring is widely used in React components to extract props, state, and context values. It simplifies code and improves readability:

import React from 'react';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

Rest and Spread Operator

The rest and spread operators are closely related to destructuring.

Rest Operator

The rest operator (...) collects the remaining elements of an array or object into a new array or object:

const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;
console.log(rest); // Output: [2, 3, 4, 5]

Spread Operator

The spread operator also uses ... but is used to expand an iterable into individual elements:

const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5];
console.log(newArray); // Output: [1, 2, 3, 4, 5]

In React, the spread operator is often used to clone arrays or objects, or to pass props to components:

const person = { name: 'John', age: 30 };
const newPerson = { ...person, city: 'New York' };
console.log(newPerson); // Output: { name: 'John', age: 30, city: 'New York' }

Understanding destructuring and the rest/spread operators can help you write more concise and expressive JavaScript code, especially when working with React.

Ternaries Instead of if/else Statements

Ternary operators offer a concise and fine alternative to traditional if/else statements in JavaScript. They are particularly useful for conditional expressions that return a value based on a condition.

Why Ternaries Over if/else?

While if/else statements are versatile, they can sometimes lead to verbose code, especially when dealing with simple conditional logic. Ternary operators provide a more compact and readable syntax, making your code easier to understand and maintain.

Syntax and Usage

The syntax for a ternary operator is as follows:

condition ? expression1 : expression2

If the condition is true, expression1 is evaluated and returned. Otherwise, expression2 is evaluated and returned.

Pure Example:

let age = 19;

const isAdult = age >= 18;
const message = isAdult ? 'You are an adult.' : 'You are a minor.';
console.log(message);

The above example will return a message based on the value of the age variable. Can you predict what will be displayed in the console?

Example in React:

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
        {isLoggedIn ? (
        <p>Welcome, user!</p>
        ) : (
        <p>Please log in.</p>
        )}
        </div>
    );
};

In this React component, the ternary operator renders different content based on the isLoggedIn prop conditionally.

Benefits of Ternary Operators:

• Concise syntax: Ternary operators provide a more compact way to express conditional logic.

• Readability: They can improve code readability by making conditional expressions more concise and easier to understand.

• Efficiency: Sometimes, ternary operators are more efficient than if/else statements.

By incorporating ternary operators into your JavaScript code, you can write more elegant and efficient programs.

How to Use Arrow Functions

Arrow functions, introduced in ES6, provide a concise syntax for defining functions. They are particularly useful in functional programming paradigms and can significantly improve code readability and maintainability.

What are Arrow Functions?

Arrow functions are a shorthand syntax for declaring functions. They have a simpler structure compared to traditional function declarations or expressions. They are often used for short, inline functions.

Syntax:

const myFunction = (arg1, arg2) => {
    // Function body
};

Key Features:

• Implicit this binding: Arrow functions do not create their own this context. Instead, they inherit the this value from the enclosing scope, which can be helpful in callback functions and event handlers.

• Concise syntax: The arrow function syntax is often shorter and more readable than traditional declarations.

• Implicit return: For single-line arrow functions with a return statement, the return keyword can be omitted.

Example:

const greet = name => `Hello, ${name}!`;
console.log(greet('Akande')); // Output: Hello, Akande!

Using Arrow Functions in React

Arrow functions are commonly used in React components for various purposes, including:

• Event handlers:

<button onClick={() => this.handleClick()}>Click me</button>

Explanation: Here, the arrow function is used as the event handler for the onClick event. This ensures that the this context within the handler refers to the component instance, allowing you to access the component's state and methods.

• Map, filter, and reduce:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);

Explanation: Arrow functions are often used with array methods like map, filter, and reduce to perform transformations on data. In this example, the map method creates a new array where each element is doubled, using an arrow function for the callback.

Props:

const MyComponent = ({ name, onButtonClick }) => {
    return (
        <button onClick={onButtonClick}>Click me</button>
    );
};

Explanation: Arrow functions can be used to define props that are functions. In this example, the onButtonClick prop is a function that can be passed to the component. When the button is clicked, the onButtonClick function will be called.

By using arrow functions effectively, you can write more concise, readable, and maintainable React code.

Short-Circuiting with && , ||, and ??

Short-circuiting is a JavaScript evaluation technique that can optimize conditional expressions. It involves stopping the evaluation of a logical expression as soon as the final result is determined.

Short-circuiting in logical operators means that, in certain conditions, the operator will immediately return the first value and not even look at the second value.

We can say that short-circuiting depends on the truthy and falsy values

Falsy values include: 0, empty string (‘’), null, undefinded.

Truty values are basically anything that is not fasly value.

When do logical operators short-circuit?

Logical AND (&&)

The && operator short circuit when the left-hand side of the operator (first operand) is false (that is, it immediately returns the first value when it’s any of the falsy values). There is no short-circuit if the first operand is truthy, it will return the right-hand side of the operator(second operand).

This is known as short-circuiting to the left.

Example:

const isLoggedIn = true;
const greeting = isLoggedIn && <p>Welcome, user!</p>;

In this example, the greeting variable will only be assigned the JSX element if isLoggedIn is true. If isLoggedIn is false, the && operator will short-circuit, and the JSX element will not be rendered.

Logical OR (||)

The || operator works in the opposite direction as the && operator. The || operator short circuits when the first operand is true. That is, If the left-hand side of the || operator is true, it immediately returns the second value.

This is known as short-circuiting to the right.

Example:

const username = 'Akande';
const greeting = username || ‘Guest';

This code will assign greeting the value of username if it's not any of the falsy values. Otherwise, it will assign the default value of Guest.

Note: You have to be very careful when using the || operator in cases where you might actually wish to return the 0. .

For example

let numberOfBooksRead = 0;
const hasRead = numberOfBooksRead || ‘No data’;

// hasRead = ‘’No data’

The above will return No data because the first operand—numberOfBooksRead —is a falsy value. In this kind of situation, it’s better to use the nullish coalescing operator (??)

Nullish Coalescing Operator (??)

Nullish coalescing operator (??) returns the left-hand side operand if it is not null or undefined. Otherwise, it returns the right-hand side operand.

The above example can now be written as

let numberOfBooksRead = 0;
const hasRead = numberOfBooksRead ?? ‘No data’;  

// hasRead = 0;

Optional Chaining (?.)

The optional chaining operator (?.) provides a safer way—in React—to access nested properties without throwing an error if a property is undefined or null.

const user = { address: { street: '123 Main St' } };
const street = user?.address?.street;

In this example, street will be assigned the value of 123 Main St if both user and user.address exist. If either is null or undefined, street will be undefined without throwing an error.

Effective usage of short-circuiting and optional chaining makes you write more concise and robust React components.

How to Use Array Methods

Arrays are fundamental data structures in JavaScript that store collections of elements. They are ordered and can contain elements of different data types.

Essential Array Methods

• map(): Creates a new array by applying a function to each original array element. Use map() to update existing elements.

• filter(): Creates a new array containing only elements that pass a test implemented by a provided function. Use filter() to delete elements.

• reduce(): Applies a function to an accumulator and each array element to reduce it to a single value.

• sort(): Sorts the elements of an array in place.

Advanced Array Methods

• flatMap(): Flattens an array and applies a mapping function to each element.

• reduceRight(): Similar to reduce(), but starts from the end of the array.

• find(): Returns the first element in an array that satisfies a test implemented by a provided function.

Relating Array Methods to React

Array methods are indispensable for working with data in React components. They can transform, filter, and aggregate data to render dynamic UI elements.

Example using map() to update elements:

const items = ['apple', 'banana', 'orange'];
const updatedItems = items.map(item => item === 'apple' ? 'grapefruit' : item);

In this example, the map() method creates a new array where the element 'apple' is replaced with 'grapefruit'.

Example using filter() to delete elements:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

In this example, the filter() method creates a new array containing only the even numbers from the original array.

Example using reduce() to aggregate data:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

In this example, the reduce() method calculates the sum of all elements in the numbers array.

Example using flatMap() to flatten an array:

const nestedArrays = [[1, 2], [3, 4]];
const flattenedArray = nestedArrays.flatMap(array => array);

In this example, the flatMap() method flattens the nested arrays into a single array.

Chaining Array Methods

You can chain multiple array methods together to perform complex transformations on data concisely and efficiently.

Example:

const users = [
    { name: 'Akande', age: 30 },
    { name: 'Toheeb', age: 25 },
    { name: 'Olalekan', age: 35 }
];

const adultUsers = users
.filter(user => user.age >= 18)
.map(user => ({ name: user.name, age: user.age }));

In this example, we first filtered the users based on their age and then mapped over the filtered array to create a new array with only the name and age properties.

By mastering array methods, you can write more efficient and expressive React components that effectively handle and manipulate data.

How to Fetch Data

Data is the lifeblood of web applications, and React is no exception. Fetching data from external sources, such as APIs, is a fundamental task in React development. This data is used to populate components, update the UI, and provide a dynamic user experience.

Promises and Fetch

Promises represent the eventual completion (or failure) of an asynchronous operation. The fetch() API is a built-in JavaScript function that returns a Promise representing the fetching of a resource.

Example using fetch():

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
    // Handle the data here
    console.log(data);
    })
    .catch(error => {
    // Handle errors here
    console.error(error);
    };

Async/Await

The async/await syntax provides a cleaner way to work with Promises. It allows you to write asynchronous code in a more synchronous-looking style.

Example using async/await:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
    console.error(error);
    }
}

fetchData();

Fetching Data in React Components

In React components, you typically fetch data within lifecycle methods like componentDidMount or useEffect. This ensures that data is fetched after the component is mounted and any initial state is set.

Example:

import React, { useEffect, useState } from 'react';

function MyComponent() {
const [data, setData] = useState(null);

useEffect(() => {
    const fetchData = async () => {
        try {
            const response = await fetch('https://api.example.com/data');
            const data = await response.json();
            setData(data);
            } catch (error) {
            console.error(error);
            }
        };

    fetchData();
}, []);

    return (
        <div>
        {data ? (
        <p>Data: {JSON.stringify(data)}</p>
        ) : (
        <p>Loading...</p>
        )}
        </div>
    );
}

In this example, the useEffect hook is used to fetch data when the component mounts. The useState hook is used to manage the loading state and display the fetched data.

Error Handling

It's essential to handle errors that may occur during data fetching. You can use try/catch blocks to catch exceptions and provide appropriate feedback to the user.

By understanding Promises, Fetch API, async/await, and Error handling, you can effectively fetch and manage data in your React applications.

You Can Start React Now

This article explores the essential JavaScript concepts that form the foundation for successful React development.

By mastering template literals, destructuring, ternaries, arrow functions, short-circuiting, array methods, fetch API, and asynchronous/await, you'll be well-equipped to tackle the challenges and opportunities that React presents.

Further Learning

To deepen your understanding of React, consider checking out the following:

• Official React Documentation

• Create React App: A popular tool for setting up React projects quickly

• Online Courses: Platforms like freeCodeCamp, Udemy, and Coursera offer comprehensive React courses.

• React Community: Engage with the React community on forums, social media, and meetups to learn from others and stay updated on the latest trends.

Call to Action

Now that you have a strong JavaScript foundation, it's time to dive into React and build amazing web applications. Don't be afraid to experiment, make mistakes, and learn from your experiences. The React community is welcoming and supportive, so don't hesitate to ask for help when needed.

Remember: The journey of mastering React is ongoing. Stay curious, keep learning, and enjoy the process of creating innovative web experiences.

Don't forget to share and recommend this article for anyone who might need it.

Thanks for reading. Let's connect on X or LinkedIn.

When starting a project, every front-end developer faces the dilemma of whether to design the interface first or implement the logical part of the application first. The design entails the visual elements displayed on the web application, while the logic refers to the underlying functionalities within the application that dictate its behavior and interaction with users.

In this article, we'll examine both approaches (including their merits and demerits), their best use cases, and how combining them can help achieve set project goals.

Design-first Approach

The design-first approach prioritizes the user interface and user experience aspects of the application. Here, the development process begins with crafting the visual parts such as the navigation, fonts, images, icons, text and background colors, buttons, cards, forms, pop-ups, and so on.

The user experience is also paramount in this approach considering the ease-of-use and accessibility of the application. The main concern of the developer using this approach is how the interface looks to the users. It involves an extensive design of how the elements are laid out and positioned, suitable color scheming and adherence to user interface design principles.

Advantages of the Design-first Approach

Adopting the approach of giving utmost attention to the appearance at the early stage of an application’s development can be beneficial in many aspects:

• Clear Visual Reference: Developers can use the initial design as a visual guide for the final product. This ensures there is less ambiguity about how a product looks for team members, especially designers and stakeholders.

• User-Centric Development: It is a fundamental principle in software development to prioritize users' needs. With a design-first approach, the end user’s experience is at the forefront while starting. Employing this method, it is easier for the developer to tailor the product to be more polished and user-friendly.

• Early Feedback: Feedback is necessary while developing software as it gives room for testing and iterative improvements in the design. Allows for adjustments to be done before investing time in complex logic implementation.

Disadvantages of the Design-first approach

There are potential challenges associated with the design-first approach such as:

• Potential Rework: In some scenarios, a significant rework might be needed if the design does not align with technical capabilities. With the logic coming after the design, developers would most likely adjust designs or overhaul an entire section.

• Delayed Functionality: With priorities assigned to design, the core functionalities meant to be integrated into the software may be delayed and lead to a visually pleasing but ‘empty’ application.

• Over-emphasis on Aesthetics: Imagine your dream car with its glamorous bodywork but without an engine to make it function and serve its purpose of being a means of transportation. The same goes for building software with the design-first approach. There is a risk of placing more importance on looks over functionality.

Best Use-Case Scenarios for the Design-first Approach

Having understood what the design-first approach entails, there are scenarios or projects to which this approach is best suited:

• Building Consumer-facing Products: Customer-facing products are software for the general public rather than business. More emphasis is placed on design and ease of use because they are intended for a broad audience. Factors such as aesthetics, user experience and engagement are pivotal in building these types of applications. Failure to deliver a visually appealing and intuitive interface can make or break the product’s success. Examples of customer-facing products are social media platforms, e-commerce apps, data visualization projects, and so on.

• Building Brand-Oriented Projects: A company’s brand identity encapsulates its values, mission, message and visual elements. As a developer building an application for a company, the brand identity should be intertwined with the aesthetics or user experience. The design-first approach is necessary in such cases as it ensures that every aspect of the product is a true reflection of the brand, aligning perfectly with its identity.

• Building content-heavy websites and landing pages: Websites such as news sites or blogs focus on content layout and content readability which makes design-first perfect for such projects. Landing pages and portfolio sites should also employ this approach as visual impact is paramount.

• Prototyping: In the early stages of product development, a design-first approach can be employed to develop a prototype or Minimum Viable Product (MVP). Prototypes and MVPs are used to test key concepts, impress investors/stakeholders and garner useful user feedback.

Logic-first Approach

The logic-first approach focuses on the core functionalities, data structure, data flow and architecture before the design aspects. In this method, developers are concerned about the intricacies that involves organizing, updating, retrieving and storing data as regards front-end. Underlying functionalities are extensively worked on before attaching to user interface elements for user interaction, which gives desired results.

Advantages of the Logic-first Approach

Starting an application’s development by focusing on the logical aspects can yield good results such as:

• Strong Architectural Foundation: By establishing the core logic early, a strong base for the application is formed. This approach aids complex business logic handling and data processing ensuring the application’s base is solid, scalable and maintainable.

• Performance Optimization: The logic-first approach focuses on the systematic fine-tuning of processes such as handling the amount of HTTP requests, API calls, error handling, memory leak prevention, amount of rendering, caching, and so on. With design elements not in the way of the logically-inclined developer, there are no constraints during development.

• Early Problem Detection: By addressing logic first, the identification of technical challenges that may arise later during the application development process is detected earlier. This gives room for necessary adjustments to be done and reduces the risk of a significant rework later.

Disadvantages of the Logic-first Approach

While the approach has its merits, it also comes with certain drawbacks that developers should consider. Below, we explore some of the key disadvantages associated with this method.

• Design Compromise: With logic-first, the design may become a ‘second thought’, leading to an application that is functional but devoid of aesthetic appeal. This might put off users at first interaction because the allure of good user interfaces matters a lot.

• User Experience Neglect: The sole aim of user experience is to satisfy users. An application’s UI might look appealing but fail to create a seamless, efficient and enjoyable impression on the user. Adopting a logic-first approach relegates the user experience to the background and hampers the enjoyability of the app.

Best Use-Case Scenarios for the Logic-first Approach

Projects that suit this approach emphasize performance, data processing and complex logic. This approach works well with:

• Enterprise Applications: These are large software built for the corporate world which makes data integrity, security and performance crucial in its development. Starting with logic ensures the application can meet these requirements before designing.

• API-Centric Platforms: With the rise of Application Programming Interface (API) in the technology landscape, it is common to see applications heavily relying on APIs. By extensively consolidating the data flow and logic involved, developers can ensure smooth interactions between the front-end and back-end in the application development process.

• Performance-Critical Applications: The logic-first approach favors building applications where efficiency and speed are critical. Examples of such applications are real-time data processing tools and financial platforms.

Hybrid Approach

This approach combines the design-first and logic-first approaches used in front-end development. The hybrid approach aims to leverage the strengths of both approaches while lessening their weaknesses.

Key Components of the Hybrid Approach

Certain practices embody the hybrid approach which can be applied in various software development scenarios:

• Parallel Development: It involves the design and logic teams collaborating concurrently instead of following a sequential process. This offers benefits such as improved efficiency, continuous feedback and swift problem-solving.

• Low-Fidelity Prototyping: Involves creating basic, simplified versions of a product that emphasize key design concepts and core functionalities without showing the detailed final product. It helps in early validation, iterative improvement and risk mitigation.

• Component-Based Development: Involves building reusable components that typically consist of both design and logic. The advantages of using components in developing applications are re-usability, consistency and easy maintenance.

• Agile Methodologies: Using iterative development cycles to alternate between design and logic-focused approaches. It allows for flexibility, room for continuous improvements and balanced focus.

Advantages of the Hybrid Approach

Sharing the focus between the two approaches comes with benefits such as:

• Concurrent Progress: Working on design and logic together ensures that neither aspect is neglected during the development process. This leads to a product that is both visually appealing and functional.

• Improved Communication: Combining both approaches leads to better collaborations between designers and developers. This ensures designs are feasible and logical aspects seemingly easier to incorporate.

• Flexibility: Rather than waiting for an aspect to be done and reworked later, the hybrid method allows both to develop together and adjustments made in real time.

Conclusion

The choice between design-first and logic-first approaches depends on individual preference, team capacity, project type, target market or technical requirements.

Developers with a good understanding of each approach’s strengths and weaknesses can make informed decisions that align with their project goals and objectives.

The hybrid approach can be employed to balance out the inadequacies of both of the one-sided approaches. The hybrid approach offers the best of both worlds in the process of crafting both a visually appealing and functionally sound product.

Ultimately, it's up to each individual or team to select the approach that will lead to the best possible product outcome.

If you enjoyed reading this article, you could Buy Me a Coffee.

You can also connect with me on LinkedIn for more insightful posts and articles.

See you in the next one!

And from what I've learned, I believe that the framework is accessible to almost anyone, even those with few technical skills.

In this tutorial, you will learn how to build your first Flutter app, from developing the concept to publishing on the App Store.

I'll teach you how to properly set up your development environment and code with the main Flutter code language – Dart. Some key concepts like state management, UI construction, and widgets will prepare you to create and launch a polished app. I'll even guide you through publishing your app to the App Store

So find a comfortable seat and get ready, as we're about to dive in.

Prerequisites

First of all, you have to decide on an environment. I advise you to choose either Visual Studio Code or Android Studio. The first one is lightweight and is a nice option that works well across different kinds of operating systems. Android Studio is just as powerful, if you plan on building Android apps.

If you're a beginner, take a look at VS Code with the Flutter extension, as it offers a user-friendly experience and it's a really good starting point. Just make sure your PC meets the minimum system requirements for Flutter development, as mentioned in the official Flutter documentation.

Table of Contents

• Mobile App Development with Flutter
• 11 Simple Steps to Create Your First Flutter App
• Step 1: Start with an Idea or Vision for Your Future App
• Step 2: Install the Flutter SDK on Your Computer
• Step 3: Install Libraries and Plugins to Make Coding Easier
• Step 4: Time to Code!
• Step 5: Organize your Project
• Step 6: Code the UI Elements and Interactions (Widgets)
• Step 7: Do Splash Screenwriting
• Step 8: Demonstrating Changes
• Step 9: Test Your App
• Step 10: Code Styles
• Step 11: Publish Your App
• Conclusion

Mobile App Development with Flutter

Let's kick off with some useful information about our framework. Basically, Flutter is an open-source kit developed by Google that allows you to build mobile apps, as well as network and integrated apps.

The key thing to remember about Flutter is that once you write code, you can upload your app to Android, iOS, and the web. Then, you can install it on multiple systems, including a PC. This really saves you a lot of time and effort compared to building separate apps for each platform.

Before we get started, let's learn why Flutter is extremely useful for mobile development.

Advantages of Flutter

As I already mentioned, Flutter works with multiple systems and platforms at once, covering Android and iOS as well as Windows, Linux, and MacOS. Imagine – it's a single code base that rules them all!

Another advantage is that Flutter has a low entry barrier because of its simple syntax. For example, if you want to display some text, you easily create a widget called "Text", assign a style and color, add some text – and there you have it. It sounds simple – and it is.

Limitations of Flutter

Before you decide to use Flutter, you should understand the whole picture. There are native technologies like Kotlin and Swift that have their unique advantages.

The first is that they provide the lowest possible delay and the smoothest possible user experience. They're perfect for applications that require low response times, like financial trading apps.

The second benefit is excellent performance and optimization. You have no redundancy in these specific situations. But only in these situations. So if your application requires extensive use of the device's hardware, such as real-time 3D graphics or sensor integration, you should consider going native.

Back-end Development with Flutter

But, if you've decided to go the Flutter way, there's an important thing to consider: Flutter is a front-end framework, and it requires a back-end framework for complex applications. In short, if your app has state that needs to be stored, you need additional back-end technology.

I prefer Node.js because it can be launched anywhere, but you may use any other viable service. For a startup, a good example is free Firebase Cloud Functions. And as I've already mentioned, Dart is the main code language of Flutter, so you can also write a back-end with its help.

But choosing a decent back-end for your Flutter app is a whole other topic. I recommend you read the article “Decoding the Art of Choosing the Perfect Flutter Backend: A Guide for Developers”.

Otherwise, feel free to join me in this tutorial – let's begin!

11 Simple Steps to Create Your First Flutter App

Step 1: Start with an Idea or Vision for Your Future App

Many tools can help you at this stage, but the one you choose will depend on your design skills.

You can find visual inspiration on Dribbble, Pinterest, and many other websites. But when it comes to creating a design, there are three ways to go:

If you have no design skills, consider using Canva for app design and MockFlow for wireframes.

If you have some skills, then jump into Figma and you'll enjoy its many functionalities. Create your wireframes, and only after careful consideration develop the full-blown design.

Note that you can also use plugins like Figma2Flutter and FigmaToFlutter to turn your design into working Flutter code. So, the first step can easily be the last in creating your first Flutter app.

But I encourage you to read on and get an idea of the whole process. The code auto-created by one of the plugins may have bugs, and you'll need to be able to fix them.

Figma2Flutter is a great source of plugins

And finally, if you're stuck, find a designer. It can be a professional freelancer, a design agency, or just a friend with design skills. Either way, you'll still have the option of transforming your design using the Figma2Flutter or FigmaToFlutter plugins.

Step 2: Install the Flutter SDK on Your Computer

This step is very easy. Follow the link to the Flutter download page. Choose your operating system and platform. Don't forget to check the software requirements.

Here, you might need to get some better hardware or install some extra packages, but I think you can do it using the tutorial on the Flutter website.

The Flutter tutorial provides different options for a text editor or an integrated development environment (IDE). So, install the one you prefer, such as Android Studio, and install the Flutter SDK. When you're done with the tutorial, come back here, and we'll continue.

Step 3: Install Libraries and Plugins to Make Coding Easier

Flutter libraries are like toolkits that come with pre-built parts to help you create code faster and easier. They come packed with all sorts of useful things like buttons, forms, animations and more. You can use them for everything from designing user interfaces to managing data and handling interactions.

Now, let's talk about plugins in Flutter. They are like special tools that help your application do more.

These plugins connect your Flutter code to the native features of your device, such as the camera or GPS. You can also easily add extra functionality to your app without having to write all the code on your own. Just write some initial code, hit enter and you'll get several lines of code from the example.

Settings -> Plugins

You can also find practical ideas for your app on Flutter Awesome and pub.dev with official libraries and community support. These sites host third-party developers who build their libraries on GitHub and share them here. They’ve been tested on real projects and include a wide range of features such as connecting to servers, using Bluetooth, and adding visual effects.

Also, libraries are rated according to their popularity and quality. A high rating increases the chances that the library you choose will have as few bugs as possible.

If you run into trouble, don't worry! You can turn to Flutter Awesome and pub.dev for help. Since Flutter is open source, you'll be able to find the latest updates and get help from other Flutter developers. And if there's a new problem, it's likely to be fixed in the next Flutter update. Easy peasy!

Step 4: Time to Code!

Flutter is built and translated into machine code using the Dart programming language. Host devices understand this code, ensuring fast and effective performance. It’s an open, object-oriented programming language developed by Google.

Here are some of the key features of Dart:

• Object-oriented with classes, inheritance, and mixins
• Statically typed for early error detection
• Supports both just-in-time (JIT) and ahead-of-time (AOT) compilation
• Automatic memory management with garbage collection
• Built-in asynchronous programming resource
• Consistent and simple syntax

Dart is a programming language that allows you to describe any logic in a mobile application in an easy-to-understand way. Its features, such as the reactive programming version and asynchronous features, make it suitable for building high-performance, responsive apps that can run on iOS and Android.

Though not as widely adopted as some other languages, Dart's tight integration with Flutter has made it increasingly popular for mobile app improvement.

Now, let’s get back to the code! Just create your project on a standard blank page with the ability to launch and test your app.

Here’s our simple Flutter app, which displays a "Hello, Flutter!" message. It demonstrates the basic form of a Flutter app, along with the main access aspect, defining a static widget, and building a MaterialApp with a Scaffold, AppBar, and a targeted Text widget:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First Flutter App'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

I strongly advise you to break your code into logical parts:

• UI
• server communication
• business logic
• images
• translation and more

The plan allows you to organize your code and structure it easily.

The next step is no less important than the coding itself. Choosing the right state management is like the basics of Flutter app development. There, you’ll get to know different insights like factors, Model-View-ViewModel architecture, and the difference between two popular Flutter management patterns.

So, what are we waiting for, let’s get right to it.

Step 5: Organize your Project

Choose the right state management solution

State management controls the state of user interface elements such as text fields, buttons, and checkboxes in a graphical user interface (UI). It ensures that the state of other UI controls affect the state of a particular UI control. This technique is critical to ensure a smooth user experience in your app

To choose the right state management, consider factors such as the complexity of your project, your familiarity with different state management solutions, and the specific needs of your project. Google recommends starting with something basic like Vanilla, which is simple and easy to use.

Now let's look at the Model-View-ViewModel (MVVM) architecture, which is an important part of state management. And you have to choose between Provider and BloC. The whole difference between these two popular Flutter state management patterns is the following:

• For smaller projects and short deadlines, you can use Provider MVVM. But beware: the tradeoff is slightly slower performance and lower scalability.
• For mid-size and large projects, Google suggests using BLoC. Such an approach allows you to manage the flexibility and the scale of your code.

If you haven’t decided what to use for your project yet, here are some pages with descriptions and examples from the official library documentation:

1. https://pub.dev/packages/flutter_bloc
2. https://pub.dev/packages/provider
3. https://docs.flutter.dev/data-and-backend/state-mgmt

So, choose a state management option that fits your app.

Separate folders for screens

You should keep your code clean. To do this, it's a good idea to create separate folders for each screen, where the code files are stored.

For example, you'd have one folder for the splash screen and another for the login screen. Also, keep the user interface code separate from the business logic code, in separate files.

Your prepared Directory Structure should look something like this:

My folder organization

Highly decomposed system

When you start working with a screen, you should carefully break it down into small parts. For example, on the main screen, there is a list of goods. This element should be in a separate file and even a single element of a list should be in a different file.

The more your system is decomposed, the easier it will be for you in the future to change a piece of code, as well as support and scale your product.

Here are some tips on how can you break down a system into smaller components effectively:

• Start by defining the goals, features, potential users, and limitations of your system to set clear boundaries.
• Divide the system into smaller, independent pieces for easier management.
• Assign specific functionality and interfaces to each component and how they interact.
• To achieve the system goals, test all components and their interactions.
• To optimize performance, refine components based on feedback.

Colors and styles

When you have the screens' structure, you can code the basic transition between them and the styles of an app. Flutter makes it easy to manage all your styles in one place, like button colors, fonts, and icons, so you can customize them easily. You code them in one chosen style—a bright or dark style scheme.

The next step is to code simple transitions and patterns that will make your app fit your style choices. As you'll see in the code example below, Flutter makes it very easy to control styles. This allows you to test and customize the look and feel of your app as much as you want.

My file for managing themes

And here’s some useful code as an example, so you can experiment and try your own ideas to your heart's content.

@override
Widget build(BuildContext context) {
 return TextField(
   controller: controller,
   focusNode: focusNode,
   style: AppStyles.getCitySearchTextStyle(),
   decoration: InputDecoration(
     hintText: context.tr().searchHint,
     hintStyle: AppStyles.getSearchHintStyle(),
     contentPadding: AppPaddings.horizontalPaddingM,
     isDense: true,
     border: InputBorder.none,
     focusedBorder: InputBorder.none,
     enabledBorder: InputBorder.none,
     errorBorder: InputBorder.none,
     disabledBorder: InputBorder.none,
   ),
 );
}

Setting up the router

There is a robust navigation tool for managing transitions between specific monitors within the application. There are two main navigation techniques you can use in Flutter:

• Navigator: this is a navigation widget that is built into Flutter. It allows you to slide and lift the screen from the stack, providing a simple forward and backward navigation experience. You can use named and anonymous routes to understand the application's video display units.
• Routing Library: you can use a library like go_router or auto_router if you need more complex navigation. This package provides features such as deep link analysis and fine-grained control of navigation stacks.

Here’s also the Flutter navigation documentation, in case you need something.

Now you should set up the router as shown in the example on the screen and let me know if everything worked well for you:

Simple navigation between screens

Using the Navigator.Push approach and MaterialPageRoute, this example shows a way to navigate between screens (or routes) in a Flutter app.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen())

My file for managing the router

So, now you can start setting up languages for your app because it’s as important as having the right UI elements in the project.

Languages

You'll want to localize your app, so that users can select different languages or have it automatically localized.

Google provides recommendations on the approach that best suits your needs and technical requirements which you can read more about here.

Start by creating a file of translations for one language. If needed, you can add more languages later.

My localization into Ukrainian

return Center(
 child: Text(Localization.from(context).continueText),
)

Once you finish this part, you will have the basic elements of an app – styles, localization, screen structures, and transitions. And then, you can start programming each screen.

Step 6: Code the UI Elements and Interactions (Widgets)

At this stage, you'll code the basic elements of a screen's UI and the logic that will control the UI. For example, you might develop a logic for browsing a list of products from a remote server by selecting an item from a goods list. Then you write code that converts a particular data model into an item.

Flutter uses ready-made widgets. In fact, Flutter is all about widgets. One of the innovative things about them is that they're reusable UI components that you can integrate directly into the app instead of building them from scratch. Compare this to different strategies that use exclusive objects (layouts, perspectives, controllers), where Flutter has a single, unique object model.

Every object in Flutter is a widget – from buttons to pads to text, and existing building blocks to the lowest levels of customization. You'll be using the same tools that the Flutter team uses to build theirs.

Widgets in Flutter are available for rendering but they can also cause a problem with the overall structure. You'll need to plan the form because large apps can require up to ten layers of code to create a primary element. For an excellent article with lots of ready-made widgets, check out this guide.

Otherwise, here's a short but useful list of must-have code elements for your basic app:

Element 1: Create lists

This part of the code demonstrates a way to create a list of items using ListView.Builder. It takes a list of items and generates ListTile widgets for each item, allowing you to address faucet events on the gadgets:

  final List<String> items =
      List<String>.generate(10, (int index) => "Item with number $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(items[index]),
            onTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text('Item $index tapped!')));
            },
          );
        },
      ),
    );
  }

Here is how your list should look after coding:

View of the list

Element 2: API request

This code shows how to get data from an API using the HTTP bundle. It makes a GET request to the desired URL and handles the response, processing any fetched records or managing errors:

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    // Process fetched data here
    print(data);
  } else {
    // Handle error
    print('Failed to fetch data: ${response.statusCode}');
  }
}

Element 3: Styling text

Here, you can see a demonstration of how to display two texts in column and style textual content in Flutter the usage of the TextStyle magnificence, which allows you to customize styles like coloring, font size, font weight and font style:

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello!',
              style: TextStyle(
                color: Colors.red,
                fontSize: 36,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
              ),
            ),
            Text(
              'Flutter',
              style: TextStyle(
                color: Colors.blue,
                fontSize: 18,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
              ),
            ),
          ],
        ),
      ),
    );
  }

The result looks great, doesn't it?

View of the styled text

Element 4: Custom-styled buttons

This one shows a way to create a custom-styled button using the MaterialButton widget. It allows you to personalize properties such as height, top, shape, color and a widget (in this situation, a text widget with custom styling):

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MaterialButton(
          elevation: 0,
          height: 50,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          color: Colors.blue,
          onPressed: () {
            ScaffoldMessenger.of(context)
                .showSnackBar(const SnackBar(content: Text("Button tapped!")));
          },
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Text(
              "Hello button",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }

Hello-button is ready!

View of the custom styled button

Element 5: Icons

This one suggests a way to display an icon (in this situation, a celebrity icon) in your Flutter app, allowing you to customize its color and length:

Icon(
  Icons.star,
  color: Colors.yellow,
  size: 24,
)

Element 6: Displaying images from the network

By specifying the photo URL, width, top and health, this code demonstrates how to display a photo from a network URL using the Image.Network widget:

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Element 7: Simple animated container

This code creates an active container that changes its size (width and top) when a true set (_isExpanded) is changed, with a smooth animation described using the required period and curve:

AnimatedContainer(
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
  color: Colors.blue,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
)

Element 8: Handling text input

This code demonstrates how to take care of textual content input using the TextField widget, providing a callback property to handle text changes and such decorations (like label) to the data entry process:

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          decoration: InputDecoration(
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red, width: 5.0),
            ),
            hintText: 'Enter your name',
          ),
        ),
      ),
    );
  }

View of the text handling

Step 7: Do Splash Screenwriting

Each application starts with a splash screen that displays a logo or a loading indicator while the app is getting ready. After that, the app loads the necessary data and the splash screen appears.

So, let's create our first screen and things will get a lot easier from there. You already have a lot of widgets in your arsenal, but you can copy and paste some of the code below. You can see more of my code on the screen, but I'll leave the rest for you to improve.

Below, you can see my images for writing a splash screen:

My splash screen code

IntrinsicWidth(
 child: Column(
   mainAxisSize: MainAxisSize.min,
   children: [
     const FlutterLogo(
       size: 250,
     ),
     const Gap(AppSizes.sizeM),
     Container(
       padding: AppPaddings.allPaddingXS,
       decoration: const BoxDecoration(
         color: AppColors.alabaster,
         borderRadius: AppBordersRadius.borderRadiusAll100,
       ),
       child: const LinearProgressIndicator(
         backgroundColor: AppColors.alabaster,
         borderRadius: AppBordersRadius.borderRadiusAll100,
         minHeight: AppSizes.sizeSSM,
       ),
     )
   ],
 ),
)

This is how the screen looks from the previous code

Step 8: Demonstrating Changes

Once you finish a section of your code, press a button in Android Studio to quickly see the changes on your screen.

This is one of Flutter's key features. You don't have to restart your project or rebuild the entire application every time you make a change. With Flutter, you can use hot reload or hot restart. Press a button and your changes will appear on your phone or website in a second.

Here’s how your changes may look on your screen:

Demonstrating changes

At the moment, your app is almost ready, but here are a few important steps left. One of them is testing. That’s the only way you can check that everything is working fine. And if it doesn’t – you can easily see the mistake and fix it.

Step 9: Test Your App

To make sure your app works and everything is built correctly, you need to test it. For example, you might have programmed one feature and accidentally broken the other. Also, if you have any platform-dependent elements, such as Bluetooth or NFC, you’ll need to check how they work in your application.

But testing can have positive and negative test cases. Positive cases should always be tested. For example, an app should work with a correct login and password. Negative cases are when a QA engineer tries to "break" a product by entering the wrong types of data (instead of email, we enter "11111111"). Negative cases are needed to minimize user errors and to write understandable check prompts ("Please, enter your email here").

As you can see, this underscores the importance of thorough testing. By simulating user errors, we can ensure our apps are working fine and deliver a smooth UX.

In the example below with a login, you can see the proper testing functionality:

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
           TextField(
            controller: textEditingController,
            decoration: const InputDecoration(
             focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red, width: 5.0),
                borderSide: BorderSide(color: Colors.red, width: 5.0),
            ),
            hintText: 'Enter your name',
          ),
        ),
        const SizedBox(
         height: 16,
        ),
        MaterialButton(
         elevation: 0,
         height:50,
         shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
         ),
         color: Colors.blue,
         onPressed:(){
          if (textEditingController.text.trim().isEmpty){
           ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
             content: Text("You should enter your name"),
            ),
           );
          }else{
         ScaffoldMessenger.of(context).showSnackBar(
         SnackBar(
         content:Text(
         "Your name is ${textEditingController.text.trim()}",
        ),
       ),
      );
     }
    },
    child: const Padding(
     padding: EdgeInsets.all(16),
     child: Text(
      "Display my name",
      textAlign: TextAlign.center,
      style: TextStyle(
       color: Colors.white,
       fontSize: 12
       fontWeight: FontWeight.bold,
      ),
     ),
    ),
   ),
  ],
 ),
),
);
}

the testing view

Step 10: Code Styles

To maintain a consistent style, it's important to follow certain standards when coding. Google recommends a certain code style – a way of calling variables or methods and dimensions. Libraries and plugins (analyzers) for Android Studio mark up code and suggest changes as you write your code.

Here are a few of them I can recommend:

• Dio for network requests
• Flutter bloc + bloc + bloc concurrency to use BLoC state management
• Provider to use Provider state management
• Auto_route + Auto Route Generator for routing

There are a lot more you can find, from plugins to cache any network image to native splash generations. Code styles are required to ensure code quality and future code support for the largest projects.

You can read more in the Flutter docs here.

Step 11: Publish Your App

When you’re done coding and testing your app, you should test its performance on the platforms where you plan to have it – iOS, Android, and Web.

The first step is to publish a developer account creation on each system. After that, you'll need to pay a certain amount of money (once a year in Apple's case) and then download the apps. Then, Google and Apple employees review the apps for compliance with requirements, standards and laws. If all goes well, the application will be released.

After overcoming any challenges, remember that a successful launch is just the beginning. Take a look at the images below and make sure your app is ready to be discovered by users:

Google Play release dashboard

App Store release dashboard

To publish your Flutter app to the App Store, you have to complete a few steps.

First of all, register for the Apple Developer Program and upload certificates to sign your app. After that, create an App Store Connect account to manage your app. Now, using Xcode, upload your app for App Store distribution. When everything is done, your last step is to enter details such as screenshots, description, and pricing for your app.

Sounds pretty easy, doesn't it? If you are looking for more information, just visit the Apple developer page to learn more.

Almost the same goes for the Google Play Store. Sign up for a Google Play Developer account and link it to a Google Wallet Merchant Account for in-app purchases (if necessary). Then, just make sure that your app meets their technical requirements and guidelines. This includes things like app signing, privacy policy, and content rating.

During the third step, you have to fill in details about your app that users will see in the Play Store. Now, upload your app bundle or just an APK file and configure pricing and distribution settings. You may have to wait a little, as Google will take some time to review your app to ensure it fits their policies.

Once your app is approved, you can finally publish it to the Google Play Store and make it available for users! This was just an overview – so to learn more about the process, visit the official page and get as much information as you need.

Now, you're ready to take the world. Just make sure you carefully check all the settings before publishing your app. You can set a clear date and time for publishing your Flutter app, manage production releases, and more. To be honest with you, there are way more features than you can imagine, so I'll let you do it by yourself.

Conclusion

All right, now your app is ready. In this tutorial, I've given you the fundamentals of building a basic Flutter mobile app. Don't be afraid to take your unique idea and to run with it.

As I’ve already told you, the Flutter community is a treasure of information, so, feel free to jump in and explore it!

By the way, here's another golden piece of advice from me to keep in your developer toolbox: start simple, keep your code clean and organized, and test as you build. With these basics and a bit of effort, you'll quickly build a great Flutter app!

I would also like to thank my development partner in crime Mikhailo, who was helping me all the time creating this guide for you. Without his technical expertise, I wouldn't even know how to properly tell you about all these instructions, thanks again!

Do you have an idea for a Flutter project?

My company Covent IT is an early adopter of the Flutter framework and a well-established mobile app development company in general. In case you have a promising project in mind, feel free to request a consultation for a Flutter project.

To follow along with this tutorial, there are a few prerequisites:

1. An existing React and TypeScript project with Vite that you want to deploy.
2. Visual Studio Code (VSCode) editor or any other code editor such as Sublime.
3. Optionally, you can just use a command line/terminal instead of your code editor's built-in terminal.
4. An existing Netlify account that you've already logged into.

Let's go ahead with our deployment!

What to expect

You will deploy your project manually on Netlify, rename your site on the platform, and be able to have a live version of your project.

How to Deploy Your React and TypeScript Project

1. Open up your existing project on VSCode

Open up your project in the code editor of your choice.

2. Build the project

Open the terminal in VSCode and use the code below to build your project:

npm run build

This should generate a dist folder in your root directory where your projects' minified version is created and stored.

Figure 2.0 Running the project in the terminal which creates the dist folder in the project structure.

3. Drag and Drop your Dist Folder in Netlify

On Netlify under Team Overview, click on the Add New Site button. It should have three options:

1. Import an existing project
2. Start from a template
3. Deploy manually

Select the third choice to deploy manually.

Figure 3.0 Clicking on the Add new site button shows the three options to choose from. Select "Deploy Manually".

It should lead you to the page as seen in the below image:

Figure 3.1 Drag & drop view when choosing to deploy manually.

Click on the page and navigate into your project's file path.

Upload the dist folder that was previously generated in your project onto Netlify.

Figure 3.2 Navigating into the project's folder & uploading the dist folder onto Netlify.

It will take a few seconds or minutes to get your project deployed.

Once deployment is successful, you will see a page similar to the one below. By default, it gives a randomly generated subdomain name to your site's URL. For example, in my case, it is delightful-pie-bba293.

Figure 3.3 Deployment is successful.

Your site's name is the subdomain of Netlify's domain.

https://<your-site-name>.netlify.app

4. Rename your site

Click on the Site Configuration that is on the lefthand sidebar.

In the Site Information under Site Details, click on the Change Site Name button.

Figure 4.0 Viewing the Site Details under the Site Configuration.

This should give you a pop-up to change your site's name.

Change the name of your site to whatever you like:

Figure 4.1 Changing the name of your site.

Head back to the Site Overview where you can find the URL of your site. Your site's URL is found right underneath your project's name.

Figure 4.2 Site Overview where you can find your site's URL.

Click on the URL to view your site!

Figure 4.3 Viewing my site from the newly created URL.

Conclusion

Now, you have live versions of your projects and you're able to deploy them manually on Netlify.

There are additional steps to take in order to add a custom domain but we're not covering that in this tutorial.

This also makes it easier to reference your projects in the meantime on your résumés, portfolio site, or anywhere else.

Thanks for powering through this article and happy coding! 🩷

📝Additional Resources:

1. This article is a summarized version of this video. If you'd prefer to watch and follow along, then that is the video to watch.
2. There are many other platforms such as Cloudflare, Heroku, or Vercel to deploy your projects on. This video, for instance, shows you how to deploy your projects onto Vercel.

🔍Connect with me!

Follow me on X and LinkedIn if you like my work and want to stay updated for more.

Ania Kubów developed this course. She is one of our most popular instructors. She will show you how to transform your Figma designs into code using Locofy, and also how to prepare to deploy the complete application.

You will learn to easily create an Airbnb clone. This app isn't just a static display of properties; it's a dynamic platform where users can sign up, sign in, and interact with property data in real-time. This course will take you from a raw design in Figma to a live application, covering every step in between.

Course Contents

The course starts with an introduction to Figma, a leading tool in collaborative web design that allows for real-time UI and UX development. You will then dive into the actual design of the 'localhost' app (that's the name of the Airbnb clone), laying the groundwork for the transformative steps ahead.

The heart of the course is the introduction to Locofy Lightning and LocoAI, tools that convert Figma designs into high-quality, production-ready frontend code. This AI-driven process is not only efficient but also adaptable, providing code that's ready for further customization if needed. Locofy provided a grant to make this course possible.

This tutorial isn't just about converting designs into code; it's about making that code functional and interactive. You'll learn how to sync the generated code to GitHub, integrate a database, set up authentication, and finally, deploy the app using Netlify.

With technologies like React for the frontend, Node.js for the backend, MongoDB for database management, and Netlify for deployment, you are in for a comprehensive development experience.

Why This Course?

1. Hands-on Learning: From design to deployment, you'll get hands-on experience with every aspect of building a web application.
2. AI-Powered Efficiency: Discover how AI can streamline the development process, turning complex designs into usable code in an instant.
3. Expert Guidance: Ania Kubów, with her extensive experience and clear teaching style, will be your guide, ensuring you understand each step of the process.

Whether you're a seasoned developer looking to integrate AI into your workflow or a beginner eager to explore the intersection of design and coding, this course is designed to offer valuable insights and practical skills. Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).

I'll walk you through each step, from setting up a React and TypeScript project with Vite to using the react-data-table-component library to render a table.

To follow along with this tutorial, there are a few prerequisites:

1. A basic understanding of React and TypeScript
2. Basic knowledge of Bootstrap, which we'll use for styling
3. For Windows OS users, know how to use the PowerShell terminal (as you'll need an interactive terminal to create the project with Vite)
4. Node v20.11.1 installed
5. npm v10.2.4 installed
6. A code editor such as Visual Studio Code (VS Code) or Atom

Let's start creating the project!

What will we build

By the end of this tutorial, you will have built a table that displays a person's ID, name, height, and eye color.

The table will also have a search bar where users can search for a person based on the value of any of the four properties mentioned above.

Each row in the table will be selectable and each column will be sortable when the column header is clicked by a user.

1. Create a React and TypeScript Project

In the command line, create the project with the command below:

npm create vite@latest

Name the project react-data-table-tutorial .

Figure 1.0 Creating the React & TypeScript project with Vite on PowerShell command line. Naming the project react-data-table-tutorial.

Navigate to React with the up and down keys to select React. Choose React as the library you're going to use.

Figure 1.1 Selecting React as our framework by navigating to it on the list with up & down arrow keys on the keyboard.

Similar to the step above, navigate to TypeScript and choose it as the language to use.

The next step is to change directories into the project's folder. Once you've done that, open the project in your code editor as seen in Figure 1.2 below. I'll be using the VS Code editor in this tutorial.

Figure 1.2 Changing the folder into the react-data-table-tutorial directory and opening the contents of the folder into a code editor.

2. Remove the Default Code Set by React

This step is just to remove any default code and stylings in the files found in the src folder.

First, remove all default styling in the App.css file and replace it with the stylings below.

body {
    background-color: white;
    padding: 160px 500px;
}

Then remove the following from the App.tsx file:

• the imported statements of the useState hook, reactLogo, and the viteLogo.
• The destructured array and useState hook for the count variable and setCount function.
• The returned JSX wrapped within the fragment of the App component.

The App component should look like the code-block below after all of those changes:

import './App.css';

function App(){
    return <></>;
}

export default App;

3. Install the Libraries We'll Need

In the project, you will need to install a few libraries:

1. styled-components v3.23+
2. react-data-table-component v16.8.0+
3. Bootstrap v5.3.3

You will need to install the styled-components library to use with the react-data-table-component library.

In the command line, install all of these by using the commands below:

npm install styled-components

npm install react-data-table-components

npm install bootstrap@5.3.3

Figure 3.0 Installing the libraries on Visual Studio Code's built-in terminal.

The installed libraries are listed under dependencies in the package.json file.

{
   // rest of the code in the file
    "dependencies": {
        "boostrap": "^5.3.3",
        "react": "^18.2.0",
        "react-data-table-component": "^7.6.2",
        "react-dom": "^18.2.0",
        "styled-components": "^6.1.8",
    }
    // rest of the code in the file
}

4. Import Bootstrap in the App Component

In the App.tsx file, import the Bootstrap library at the top of the file.

This will allow us to use Bootstrap stylings throughout the project.

import "./App.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

function App(){
   return <></>;
}

export default App;

5. Create a Table Component

In the src folder, create a sub-directory and name it components. By convention, this is to hold all of the components of the project.

In the components folder, create a file called Table.tsx. This is for our Table component.

Create a function component called Table.

Figure 5.0 Create the Table component in the components sub-directory within the src folder.

6. Import the react-data-table-component Library to Start Using it

Import the react-data-table-component library into the Table component.

import DataTable from "react-data-table-component";

function Table(){
    return <></>;
}

export default Table;

7. Create the Table in the Table Component

Create a <div> container within the fragment and add Bootstrap styling of container and my-5 to place the table in the center of the page.

Add the DataTable component as the child of the <div> container.

import DataTable from 'react-data-table-component';

function Table(){
    return (
        <>
            <div className="container my-5">
                <DataTable />
            </div>
        </>
    );
}

Pass the columns and rows of the table as props to the DataTable component.

The column headers of the table are objects that will be stored in an array. The rows of the table will also be stored in a similar way. The array of objects for both will have these structures:

const columns = [
    {
        name: "ID",
        selector: row => row.id
    },
    {
        name: "Full Name",
        selector: row => row.fullName
    },
    {
        name: "Height",
        selector: row => row.height
    },
    {
        name: "Weight",
        selector: row => row.weight
    },
];

const rows = [
    {
        id: 1,
        fullName: "John Doe",
        height: "1.75m",
        weight: "89kg",
    },
    {
        id: 2,
        fullName: "Jane Doe",
        height: "1.64m",
        weight: "55kg",
    },
    {
        id: 3,
        fullName: "Sheera Maine",
        height: "1.69m",
        weight: "74kg",
    },
];

These constants are then passed into the DataTable component as such:

<DataTable columns={columns} data={rows} />

Create a columns constant that is an array of objects that has four columns headers for personID, fullName, height, and eyeColor.

Create a rows constant that is an array of objects that has 15 objects which is equivalent to data for 15 people.

Pass the two constants into their respective props in the DataTable component as seen in the next code-block.

function Table(){
    const columns = [
        {
            name: "ID",
            selector: (row) => row.personID,
        },
        {
            name: "Full Name",
            selector: (row) => row.fullName,
        },
        {
            name: "Height",
            selector: (row) => row.height,
        },
        {
            name: "eyeColor",
            selector: (row) => row.eyeColor,
        },
    ];

    const rows = [
        {
           personID: 1,
           fullName: "Kate Shein",
           height: "1.79m",
           eyeColor: "blue",
        },
        //....remaining objects for the 2nd to 14th person
        {
           personID: 15,
           fullName: "Isabella Thompson",
           height: "1.79m",
           eyeColor: "blue",
        },
    ];
}

You will also add the fixedHeader prop to the DataTable component to keep the column header fixed when a user scrolls down the table that has more than 10 records.

Give the table a title by passing the title prop to the component and its value is whatever you would like to call your table.

<div class="container">
    <DataTable 
        columns={columns} 
        data={rows} 
        fixedHeader
        title="React-Data-Table-Component Tutorial."
     />
</div>

Back in the App component, import the Table component and place it within the fragment.

import "./App.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import Table from "./components/Table";

function App(){
    return (
        <>
           <Table />
        </>
    );
}

export default App;

8. Add Pagination and Sorting, and Make Each Row Selectable

Pagination and selectableRows

Add the pagination and selectableRows props to the DataTable component.

By default, the first page has the first 10 records. If there needs to be API calls from the server side for custom pagination, then you can use the paginationServer property along with the paginationTotalRows, onChangeRowsPerPage and onChangePage properties which work in conjunction with a few other things.

But for now, let's stick with the pagination property.

//...rest of the code in the function component
<div className="container d-flex justify-content-center my-5">
   <DataTable
        columns={columns}
        data={rows}
        fixedHeader
        title="React-Data-Table-Component Tutorial"
        pagination
        selectableRows
    />
</div>
//...rest of the code in the function component

Sorting

In the DataTable component, add the sortable property to each object in the columns constant. Give it a boolean value of true so that sorting is applied to each column when a user clicks on the column headers.

//...rest of the code in the function component
const columns = [
    {
        name: 'ID',
        selector: (row) => row.personID,
        sortable: true,
    },
    {
        name: 'Full Name',
        selector: (row) => row.fullName,
        sortable: true,
    },
    {
        name: 'Height',
        selector: (row) => row.height,
        sortable: true,
    },
    {
        name: 'Eye Color',
        selector: (row) => row.eyeColor,
        sortable: true,
    },
];
//...rest of the code in the function component

9. Add Searching and Filtering

Add a <div> container above the DataTable component in the returned JSX. Also add the bootstrap input-group class to the <div>.

The child element of this new container will be the <input /> of type search and we'll use Bootstraps' stylings for it. Use the code below:

<input
    type="search"
    className="form-control-sm border ps-3"
    placeholder="Search"
/>

An optional step is to add a search icon or use Bootstraps' default styling for a search bar. However, we'll leave it out for now so we can focus solely on the searching functionality.

Now, let's import the useState hook into the Table.tsx file.

Use the hook and pass in the rows constant as the default value of our state variable. Within the destructured array will be our state variable called data and the setter function called setData.

const [data, setData] = useState(rows);

Create a function called handleSearch that will be called when the onChange event listener is used on the search bar.

Pass in the event object, e, as its argument. Using type annotation, set the type of the event object to React.ChangeEvent<HTMLInputElement>.

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
   // the rest of the code will be defined in here
};

Declare 5 variables of Boolean type as seen below:

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
   let searchValue: Boolean;
   let personIDValue: Boolean;
   let fullNameValue: Boolean;
   let heightValue: Boolean;
   let eyeColorValue: Boolean;
};

Declare a new local constant called newRows. In this constant, filter out and return the rows/data in the rows constant where the search input's value is the same as the value of the rows' fullName or height or eyeColor property.

const newRows = rows.filter((row) => {
      personIDValue = row.personID
        .toString()
        .toLowerCase()
        .includes(e.target.value.toLowerCase());
      fullNameValue = row.fullName
        .toLowerCase()
        .includes(e.target.value.toLowerCase());
      heightValue = row.height
        .toLowerCase()
        .includes(e.target.value.toLowerCase());
      eyeColorValue = row.eyeColor
        .toLowerCase()
        .includes(e.target.value.toLowerCase());

      if (personIDValue) {
        searchValue = personIDValue;
      } else if (fullNameValue) {
        searchValue = fullNameValue;
      } else if (heightValue) {
        searchValue = heightValue;
      } else {
        searchValue = eyeColorValue;
      }

      return searchValue;
});

Pass newRows into the setter function, setData.

setData(newRows);

// definition of the columns constant

// definition of the rows constant

const [data, setData] = useState(rows);

// Handle Search
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    let searchValue: Boolean;
    let personIDValue: Boolean;
    let fullNameValue: Boolean;
    let heightValue: Boolean;
    let eyeColorValue: Boolean;

    const newRows = rows.filter((row) => {
      personIDValue = row.personID
        .toString()
        .toLowerCase()
        .includes(e.target.value.toLowerCase());
      fullNameValue = row.fullName
        .toLowerCase()
        .includes(e.target.value.toLowerCase());
      heightValue = row.height
        .toLowerCase()
        .includes(e.target.value.toLowerCase());
      eyeColorValue = row.eyeColor
        .toLowerCase()
        .includes(e.target.value.toLowerCase());

      if (personIDValue) {
        searchValue = personIDValue;
      } else if (fullNameValue) {
        searchValue = fullNameValue;
      } else if (heightValue) {
        searchValue = heightValue;
      } else {
        searchValue = eyeColorValue;
      }

      return searchValue;
    });

    setData(newRows);
};

Next step is to pass (not call the function) the handleSearch function into the onChange event listener.

<input
   type="search"
   className="form-control-sm border ps-3"
   placeholder="Search"
   onChange={handleSearch}
/>

The value of the data property in the DataTable component will now be the state variable, data instead of rows that was initially passed in.

<DataTable
    columns={columns}
    data={data}
    fixedHeader
    title="React-Data-Table-Component Tutorial."
    pagination
    selectableRows
/>

10. View the Table

Run the project in the command line and view the table in a browser:

command line npm run dev

The table should look something like this:

Figure 11.0 Preview of the resulting table created.

You can read through the documentation for react-data-table-component as it has more in-depth coverage of the library's usage that goes beyond the scope of this article.

Don't fret if there's a difference in your table from the expected result. The source code in this repository will guide you.

Happy coding and may your code run smoothly!

CSS has come a long way over the past few years. In the past, you'd use CSS to create simple-looking web applications that rely on HTML tables and CSS floats as their layout systems. And now you can architect complex interactive user interfaces that are appealing with elegant designs.

But as advanced as CSS has become, writing out CSS styles from scratch for extensive web applications can be time-consuming. It can also lead to the repetition of styles, longer CSS files, cross-browser compatibility errors, and generally a more complex codebase.

To solve this challenge, CSS frameworks emerged as a solution. CSS frameworks introduced a means for developers to adopt a set of pre-defined and standardized CSS styles and components to create consistent, appealing, and responsive user interfaces.

But with so many CSS frameworks to choose from, deciding on the right framework for your application can be difficult. You'll want to conduct a proper comparison that accounts for the overall features of each CSS framework, so you can choose the most suitable option that fits your needs.

In this article, we’ll explore what CSS frameworks are, their benefits and limitations, and how you can get started using them. We’ll also look at the most prominent and used CSS frameworks you should know.

In the end, you'll have a good sense of how CSS frameworks work and which to use to meet your project's needs. Let's get started.

Table of Contents

• What are CSS Frameworks?

• Why Should You Use CSS Frameworks?

• Types of CSS Frameworks

• 9 CSS Frameworks You Should Know

• Bootstrap

• Tailwind CSS

• Material UI

• styled-components

• Foundation

• Chakra UI

• Emotion

• Bulma

• Pure CSS

• How to Choose the Right CSS Framework for Your Project

• Final Thoughts

What are CSS Frameworks?

CSS frameworks are a set of pre-written and ready-to-use CSS styles and stylesheets that provide a set of styles and components for styling markup. They streamline the development process by offering a foundation of reusable CSS styles for common design elements and layouts.

CSS frameworks are used to create familiar and consistent user interfaces, simplify responsive design, and enhance collaboration among development teams.

Why Should You Use CSS Frameworks?

CSS frameworks offer numerous benefits that make them indispensable tools for web development. Here are some advantages that CSS frameworks provide:

Faster development time: CSS frameworks come with pre-built components and styles, eliminating the need to write everything from scratch. This speeds up the development process and allows developers to focus on customizing and fine-tuning specific aspects of their projects rather than building from scratch.

Consistent style and design: CSS frameworks help provide a cohesive and consistent look across different components and pages. They ensure that all styles, UI elements, buttons, and typography maintain a unified design language, saving developers from spending excessive time on styling and ensuring a better user experience.

Improve collaboration and maintainability: CSS frameworks usually offer well-documented libraries and established conventions, making it easier for developers to collaborate and maintain codebases. With a common codebase and extensive documentation, developers can easily understand and work with each other's code.

Types of CSS Frameworks

CSS frameworks aren’t a one-size-fits-all. They come in different forms, and each category has its own focus and advantages. Knowing the categories CSS frameworks can fit into will be helpful in letting you know what to expect from each framework.

Let's look at the main types of CSS frameworks now.

Component-Based Frameworks

This is the origin of CSS frameworks. Component-based frameworks offer a set of pre-built UI components that developers can plug into their applications to assemble interfaces quickly. The goal is to provide a modular and reusable design system that can help you create consistent and visually appealing web apps without starting from scratch every time.

Utility-First Frameworks

The idea behind utility-first frameworks is that CSS should not be descriptive and should not heavily rely on your markup (for example, a “.header” class that signifies a navigation bar or website's header), but instead should be based on functionality (for example, “.text-align-center”).

Rather than confining your application’s design to only what is provided by the framework, utility-first frameworks offer CSS styles and classes that only do one thing (or a small set of things) as building blocks to extend and customize the design of your application beyond the limitations of a component-based framework.

CSS-in-JS

With the rise of JavaScript libraries like React, CSS-in-JS frameworks were created to let developers manipulate styles directly in JavaScript by including CSS in their JavaScript markup.

CSS-in-JS utilizes the dynamic nature of JavaScript to provide a way of writing interactive CSS styles that are performant and based on user data and interactions.

There are more types of CSS frameworks available, but these three categories cover the most notable groups.

Note that there isn’t a fine line that separates these concerns. Most CSS frameworks can overlap into multiple categories – for example, a component-based framework can give you utilities, and a utility-based framework can give you components as well

A diagram showing some categories of CSS frameworks and how the intertwine with each other

For example, consider the diagram above that shows how the three categories of CSS frameworks can intertwine.

9 CSS Frameworks You Should Know

Now that you have a clear understanding of what CSS frameworks are and their different types, let's have a look at some of the most prominent and most-used CSS frameworks you should know.

Bootstrap

Bootstrap began as an internal tool at X (formerly, Twitter) to maintain a consistent look across the platform. Then it was open-sourced in 2011 for the wider web development community to use. Bootstrap is one of the most widely used CSS frameworks, with a focus on responsive, mobile-first web design.

Bootstrap offers a robust collection of CSS and JavaScript components, such as its grid system and responsive UI components like buttons, navigation menus, and forms, that streamline the process of building clean and consistent web layouts.

Bootstrap has large community support and over a hundred thousand GitHub stars. And though it may seem bulky when compared to modern options, it's still one of the most used CSS frameworks you can use to build good-looking and thematically coherent web applications without needing to be an expert in CSS and web design.

An image of the Bootstrap framework official website

How to use Bootstrap

To get started with Bootstrap, you need to pull its source files into your project. In a JavaScript framework like React, you can install Bootstrap into your project using a package manager like npm.

npm install bootstrap

Next, import Bootstrap’s CSS at the top of your application's main entry file, typically src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css';

This will import Bootstrap CSS and make it available for use throughout your application. Now you can use Bootstrap components in your application like this:

import React from 'react';

function App() {

  return (

    <div className="container">

      <h1>Hello, Bootstrap in React!</h1>

      <button className="btn btn-primary">Click Me</button>

    </div>

  );

}

export default App;

To learn more about Bootstrap, refer to the official Bootstrap documentation for detailed guidance, examples, and additional resources.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces directly in markup files.

As a utility-first framework, Tailwind abstracts from the constraints of a component-based framework, for example, Bootstrap.

Though component-based frameworks like Bootstrap excel at streamlining the process of building web layouts by providing pre-defined UI components, they’re opinionated in that you’re confined to the current design system and ecosystem of the framework. Trying to extend or customize your application’s layout beyond what the framework provides can prove to be a workaround.

Tailwind offers a robust system of utility and helper classes as building blocks that can be composed to build any design directly in your markup. With Tailwind ranking as the second most used framework in the State of CSS 2023 survey at about 76%, it's the best choice to rapidly prototype and speed up the development process in line with modern web standards.

An image of the Tailwind CSS framework official website

How to use Tailwind CSS

Install tailwindcss via a package manager, and create your tailwind.config.js file to configure and customize Tailwind CSS for your application.

npm install -D tailwindcss

npx tailwindcss init

Add the paths to all your template and markup files in your tailwind.config.js file as well as other configurations.

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

}

Add the@tailwind directives for each of Tailwind’s layers to your main CSS file and ensure the CSS file is imported into the main entry file of your application.

@tailwind base;

@tailwind components;

@tailwind utilities;

Now you can apply utility classes directly in your HTML markup to style your components.

function Button({children}) {

  return (

      <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">

        {children}

      </button>

  );

}

export default Button;

You can learn more about setting up and using Tailwind CSS based on your project environment and advanced usage by going through the official Tailwind CSS documentation.

Material UI

Material UI is a component-based CSS framework for building user interfaces in React applications. It is based on Google's open-source design system, Material Design, and provides a rich collection of pre-built components and styles.

As one of the largest UI communities in the React ecosystem, Material UI offers a modern and visually appealing design system. It features a suite of customization options that make it easy for developers to implement custom design systems on top of the library, making it a popular choice for creating consistent UIs in React applications.

An image of the MUI kit official website

How to use Material UI

Install Material UI's core package and any additional dependencies you need.

npm install @mui/material @emotion/react @emotion/styled

Now you can Import any Material UI component into your React components and use them in your JSX code.

import Button from '@mui/material/Button';

export default function ButtonUsage() {

  return <Button variant="contained">Hello world</Button>;

}

Checkout Material UI documentation for detailed usage guidelines, API references, and examples

styled-components

styled-components is one of the most prominent CSS-in-JS libraries. It provides a seamless way to create and manage CSS styles within JavaScript files and components.

While it was originally designed specifically for the React ecosystem, styled-components have advanced so that you can now use it with vanilla JavaScript or other JavaScript frameworks like Vue.

As the most popular CSS-in-JS library by GitHub stars and weekly NPM downloads, styled-components offers a highly flexible and intuitive approach to styling, making it easier to build reusable and self-contained UI components.

An image of the Styled-components official website

How to use styled-components

Install the styled-components package via npm or yarn.

npm install styled-component

Now, you can define your styled components by importing the styled function and using it to create styled versions of HTML elements or custom components.

import styled, { css } from 'styled-components'

const Title = styled.h1`

  font-size: 1.5em;

  text-align: center;

  color: #BF4F74;

`;

render(

  <div>

    Title>

      Hello World!

    </Title>

  </div>

);

Refer to the official styled-components documentation for comprehensive guides, examples, and advanced features.

Foundation

Foundation is the closest alternative to Bootstrap. It's not just a CSS framework, but a comprehensive toolkit for styling web applications, architecting email templates, which are known to be notoriously hard, and integrating with ZURB’s Motion UI to create advanced CSS animations.

It includes common UI components like Bootstrap but is more utility-focused and gives developers more options for customizing components. With almost too many features, it can be considerably more complex and harder to fully understand how everything works compared to other frameworks.

An image of the Foundation framework official website

How to use Foundation

You can install Foundation in your project with a package manager.

npm install foundation-sites

Now you can use its styles and components in your application.

<div class="card" style="width: 300px;">

  <div class="card-divider">

    This is a header

  </div>

  <img src="assets/img/generic/rectangle-1.jpg">

  <div class="card-section">

    <h4>This is a card.</h4>

    <p>It has an easy to override visual style.</p>

  </div>

</div>

Consult Foundation’s official documentation for detailed instructions, examples, and additional resources.

Chakra UI

The brainchild of Nigerian developer Segun Adebayo, Chakra UI falls into the same category as MUI as a component library and CSS framework for React applications. It emphasizes accessibility, developer ergonomics, and a customizable design system.

Chakra UI provides a collection of well-designed and accessible components that can be easily customized to match your project's branding and style.

An image of the Chakra CSS framework official website

How to use Chakra UI

To get started, install the Chakra UI package via a package manager.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

After installing Chakra UI, you need to wrap your application or specific components with the ChakraProvider to make the Chakra UI components available.

import * as React from 'react'

// 1. import `ChakraProvider` component

import { ChakraProvider } from '@chakra-ui/react'

function App() {

  // 2. Wrap ChakraProvider at the root of your app

  return (

    <ChakraProvider>

      <TheRestOfYourApplication />

    </ChakraProvider>

  )

}

Now you can use Chakra UI's components in your JSX code to build your user interface.

import { Button} from '@chakra-ui/react'

export default function ButtonUsage() {

  return <Button colorScheme='blue'>Hello world</Button>;

}

To learn more, you can check out the Chakra UI documentation for detailed usage guidelines, component examples, and theming options

Emotion

Emotion is built off the concepts of styled-components to be a more performant, lightweight, and feature-rich CSS-in-JS library. It does this by utilizing features such as source maps, labels, and testing utilities.

Emotion is framework-agnostic and has a syntax that is as close to CSS as possible, making it easier to adopt.

Image of the Emotion homepage

How to use Emotion

The @emotion/css package is framework-agnostic and it's the simplest way to use Emotion. To get started, install the package via a package manager.

npm i @emotion/css

Now you can use Emotion's CSS API to generate and compose CSS styles.

import { css } from '@emotion/css'

const color = 'white'

render(

  <div

    className={css`

      padding: 32px;

      background-color: hotpink;

      font-size: 24px;

      border-radius: 4px;

      &:hover {

        color: ${color};

      }

    `}

  >

    Hover to change color.

  </div>

)

Refer to the official Emotion documentation for detailed instructions, usage examples, and advanced features.

Bulma

Bulma is a modern and lightweight CSS framework that offers a flexible grid system and a variety of CSS styles and components. It focuses on simplicity, modularity, and ease of use.

Bulma emphasizes that it is "environment agnostic," meaning that it is just the style layer on top of the logic, so it integrates capably with any JS environment.

Bulma is more of a collection of CSS classes than UI components. It has a clean and intuitive syntax and is less complex and easier to understand compared to other component-based frameworks like Foundation and Bootstrap. This makes it an ideal choice for beginners or developers who value simplicity and want to quickly build responsive websites.

An image of the Bulma CSS framework official website

How to use Bulma

To get started, you need to download Bulma for your project.

npm install bulma

Next, import Bulma CSS styles into your project's main stylesheet.

@import 'bulma/css/bulma.css';

Now, you're ready to start styling your project using Bulma's classes and components.

You can learn more about customizing Bulma's styles, overriding CSS variables, or modifying the Sass source files from the official documentation.

Pure CSS

Pure CSS is a minimalistic and lightweight CSS framework that aims to provide a set of small, responsive CSS modules and styles as a starting point for styling web applications without imposing any design decisions. It has one of the smallest bundle sizes of 3.5KB (compressed) when all modules are used.

Pure CSS is suitable for projects where a minimal design approach is desired or when you prefer to write your styles from scratch.

An image of the Pure.CSS official website

How to use Pure CSS

You can add Pure CSS to your page via the free jsDelivr CDN. Add the following <link> element to your page's <head>, before your project's stylesheets.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

Refer to the official Pure CSS documentation for detailed usage guidelines, examples, and additional resources.

How to Choose the Right CSS Framework for Your Project

As your applications grow and become bigger, adopting a CSS framework is an invaluable option when it comes to speeding up your workflow.

CSS frameworks help you build good-looking and professional web pages while maintaining consistency in design. But not all frameworks compare equally, as some provide more benefits and advantages.

When choosing the ideal CSS framework for your project, it is crucial to keep in mind various factors that can greatly impact how successful and efficient working with the framework will be for your project.

Some key aspects to consider are:

• Customizability: The level of customization the framework offers. Does the framework let you customize and extend your styles beyond the framework’s design system to suit your specific needs and preferences? Or is it opinionated and vendor-locked so that you become confined to the framework’s design-system and ecosystem?

• Learning curve: Another factor to consider is the learning curve associated with implementing the framework. How user-friendly is the framework for new learners? What’s the developer experience like? Are there enough documentation and resources available for you to learn and utilize the frameworks effectively?

• Community support: The availability of a supportive and active community is also an important consideration. Dedicated communities of developers who actively contribute to the frameworks' growth and provide assistance to fellow developers (and you!) are a great resource.

• How it fits your project: Lastly, ensuring that the CSS framework you choose is compatible with your project goals and matches its branding and design requirements is essential.

The table above gives an overview of the CSS frameworks we covered across different aspects, such as their approach, customization, learning curve, community support, available components, and styles.

Final Thoughts

In the coming years, we can expect the emergence of new CSS frameworks and improvements to existing ones. The CSS frameworks discussed in this article are some of the most notable to use for your next project.

It all comes down to which fits with your goals and project requirements. By carefully evaluating and weighing these factors, you can make an informed decision and select the CSS framework that perfectly aligns with your needs and objectives.

Whether you opt for the versatility and flexibility of Tailwind CSS or the simplicity of Pure.CSS, all frameworks offer valuable solutions that can significantly streamline your development time, ensure brand consistency, and improve code maintenance.

So, go ahead and choose the framework that best suits your project, and embark on a journey towards creating visually stunning and highly functional web applications!

If you found this article helpful, you can follow me on Twitter or connect with me on LinkedIn. Happy coding!

Here is the main distinction between them:

nth-child() selects its items from any group of elements. nth-of-type() selects its items from a specified type of element.

• :nth-child() selects items from a general group of elements. For instance, selecting a <p> node from a mixed group that includes <h1>, <div>, and <section>.
• :nth-of-type() selects items from a specified group of elements. For instance, selecting a <p> node from a group of <p> siblings.

This article uses examples to show you exactly how the two selectors work in CSS so that you can understand their similarities and differences.

Table of Contents

1. What is the CSS :nth-child() Selector?
   • Syntax of the CSS :nth-child() Selector
   • Examples of the CSS :nth-child() Selector
2. What is the CSS :nth-of-type() Selector?
   • Syntax of the CSS :nth-of-type() Selector
   • Examples of the CSS :nth-of-type() Selector
3. Overview

So, without any further ado, let’s get started with the :nth-child() selector.

What is the CSS :nth-child() Selector?

The CSS :nth-child() selector selects one or more child elements among their direct siblings regardless of node types.

Syntax of the CSS :nth-child() Selector

The CSS :nth-child() selector accepts one argument only. Here is the syntax:

html-element:nth-child(value) {
  style declarations
}

The value argument can be one of the following:

1. A number: For example, using 3 represents the third child.
2. The keyword even or odd: We use it to represent even or odd children.
3. The formula An+B: We use it to express a series of numbers. For instance, 2n+3 expresses these numbers: [(2x0)+3], [(2x1)+3], [(2x2)+3], [(2x3)+3], and so on.

Note the following:

• :nth-child() is a CSS pseudo-class selector.
• The :nth-child() selector works on direct siblings only.
• In the An+B formula,
  • A is an integer value of your choice.
  • n is the multiplier that automatically increases from zero (0).
  • + (or -) is the addition (or subtraction) operator.
  • B is an optional offset value for increasing (or decreasing) the result derived after multiplying A and n.

Examples of the CSS :nth-child() Selector

Below are examples of how to use the CSS :nth-child() pseudo-class selector.

Apply DeepPink to the <p> element that is the third child to its parent element

The :nth-child() selector below selects the <p> element that is the third child to its parent element.

p:nth-child(3) {
  color: DeepPink;
}

If the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the second <p> element only.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<p>Second paragraph element</p>
<h2>First heading 2 element</h2>
<p>Third paragraph element</p>
<h3>First heading 3 element</h3>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>

Try Editing It

The :nth-child() selector works on direct siblings only. For instance, you can re-write the HTML snippet above to include nested elements as follows:

<article>
  <h1>Article's first heading 1 element</h1>
  <p>Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's third paragraph element</p>
    <p>Article's fourth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's fifth paragraph element</p>
  <p>Article's sixth paragraph element</p>
</article>

Try Editing It

The p:nth-child(3) selector will apply DeepPink only to the fourth <p> node because it is the third child of its parent element.

Apply DeepPink to every odd child that is a <p> node

The :nth-child() selector below selects every odd child element that is a <p> node.

p:nth-child(odd) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the fourth <p> element only.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<h2>First heading 2 element</h2>
<p>Second paragraph element</p>
<h3>First heading 3 element</h3>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>

Try Editing It

Apply DeepPink to every even child that is a <p> node

The :nth-child() selector below selects every even child element that is a <p> node.

p:nth-child(even) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the first, second, fourth, and sixth <p> elements.

<article>
  <h1>Article's first heading 1 element</h1>
  <p>Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <p>Article's third paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Apply DeepPink to the third child element, seventh, eleventh, and so on that is a <p> node

The :nth-child() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of three (+3).

Note: 1 is the index position of the first child element.

p:nth-child(2n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<div><p>Fifth paragraph element</p></div>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<div><p>Nineth paragraph element</p></div>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first child, third, fifth, and so on that is a <p> node

The :nth-child() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of negative three (-3).

Note: 1 is the index position of the first child element.

p:nth-child(2n-3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<div><p>Fifth paragraph element</p></div>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<div><p>Nineth paragraph element</p></div>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the <p> nodes that are one of the first three children of their parent

The :nth-child() selector below applies DeepPink to <p> nodes if they are one of their parent’s first three elements.

p:nth-child(-n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<article>
  <h1>Article's first heading 1 element</h1>
  <p>Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <p>Article's third paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Note that:

• 1 is the index position of the first child element.
• The -n+3 syntax always selects the first three children because:
  • -1 + 3 = 2
  • -2 + 3 = 1
  • -3 + 3 = 0

So, now that we know how the CSS :nth-child() selector works, let’s discuss :nth-of-type() so we can see the difference.

What is the CSS :nth-of-type() Selector?

The CSS :nth-of-type() selector selects one or more child elements among their direct siblings of the same node type.

Syntax of the CSS :nth-of-type() Selector

The CSS :nth-of-type() accepts one argument only. Here is the syntax:

html-element:nth-of-type(value) {
  style declarations
}

The value argument can be one of the following:

1. A number: For instance, using 3 represents the third element type.
2. The keyword even or odd: We use it to represent even or odd element types.
3. The formula An+B: We use it to express a series of numbers. For instance, 2n+3 expresses these numbers: [(2x0)+3], [(2x1)+3], [(2x2)+3], [(2x3)+3], and so on.

Note the following:

• :nth-of-type() is a CSS pseudo-class selector.
• The :nth-of-type() selector works on direct siblings only.
• In the An+B formula,
  • A is an integer value of your choice.
  • n is the multiplier that automatically increases from zero (0).
  • + (or -) is the addition (or subtraction) operator.
  • B is an optional offset value for increasing (or decreasing) the result derived after multiplying A and n.

Examples of the CSS :nth-of-type() Selector

Below are examples of how to use the CSS :nth-of-type() pseudo-class selector.

Apply DeepPink to the third <p> element type

The :nth-of-type() selector below selects the third <p> element among its siblings of the same node type.

p:nth-of-type(3) {
  color: DeepPink;
}

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the third <p> element only.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<p>Second paragraph element</p>
<h2>First heading 2 element</h2>
<p>Third paragraph element</p>
<h3>First heading 3 element</h3>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>

Try Editing It

The :nth-of-type() selector works on direct siblings only. For instance, you can re-write the HTML snippet above to include nested elements as follows:

<article>
  <h1>Article's first heading 1 element</h1>
  <p> Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's third paragraph element</p>
    <p>Article's fourth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's fifth paragraph element</p>
  <p>Article's sixth paragraph element</p>
</article>

Try Editing It

The p:nth-of-type(3) selector will apply DeepPink only to the fifth <p> node because it is the third <p> type of its parent element.

Therefore, if you add one more <p> node to the <section> element, the p:nth-of-type(3) selector will apply DeepPink to the fifth and sixth <p> items.

<article>
  <h1>Article's first heading 1 element</h1>
  <p> Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's third paragraph element</p>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Apply DeepPink to every odd <p> element type

The :nth-of-type() selector below selects every <p> child element with an odd index.

p:nth-of-type(odd) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the first and third <p> elements.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<h2>First heading 2 element</h2>
<p>Second paragraph element</p>
<h3>First heading 3 element</h3>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>

Try Editing It

Apply DeepPink to every even <p> element type

The :nth-of-type() selector below selects every <p> child element with an even index.

p:nth-of-type(even) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the second, fifth, and sixth <p> elements.

<article>
  <h1>Article's first heading 1 element</h1>
  <p> Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <p>Article's third paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Note: Browsers will apply DeepPink to the fifth paragraph because it is the second <p> node of the <section> element.

Apply DeepPink to the third <p> element type, fifth, seventh, and so on

The :nth-of-type() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of three (+3).

Note: 1 is the index position of the first child element.

p:nth-of-type(2n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first <p> element type, third, fifth, and so on

The :nth-of-type() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of negative three (-3).

Note: 1 is the index position of the first child element.

p:nth-of-type(2n-3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first three <p> element type

The :nth-of-type() selector below applies DeepPink to the first three <p> child elements.

p:nth-of-type(-n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Note:

• 1 is the index position of the first child element.
• The -n+3 syntax always selects the first three <p> child elements because:
  • -1 + 3 = 2
  • -2 + 3 = 1
  • -3 + 3 = 0

Overview

In this article, we discussed the similarities and differences between the CSS :nth-child() and :nth-of-type() selectors. We also used examples to see how they work.

Thanks for reading!

And here’s a useful React.JS resource:

I wrote a book about Creating NPM Packages!

It is a beginner-friendly guidebook for mastering the art of creating, testing, and publishing NPM libraries in the React and JavaScript ecosystem.

It uses a scalable project to explain the fundamentals of building and managing NPM packages from scratch.

But what is a boolean context? It's a situation where a boolean value is expected. Examples include if statements, logical operators, and so on. When you use a non-boolean value in a boolean context, JavaScript will convert the value to its boolean equivalent.

In this article, you will learn about falsy values in JavaScript and how to check if a value is falsy. The article also covers some best practices to consider when checking the boolean equivalent of a value.

Let's get started!

Table of Contents

• The Six Falsy Values in JavaScript

• How to Check if a Value is Falsy

• Truthy Values That May Appear as Falsy Values

• Best Practices When Checking Boolean Equivalent

• Conclusion

The Six Falsy Values in JavaScript

Falsy values in JavaScript are unique because there are only six of them. Apart from these six, all other values are truthy values.

You can commit these falsy values to memory. That way, when you come across any value that isn't one of the six, you know it's a truthy value.

Here are the six falsy values in JavaScript:

• false: The boolean value false.

• 0: The number zero.

• "" or '' or ````: An empty string.

• null: The null keyword, representing the absence of any object value.

• undefined: The undefined keyword, representing an uninitialized value.

• NaN: Stands for "Not a Number". It represents a special value returned from an operation that should return a numeric value but doesn't.

Now, let's see some practical examples of these falsys valsues in JavaScript.

Example 1 – The boolean value false.

let isOnline = false

function checkStatus(status) {
  return Boolean(status) ? "ONLINE" : "OFFLINE"
}

checkStatus(isOnline) // "OFFLINE"

When you pass the isOnline variable to the checkStatus function, it returns the string "OFFLINE". And this is because the value is false in this context. Here, we are using a tenary operator based on the boolean value of the status argument.

Example 2 – The number zero.

let unreadMessages = 0
let hasUnreadMessages = Boolean(unreadMessages)
console.log(hasUnreadMessages) // false

This examples checks whether a user has unread messages or not. We use the in built Boolean function to get the boolean value of the unreadMessages variable. This means anytime the number of unreadMessages is zero, hasUnreadMessages will be false.

Example 3 – An empty string.

let userInput = "";
let defaultText = "No input provided";

let displayText = Boolean(userInput) || defaultText;

console.log(displayText); // No input provided

This example uses the logical OR operator || to determine the value of the displayText. It will assign the value of userInput to displayText if it's a truthy value. Or it will assign the defaultText to displayText if userInput is a falsy value as it is in this case.

Example 4 – null

let user = null;

if (user && user.name) {
    console.log("Welcome, " + user.name + "!");
} else {
    console.log("Please log in to access the website.");
}

The following example assumes the user isn't logged in and so the value of user object is null. This means the if statement will evaluate to false. The expected behaviour then will be that the code executes the else block.

Example 5 – undefined

let age;
if (age === undefined) {
    console.log("The age is undefined.");
}

When a variable is declared but not initialized with a value, JavaScript assigns it the value undefined by default. In the code example above, since the age variable is declared but not assigned a value, its value is undefined. This means the code in the if statement will run.

Example 6 – NaN

let value1 = "Ten"
let value2 = 10

let result = value1 / value2

if (isNaN(result)) {
    console.log("The result is not a number.");
} else {
    console.log(result);
}

This example divides value1 (a string) by value2 (a number). This will result in a NaN value because you cannot divide a string by a number. This means the code in the if block will run. And log The result is not a number to the console.

How to Check if a Value is Falsy in JavaScript

A safe way to check whether a value is falsy or not is to use the Boolean function. The Boolean function returns the boolean value of the value of the argument passed to it.

Example:

console.log(Boolean(false))
console.log(Boolean(0))
console.log(Boolean(""))
console.log(Boolean(null))
console.log(Boolean(undefined))
console.log(Boolean(NaN))

Boolean log results for all six falsy values.

Here, we are checking the boolean value of all six falsy values. And as expected, each returns false.

When you pass any other value that's not one of these six falsy values to the Boolean function, it will return true.

Example:

console.log(Boolean('hello'))
console.log(Boolean(24))

Example boolean log results for truthy values.

Truthy Values that May Appear as Falsy Values

There are some truthy values that, at a glance, may appear to be falsy values but aren't. As already mentioned, only six values in JavaScript are falsy values. Anything else is a truthy value.

The following are some of those values that aren't falsy but may appear as such.

console.log(Boolean('false')) // An empty object
console.log(Boolean(' ')) // An empty object
console.log(Boolean('0')) // An empty object
console.log(Boolean([])) // An empty array
console.log(Boolean({})) // An empty object

Log results for truthy values that appear as falsy.

The first three strings contains text that may look like falsy values. First is the string with the text "false", another one with some whitespace, and the third with zero.

Remember that the only string considered a falsy value is an empty string. All non-empty strings in JavaScript are truthy values including strings with only whitespace.

Also, note that unlike strings, both an empty array and an empty object return true in a boolean context.

Best Practices When Checking Boolean Equivalent

The following tips will help make your code more readable and easier to maintain.

1. Use the Boolean function

It's always better to use the built-in Boolean function when you want to check whether a value is truthy or falsy. The function works by coercing any value into its corresponding boolean. It also makes your intention clear to anyone reading the code.

Example:

// Example without the Boolean function
const value = ''; 

if (value) {
    console.log('It is a TRUTHY value');
} else {
    console.log('It is a FALSY value');
}

// Example with the Boolean function
const value = ''

if (Boolean(value)) {
    console.log('It is a TRUTHY value');
} else {
    console.log('It is a FALSY value');
}

Both examples do the same thing. But in the second example, it's explicit that you're checking the boolean representation of the given value.

2. Use strict equality === instead of loose equality ==

When you're comparing values for truthiness or falsiness, it's recommended to use strict equality (===) over loose equality (==). Strict equality compares both the value and the type. Loose equality performs type coercion before comparing the values, and this can lead to unexpected results.

Example:

// Strict Equality Example

if (1 === [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

Log result for strict equality example.

// Loose Equality Example
if (1 == [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

Log result for loose equality example.

Both examples above compare the same values. But the strict equality example logs "NOT EQUAL". This is because the number 1 is not equal to an array containing the number 1. With the loose equality, it coerces the type of the values to make them of the same type. That is why it logs "EQUAL" to the console.

3. Add comments to document your code

To make your code more readable and easier to maintain, consider adding comments when necessary to explain your logic when dealing with truthy and falsy values.

Documenting your code is a good practice to help developers on your team (or your future self) understand the intended behaviour of a piece of code.

Example:

let selectedUser = USER_OBJ

// Check if no user is selected
if (!selectedUser) {
    console.log("Please select a user.");
} else {
    console.log("User address: " + selectedUser.address);
}

In the example above, the comment added before the if statement makes it clear that the code is checking if no user has been selected.

Using the logical NOT operator (!) can make it seem like you're checking if a user is selected rather than checking if no user is selected. So a comment in an instance like helps provide clarity.

Conclusion

In this article, you have learned about the six falsy values in JavaScript and how they differ from truthy values. You also learned about some truthy values that may appear as falsy, but actually aren't. And you also saw some best practices to consider when working with falsy values.

A good understanding of the concept of falsy and truthy values and how they affect comparisons and conditional statement will come in handy when debugging JavaScript applications.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

Artificial Intelligence: The New Frontier for Frontend Developers

The demand for AI-powered applications is growing at a fast pace. As a front-end developer, you can take advantage of this trend and advance your career by integrating your skills in frontend development with AI technologies.

This integration allows you to build intelligent applications that improve user experiences and provide valuable insights that can positively impact a user's decisions.

To highlight the exciting opportunities out there right now, consider these statistics:

1. In 2023, more than 60% of startups accepted into the renowned Y Combinator were focused on AI.
2. Despite a slowdown in global investments, funding to AI startups surged and reached an impressive $50 billion in 2023.

In this guide, we'll cover the following:

1. The role of frontend developers in advancing AI innovation.
2. Key steps to follow when integrating AI services into your frontend workflow
3. How to ensure the optimal performance and security of the AI apps you build.
4. Lastly, we will incorporate the tips in 1-3 to build an AI Website Critic that can roast your websites and portfolio apps using React and OpenAI's GPT4-Vision Model.

Prerequisites

• Knowledge of HTML
• Basic understanding of React hooks
• Node and npm installed on your local computer.

The Role of Frontend Developers in Crafting AI-driven Experiences

Frontend developers play a crucial role in crafting AI-driven experiences by leveraging their expertise in user interface design, data visualization, and technical implementation.

They are responsible for creating the user interface, designing the interaction flows, and integrating AI functionality seamlessly into the app.

Frontend developers also collaborate with back-end developers and data scientists to ensure the efficient and accurate functioning of AI algorithms.

In addition, frontend developers play a critical role in the performance of web apps that leverage the latest AI models. They are responsible for optimizing the app's performance, ensuring cross-platform compatibility, and implementing responsive designs that adapt to different devices and screen sizes.

How to Integrate AI Services Into Your Frontend Workflow

To integrate AI services into your frontend workflow, you should follow a systematic approach that includes these steps:

1. Identify the task or problem that AI capabilities can solve or enhance.
2. Research and evaluate AI companies that provide APIs and node SDKs for the specific AI capabilities required for the task or problem you identified. By understanding the offerings of different AI companies, you can choose the most suitable AI services to integrate into your applications.

Let's take a look at some popular AI models and their core tasks:

You can explore more of these models on Replicate Explore and Huggingface explore models pages.

3. Integrate the selected AI services into your frontend application by leveraging the provided APIs and node SDKs. This involves understanding the documentation and guidelines the AI companies offer to ensure seamless integration and proper utilization of the AI capabilities.
4. Test and validate the integrated AI services within your frontend application to ensure accurate and efficient functionality. This step is crucial for identifying and addressing technical issues or optimization requirements.

It's also important to design with empathy by providing clear explanations and visualizations, giving users a sense of control and ownership over AI-generated outputs.

Example application

Let's go over an example. Suppose you want to make a custom meme generator. In that case, you should search for AI models specifically trained to work with images, such as Stability's Stable Diffusion and OpenAI's DALL·E 3.

After that, you can explore the best APIs and SDKs that you can use to take advantage of these AI models and create a basic sample.

To illustrate, let's use the Replicate Node SDK, which provides a convenient method to interact with the Stable Diffusion AI model and set up a basic Node.js program that we can later integrate into our React application.

Step 1. Get your token from https://replicate.com/account Step 2: Install the Node SDK with the npm command: npm install replicate Step 3: Query the Stable Diffusion AI model via the replicate SDK.

const Replicate = require("replicate");
const replicate = new Replicate({

  auth: "", // defaults to process.env.REPLICATE_API_TOKEN
});

async function iLoveCats(){
    const model = "stability-ai/stable-diffusion:27b93a2413e7f36cd83da926f3656280b2931564ff050bf9575f1fdf9bcd7478";
  const input = {
    prompt: "a cat wearing a suit",
  };
  const output = await replicate.run(model, { input });
  console.log(output[0]);

}

iLoveCats()

When you log the output, you get an image URL that you can easily display in your frontend app. https://replicate.delivery/pbxt/ng6Tb0HNdzYwFZXMNv3qmIBxc2GIwU4t7edephtDvuWZ5wNSA/out-0.png

How to Optimize for Performance and Security in AI-driven Frontend Applications

Optimizing for performance and security in AI-driven frontend apps is essential for creating a smooth user experience and for data protection as well.

Thankfully, the techniques listed below are similar to standard practices in traditional frontend development. This overlap means that developers who are familiar with conventional frontend optimization and security practices can more easily adapt and apply those skills to the unique demands of AI-driven applications:

1. Employ lazy loading and code-splitting techniques to reduce initial loading times and improve performance.
2. Utilize caching and resource optimization techniques to minimize unnecessary API calls and improve data retrieval speed.
3. Implementing secure API endpoints and authentication mechanisms to ensure only authorized access to AI services and data.

How to Build an AI Website Critic using React and OpenAI's GPT4-Vision Model

In this section, we will build a React app that utilizes a Vision model to analyze images of websites and provide feedback. To do this, we will follow the previously described 4-step workflow for integrating AI services into frontend apps.

Since we need for a vision model that can analyze images, we should look at the available options in the market, which you can find here and here. After examining the performance benchmarks of available vision models, we will go with OpenAI's GPT-4 vision model.

OpenAI's GPT-4 vision model is a state-of-the-art AI model released in late 2023. It can accept images as inputs, analyze them, and provide detailed feedback based on the prompts.

Apart from performance reasons, we will use it for our Website Critique application because it offers relatively cheaper pricing than other vision models, and has an easy-to-use API endpoint bundled with the popular OpenAI developer interface.

It's now time to integrate it into our React app.

Step 1: Install React + Vite

You can do that with the following command:

npm create vite@latest my-website-critic -- --template react

Step 2: Install OpenAI Node package

Open the generated project folder in your favorite IDE and install the OpenAI Node package, which you will use to interact with the GPT4 Vision model.

Here's how to install it:

cd my-website-critic
npm install openai

Step 3: Install the React markdown package

This will help you format the model's textual responses in a readable format.

npm install react-markdown

Step 4: Run npm install

Now run npm install:

  npm install
  npm run dev

Step 5: Manage state in React

In this step, you will use React's useState and useEffect hooks for managing the state and handling the asynchronous request to OpenAI's API in src/App.jsx.

For our image input, we will be using a screenshot of the freeCodeCamp homepage hero section uploaded to a image storage platform like IMGBB. Feel free to use any image URL you want.

Here's the code - I'll explain it below:

import { useState, useEffect } from 'react';
import OpenAI from 'openai';
import ReactMarkdown from 'react-markdown';

const App = () => {
  const [response, setResponse] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const openai = new OpenAI({
      apiKey: "YOUR_OPENAI_API_KEY",
      dangerouslyAllowBrowser: true,
    });

    const fetchUICriticResponse = async () => {
      setIsLoading(true);
      try {
        const result = await openai.chat.completions.create({
          model: "gpt-4-vision-preview",
          messages: [
            {
              role: "user",
              content: [
                { type: "text", text: "You're an expert UI critic. What can I improve in this website?" },
                {
                  type: "image_url",
                  image_url: {
                    "url": "https://i.ibb.co/sWM573X/Screenshot-2024-01-18-at-10-34-28-AM.png",
                  },
                },
              ],
            },
          ],
          "max_tokens": 1500
        });
        if (result && result.choices && result.choices.length > 0 && result.choices[0].message) {
          console.log(1, result);
          setResponse(result.choices[0].message.content);
        }
      } catch (error) {
        console.error("Error fetching AI response:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUICriticResponse();
  }, []);

  return (
    <div>
      <h3>Hi! UI Expert Here</h3>
      {isLoading ? (
        <p>Loading...</p>
      ) : response ? (
        <div>
          <h3>My Feedback:</h3>
          <ReactMarkdown>{response}</ReactMarkdown>
        </div>
      ) : (
        <p>No response received.</p>
      )}
    </div>
  );
};

export default App;

In the above component:

• The useEffect hook runs the fetchUICriticResponse function when the component mounts.
• The useState hooks manage the AI response (response) and the loading state (isLoading).
• fetchUICriticResponse is an asynchronous function that fetches the response using the OpenAI API.
• The component renders a loading message while the response is being fetched. Once the fetch is complete, it displays the response or a fallback message using the React Markdown package we installed earlier.

You should get a result similar to the image below containing the result of the GPT4 Vision model analysis of the provided image and prompt given.

As you can see, the analysis goes through each element on the page and offers feedback – both positive, and more constructive – on things like navigation clarity, whitespace usage, search functions, and so on.

Note: Handling API keys directly in the frontend is not recommended due to security concerns. The example is just for learning. In production, create an .env file and put your YOUR_OPENAI_API_KEY in it.

What's Next?

You can enhance these code examples by creating a simple input field for users to enter their image links. You may also set up an image uploader to allow users to upload images from their local device.

Please refer to the official documentation for instructions on how to achieve this.

When deciding which AI applications to develop, it is crucial to consider the intended impact, user requirements, and available resources.

Some other potential AI application ideas include a language translation app and a virtual personal assistant.

Conclusion

If you're interested in incorporating AI into your frontend apps, start by exploring open and closed-source AI models. You'll also want to understand how to work with APIs and external libraries.

You should also focus on familiarizing yourself with handling AI model responses and interactivity.

With this knowledge, you can position yourself for the several consumer-ready AI innovations that will spring up and require the services of a frontend developer skilled in building AI-powered apps.

For the unacquainted, flatpickr is one of the most popular date picker libraries in the open source-verse. It's framework-agnostic, highly customizable, and lightweight.

I recently had to use it in a Next.js codebase and there was a peculiar use case I had. The built-in behavior is that dates are applied immediately when selected, and thereafter the date picker disappears.

What I really wanted, however, was to be able to pick dates and not have the modal disappear the moment I did so. I wanted to be able to keep picking dates and only have it applied when I clicked on an "Apply" button. I also wanted a "Clear" button to clear applied dates.

Ordinarily, flatpickr's API has methods you can work with to get these functionalities, but you won't get buttons on the date picker itself.

Even while there is a plugin that adds a button to the date picker to manually apply dates, it doesn't work for date ranges (which was what I needed it for) and the button's look didn't really blend with the overall theme of the app I was building.

I had no other option but to come up with my own solution. But how do you get your own buttons to appear on flatpickr's date picker?

How to Set Up flatpickr

First things first, install the package:

npm install flatpickr

Next, you need a DatePicker component that will encapsulate the custom date picker and make it reusable. This component should have an onChange prop which will be passed a callback that will be called whenever a date is applied:

// DatePicker.tsx

const DatePicker: React.FC<DatePickerProps> = ({ onChange }) => {
  return <div></div>
}

export default DatePicker

interface DatePickerProps {
  onChange: (date: Date[]) => void
}

Next, you'll need to set up flatpickr itself. You're going to bring in some exports from the flatpickr package. In the markup, you'll add a text input element, which will be the date picker input, and pass it an element ref variable that'll be used to instantiate the flatpickr instance with a couple of configuration options:

// DatePicker.tsx

import { ElementRef, useEffect, useRef, useState } from "react"
import flatpickr from "flatpickr"

import { Instance as Flatpickr } from "flatpickr/dist/types/instance"
import "flatpickr/dist/flatpickr.min.css"

const DatePicker: React.FC<DatePickerProps> = ({ onChange }) => {
  const [flatpickrInstance, setFlatpickrInstance] = useState<Flatpickr>()
  const datePickerRef = useRef<ElementRef<"input">>(null)

  useEffect(() => {
    if (datePickerRef.current) {
      const flatpickrInstance = flatpickr(datePickerRef.current, {
        static: true,
        closeOnSelect: false,
      })

      setFlatpickrInstance(flatpickrInstance)
    }

    return () => flatpickrInstance?.destroy()
  }, [])

  return (
    <div>
      <input ref={datePickerRef} type="text" placeholder="Select date..." />
    </div>
  )
}
...

For the configuration options, static is set to true so the date picker modal is anchored to the date picker input and closeOnSelect is false so the date picker modal doesn't disappear when a date is selected.

This is how the date picker looks so far:

How to Add the Buttons

We've arrive at the main attraction of the day. From the snippet below, you'll notice two new imports: createPortal from react-dom and a pre-styled Button component. createPortal is going to play a very special role as you'll see.

// DatePicker.tsx

import { ElementRef, useEffect, useRef, useState } from "react"
import { createPortal } from "react-dom"
import flatpickr from "flatpickr"
import Button from "./Button"

import { Instance as Flatpickr } from "flatpickr/dist/types/instance"
import "flatpickr/dist/flatpickr.min.css"

...

Moving on to the body of the DatePicker component, you'll notice some changes too.

There's dates which will store selected date(s) (or an empty array if no date is selected) and applyDate which will hold the callback to call when the 'Apply' button is clicked.

In the configuration object, you'll find two flatpickr hooks: onChange that gets triggered whenever a date is picked and receives an array of the currently selected dates, and onClose that gets triggered when the date picker modal is closed.

Within the body of these hooks are implementations that specify the date picker's behavior.

// DatePicker.tsx

...
const DatePicker: React.FC<DatePickerProps> = ({ onChange }) => {
  const [flatpickrInstance, setFlatpickrInstance] = useState<Flatpickr>()
  const datePickerRef = useRef<ElementRef<"input">>(null)
  const dates = useRef<Date[]>([])
  const [applyDate, setApplyDate] = useState(() => () => {})

  useEffect(() => {
    if (datePickerRef.current) {
      const flatpickrInstance = flatpickr(datePickerRef.current, {
        static: true,
        closeOnSelect: false,
        onChange: (selectedDates) => {
          if (selectedDates.length === 0) {
            onChange([])
            dates.current = []
          }

          setApplyDate(() => {
            return () => {
              dates.current = selectedDates
              onChange(selectedDates)
              flatpickrInstance.close()
            }
          })
        },
        onClose: () => {
          flatpickrInstance.setDate(dates.current)
        },
      })

      setFlatpickrInstance(flatpickrInstance)
    }

    return () => flatpickrInstance?.destroy()
  }, [])


  return (
    <div>  
...

We've gotten to the part where you finally put the custom buttons inside the date picker. This is where createPortal comes to shine.

The flatpickrInstance has a property, calendarContainer, which holds a reference to the date picker's containing div element. This is where you'll project the custom buttons, just beneath the calendar part of the date picker, using react portal.

// DatePicker.tsx

...
  return (
    <div>
      <input ref={datePickerRef} type="text" placeholder="Select date..." />
      {flatpickrInstance &&
        createPortal(
          <div className="flex justify-center gap-3 py-2">
            <Button
              text="Clear"
              bgColor="#F8F8F8"
              textColor="#292A2E"
              onClick={() => {
                flatpickrInstance.clear(true)
                flatpickrInstance.close()
              }}
            />
            <Button
              text="Apply"
              bgColor="#569ff7"
              textColor="#FFF"
              onClick={applyDate}
            />
          </div>,
          flatpickrInstance.calendarContainer
        )}
    </div>
  )
}

export default DatePicker
...

Put together, this is the final code output:

// DatePicker.tsx

import { ElementRef, useEffect, useRef, useState } from "react"
import { createPortal } from "react-dom"
import flatpickr from "flatpickr"
import Button from "./Button"

import { Instance as Flatpickr } from "flatpickr/dist/types/instance"
import "flatpickr/dist/flatpickr.min.css"

const DatePicker: React.FC<DatePickerProps> = ({ onChange }) => {
  const [flatpickrInstance, setFlatpickrInstance] = useState<Flatpickr>()
  const datePickerRef = useRef<ElementRef<"input">>(null)
  const dates = useRef<Date[]>([])
  const [applyDate, setApplyDate] = useState(() => () => {})

  useEffect(() => {
    if (datePickerRef.current) {
      const flatpickrInstance = flatpickr(datePickerRef.current, {
        static: true,
        closeOnSelect: false,
        onChange: (selectedDates) => {
          if (selectedDates.length === 0) {
            onChange([])
            dates.current = []
          }

          setApplyDate(() => {
            return () => {
              dates.current = selectedDates
              onChange(selectedDates)
              flatpickrInstance.close()
            }
          })
        },
        onClose: () => {
          flatpickrInstance.setDate(dates.current)
        },
      })

      setFlatpickrInstance(flatpickrInstance)
    }

    return () => flatpickrInstance?.destroy()
  }, [])

  return (
    <div>
      <input ref={datePickerRef} type="text" placeholder="Select date..." />
      {flatpickrInstance &&
        createPortal(
          <div className="flex justify-center gap-3 py-2">
            <Button
              text="Clear"
              bgColor="#F8F8F8"
              textColor="#292A2E"
              onClick={() => {
                flatpickrInstance.clear(true)
                flatpickrInstance.close()
              }}
            />
            <Button
              text="Apply"
              bgColor="#569ff7"
              textColor="#FFF"
              onClick={applyDate}
            />
          </div>,
          flatpickrInstance.calendarContainer
        )}
    </div>
  )
}

export default DatePicker

interface DatePickerProps {
  onChange: (date: Date[]) => void
}

And this is how the date picker now looks with the custom buttons:

Conclusion

The date picker is now fully functional and can work for all mode options. There are tons of potential customizations you could possibly do using this technique. Hopefully, this article has done a good job of showing how flatpickr customization can be achieved.

❤️Enjoyed this article?

See more of my content! You can find more articles on my blog.

Want to connect? Link up with me on Twitter or LinkedIn.

In this article, you will learn how to use both options. You'll also learn about the differences between the two and when it's appropriate to use each of them.

Table of Contents

• Regular Function Syntax vs Arrow Function Syntax

• How to Access the Arguments Passed to Functions

• Duplicate Named Parameters

• Function Hoisting

• How to Handle "this" Binding in Functions

• How to Use Functions as Constructors

• So Which One Should You Use?

Regular Function Syntax vs Arrow Function Syntax

To understand the difference between the two options, let's begin by looking at their syntax.

Regular function syntax

The ordinary way of declaring functions in JavaScript is to use the function keyword. Here is an example:

function sayHello(name) {
  return 'Hello ' + name
}

To return a value from a regular function, you have to explicitly use the return keyword. Otherwise the function will return undefined.

Arrow function syntax

Arrow functions were introduced with ECMAScript 6 (ES6). They give you a more concside way of defining functions in JavaScript.

Using the same sayHello function from the previous example, let's see how to create it with the arrow function syntax.

const sayHello = (name) => {
  return 'Hello ' + name
}

Unlike regular functions, you don't have to use an explicit return if there's only one statement like the above example. You can write the function on a single line like so.

const sayHello = (name) => 'Hello ' + name

Note how the curly braces are also removed to implicitly return the result of the expression. You can even remove the parenthesis too if there is only one argument. See the example below:

const sayHello = name => 'Hello ' + name

The name is the only argument the function takes. And this means you can remove the parenthesis from the argument and it will still work fine.

How to Access the Arguments Passed to Functions

JavaScript provides a way to access all arguments passed to a function. But the way you acess these arguments depends on the type of function you are working with.

How to access arguments with regular functions

You can access all the arguments passed to a regular function using the arguments object. The arguments object is an array-like object that holds all the arguments passed to the function.

Example:

function logNumbers(num1, num2) {
  console.log(arguments)
}

logNumbers(8, 24)

Log results of the arguments object

As you can see from the log result, the arguments object contains the two numbers passed as arguments to the logNumbers function.

How to access arguments with arrow functions

The arguments object is not available in arrow functions. If you try to access it in arrow functions, JavaScript will throw a reference error.

const logNumbers = (num1, num2) => {
  console.log(arguments)
}

logNumbers(8, 24) // Uncaught ReferenceError: arguments is not defined

To access the arguments passed to an arrow function, you can use the rest parameter syntax (...).

Example:

const logNumbers = (...args) => {
  console.log(args)
}

logNumbers(8, 24)

Log results for the arguments from an arrow function

Using the rest parameter syntax (...), you get access to all the arguments passed to the logNumbers function.

Duplicate Named Parameters

Another difference between regular functions and arrow functions is how they handle duplicates in the named parameters.

Duplicate named parameters in regular functions

When a regular function has duplicate names in the parameters, the last parameter with the duplicate name will take precedence. Let's see an example:

function exampleFunction(a, b, a) {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Log results for named duplicate parameters

In the example above, the third argument overrides the value of the first argument because the last duplicate parameter is the one that takes precedence.

But in "strict mode", using a duplicate named parameter will result in a syntax error.

"use strict"

function exampleFunction(a, b, a) {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Strict mode doesn't allow using a parameter name more than once

Duplicate named parameters in arrow functions

Arrow functions don't allow for the same parameter name to be used more than once in the parameter list. Doing so will result in a syntax error.

Example:

const exampleFunction = (a, b, a) => {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Arrow functions do not allow duplicate parameter names

Function Hoisting

Hoisting in JavaScript is a behaviour where variables and functions are moved to the top of their containing scope during compilation, before the code is executed.

Hosting in regular functions

Regular functions are hoisted to the top. And you can access and call them even before they are declared.

regularFunction()

function regularFunction() {
  console.log("This is a regular function.")
}

Log result of calling the regular function before it's declared

The above is an example of calling a regular function before it is declared. And it works fine without throwing any error because of function hoisting.

Hoisting in arrow functions

Arrow functions, on the other hand, cannot be accessed before they are initialised.

arrowFunction()

const arrowFunction = () => {
  console.log("This is an arrow function.")
}

Log result of calling the arrow function before it's declared

Unlike regular functions, attempting to call an arrow function before it's declared will result in a reference error, as you can see from the output above.

How to Handle this Binding in Functions

Regular functions have their own this context. And this is determined dynamically depending on how you call or execute the function.

Arrow functions, on the other hand, do not have their own this context. Instead, they capture the this value from the surrounding lexical context in which the arrow function was created.

The following are two different scenarios using both regular functions and arrow functions. You'll see how the this context is determined.

1. Setting the this value during a simple function call

For regular functions, a simple function call sets the this value to the window object (or to undefined if you're using the "strict mode"):

function myRegularFunction() {
  console.log(this)
}

myRegularFunction()

A simple invocation of a regular function sets this to the window object

"use strict"

function myFunction() {
  console.log(this)
}

myFunction() // udefined

With arrow functions, a simple function call sets the this value to the surrounding context whether you're using strict mode or not. In the example below, the surrounding context is the global window object.

const myArrowFunction = () => {
  console.log(this);
};

myArrowFunction()

A simple invocation of an arrow function sets this to the window object

2. When invoking or calling a method on an object

When you invoke a method whose value is a regular function, the this value is set to the object on which the method is called. But when the value of the method is an arrow function, the this value is set to the global window object.

const myObject = {
  regularExample: function() {
    console.log("REGULAR: ", this)
  },

  arrowExample: () => {
    console.log("ARROW: ", this)
  }
}

myObject.regularExample()
myObject.arrowExample()

Log result for a method with a regular function and another with an arrow function

While the method with the regular function logs the object to the console, the one with the arrow function logs the global window object instead.

How to Use Functions as Constructors

For regular functions, you can create a new instance using the new keyword. And this sets the this value to the new instance you've created.

For arrow functions, you cannot use them as constructors. This is because the value of this in arrow functions is lexically scoped – that is, determined by the surrounding execution context. This behaviour does not make them suitable to be used as constructors.

Here's an example:

function RegularFuncBird(name, color) {
  this.name = name
  this.species = color
  console.log(this)
}

const ArrowFuncBird = (name, color) => {
  this.name = name
  this.color = color
  console.log(this)
}

new RegularFuncBird("Parrot", "blue") 
new ArrowFuncBird("Parrot", "blue")

Log results for attempting to use regular and arrow functions as constructors

The RegularFuncBird constructor works fine with the new keyword, but the ArrowFuncBird results in a type error.

So Which One Should You Use?

There is no straightforward answer to this. Whether you use a regular function or arrow function depends on the specific use case.

It's recommended to use regular function in any of the following cases:

• when you need to use a constructor with the new keyword

• when you need the this binding to be dynamically scoped

• when you want to use the arguments object

And you can use arrow functions in any of the following cases:

• when you want a more concise syntax for the function

• when you need to maintain the lexical scope of this

• for non-method functions (in most cases)

As you've learned from this article, both are valid ways of defining functions in JavaScript. Remember that choosing between them is not always a matter of personal preference. Rather, it's dependent on the kind of behaviour you expect from the function.

Thanks for reading and happy coding!

The DOM is a powerful tool that allows you to interact with and manipulate the elements on a web page. And this handbook will help you understanding and become confident in working with it.

You will begin by learning what the DOM is and what you can do with it. Then we'll dive into how to select, modyfy, and style DOM elements. You will also learn how to create new elements and add them to your web page.

The handbook also cover topics like how to traverse the DOM what DOM events are, and includes some project ideas for practice.

Let's get started!

Table of Contents

• What is the DOM?

  • What you can do with the DOM

• How to Select DOM Elements

  • getElementById

  • getElementsByClassName

  • getElementsByTagName

  • querySelector

  • querySelectorAll

• How to Change the Content of DOM Elements

  • The innerHTML Property

  • Security Risks with innerHTML

  • The innerText and textContent Properties

• How to Work with Attributes of DOM Elements

  • The getAttribute Method

  • The setAttribute Method

  • The removeAttribute Method

  • The hasAttribute Method

• How to Change the Styles on DOM Elements

  • Setting Styles with the .style Property

  • Setting Styles with Classes

• How to Traverse the DOM

  • Difference Between a Node and an Element

  • Selecting a Parent with parentNode vs parentElement

  • Selecting Elements with childNodes vs children

  • Selecting the First or Last Child/Element

  • Selecting a Sibling of Nodes in the DOM

• DOM Events and Event Listeners

  • Difference Between Event Listener and Event Handler

  • Three Ways to Register Events in JavaScript

  • Practice Challenge

  • Solution to Practice Challenge

  • The Event Object

  • Types of Events

• Event Flow in JavaScript

  • Event Bubbling

  • Event Capturing

  • The Event stopPropagation Method

• JS DOM Manipulation Projects Ideas

• Conclusion

What is the DOM?

DOM stands for Document Object Model. But what does that mean? Let's break it down.

The Document part refers to the webpage you see in the browser. Specifically, the HTML Document which handles the structure of the page's content. This includes the text, images, links, and other elements that make up the page.

Object means the elements like images, headers, and paragraphs are treated like objects. Each object has its properties (like id, class, style) and methods. Using these properties and methods, you can manipulate the elements.

The Model in DOM means it's a representation or copy of the HTML document as a hierarchical tree. This tree includes all the elements. And it captures the parent-child relationships between them.

The DOM is always identical to the HTML document. Browsers ensure that they are in sync. So if something changes in the HTML, the DOM changes too, and vice versa.

A graphical representation of the HTML DOM tree

At the top of the hierarchy is the Document object. It has only one child – the html element. The html element, also known as the root element, has two children, the head and body elements. And each of them also have their own children elements.

The parent-child relationship between the elements is what allows you to traverse or move between and select them. More on that later.

What You Can Do With the DOM

DOM manipulation allows developers to interact with the structure, style, and content of web pages. The following are some of the things you can do with the DOM:

• Change and remove existing elements in the DOM.

• Create and add new elements to the page.

• Change the styles for elements.

• Add event listeners to the elements to make them interactive.

How to Select DOM Elements

To do something with DOM elements, you first have to select or access the element in question. In this section, you will learn some common methods for selecting DOM elements.

Let's use the following phonebook markup to show how the various DOM selector methods work.

  <h1 id="page-title">Phonebook</h1>

  <p class="family">Marie</p>
  <p class="family">Jose</p>
  <p class="work">Anne</p>
  <p class="work">Joan</p>

The markup includes a header with an id of page-title and four paragraphs. The first two paragraphs both have a class of family, and the last two have a class of work.

1. getElementById

You use this method to select elements with an id attribute. Ids are unique identifiers. For example, if a header element has an id attribute with a value of "page-title", no other element on the page should also have an id with the same value.

This means anytime you use the getElementById method, you are going to select only one element from the DOM.

Let's look at an example:

The h1 header has an id value of page-title. Here is how you can select it using the getElementById method:

const titleElement = document.getElementById("page-title")
console.log(titleElement)

The example selects the header element and assigns it to the titleElement variable.

Result of accessing element with getElementById method.

If there's no element in the DOM with the given id, the getElementById() method will return null.

2. getElementsByClassName

You can use this method to select more than one object. This method takes in the value of a class attribute as an argument and selects all elements in the DOM that has the given class. Unlike ids, you can give the same class value for different HTML elements.

Here's an example:

const famContacts = document.getElementsByClassName("family")
console.log(famContacts)

This returns an HTML collection of all elements with the given class. The log statement will print the following in the console:

The getElementsByClassName() method returns an HTML collection.

Note: The HTML collection looks like an array, but it is not. You can access the elements using bracket notation just as you would with an array – but you cannot apply array methods like map, filter, and forEach on it.

console.log(famContacts[0])

This will get the first element in the HTML collection, which is the paragraph with the name Marie.

Result of accessing HTMLCollection element with bracket notation.

But what if you wanted to loop through all the elements in the famContacts HTML collection? You'd first need to convert the HTML collection into an array. Then you could use any of the array methods.

A simple way to create an array from the HTML collection is to use the spread operator, like this:

let famContactsArray = [...famContacts]

famContactsArray.forEach(element => console.log(element))

A result of logging all elements in the HTMLCollection.

Using the forEach method, you can access each of the items in the famContactsArray. The browser will throw an error if you try to apply an array method like map to the HTML collection without first creating an array from it.

Error message when you use array methods on an HTMLCollection.

3. getElementsByTagName

This method will select elements using their tag name. For example, getElementByTagName('p') will select all paragraphs on the page.

Like getElementsByClassName, this method also returns an HTML collection of the selected elements.

Here's an example:

const allContacts = document.getElementsByTagName('p')
console.log(allContacts)

An HTMLCollection containing all paragraph elements.

You can create an array from the HTML collection and use any of the array methods on it.

let allContactsArray = [...allContacts]

allContactsArray.map(element => console.log(element))

Result of using the map method on allContactsArray.

4. querySelector

You can use this method to select any HTML element in the DOM. It returns only one element: the first element that matches the given selector.

The querySelector method works like how CSS selectors work.

For example, what do you do when you want to select an element with an id? You use the hash # symbol. How about when you want to select elements with a class? You put a dot . in front of the class name.

Here's an example:

const firstWorkContact = document.querySelector('.work')
console.log(firstWorkContact)

An example of using the querySelector method.

The example above returns only the first element with a class of work and ignores the rest.

Let's see another example to show how querySelector works like CSS selectors. The following is a div element with four buttons:

<div>
    <button>First button</button>
    <button>Second button</button>
    <button>Third button</button>
    <button>Fourth button</button>
</div>

Assuming you wanted to select the third button, you could use querySelector like the one below. The code uses the CSS nth-child selector to get the third button inside the div.

const thirdBtn = document.querySelector('div button:nth-child(3)')
console.log(thirdBtn)

Result of selecting the third button with querySelector method.

But what if you want to select all four button elements and not only the first one? Then you could use the querySelectorAll method instead.

5. querySelectorAll

Like the querySelector method, querySelectorAll also selects HTML elements using CSS selectors. The difference is that it returns all elements that match the selector instead of returning only the first one.

Using the previous example, let's select all the buttons with querySelectorAll.

const allBtns = document.querySelectorAll('button')
console.log(allBtns)

The querySelectorAll method returns a NodeList of selected elements.

Note: querySelectorAll returns a NodeList. A NodeList is slightly different from an HTML collection. You don't need to convert it to an array to apply a method like forEach on it.

allBtns.forEach(btn => console.log(btn))

Result of using forEach method on the NodeList.

But you still cannot apply array methods like map, filter, and others on a NodeList. You will need to first create an array from it.

You can read this freeCodeCamp article on the difference between HTML collection and NodeList to learn more.

How to Change the Content of DOM Elements

So far you've learned about different ways to select DOM elements. But that is only the beginning. Now, let's see how you can manipulate the DOM to change the content of a webpage.

The first thing you need to do is to select the element. You can do that using any of the methods you learned from the previous section.

After selecting the element, there are several methods you can use to add or update the content.

The innerHTML Property

This is a method that allows you to read or update both the structure and content and structure of elements. Let's see an example of how you can use the innerHTML method.

The following is some markup of three paragraphs, each with an id.

  <p id="topic">JS array methods</p>
  <p id="first-method">map</p>
  <p id="second-method">filter</p>

Simple markup with three paragraph elements

You can read or get the content of the any of the paragraphs using innerHTML. For example, let's get the content of the first paragraph.

const topicElement = document.querySelector('#topic')
console.log(topicElement.innerHTML)

Log statement of the innerHTML of the topicElement

Now, let's say you want to update the topic from "JS array methods" to "JavaScript array methods". You can do that by assigning the new text to the innerHTML of the element.

const topicElement = document.querySelector('#topic')
topicElement.innerHTML = "JavaScript array methods"

The topic is updated from "JS Array methods" to "JavaScript array methods"

With innerHTML, you can change more than just the content. You can also change the HTML structure of the element. For example, if you want to make the word "JavaScript" bold, you could do this:

topicElement.innerHTML = "<b>JavaScript</b> array methods"

The word "JavaScript" is made bold using innerHTML

Security Risks With innerHTML

Using the innerHTML poses potential security risks. An example is cross-site scripting (XSS) attacks.

If the content you're inserting comes from user input or any untrusted source, be sure to validate and sanitize it before using innerHTML to prevent XSS attacks. You can use a library like DOMPurify to do this.

Also, if you are working with plain text content, consider using methods like innerText and textContent.

The innerText and textContent Properties

Both innerText and textContent ignore HTML tags and treat them as part of a string. You can use both methods to read or update the text of DOM elements.

A key difference between the two is in how they treat the text. Using innerText returns the text as it appears on the screen. And using textContent returns text as it appears in the markup. Let's see an example below.

<p>Key =<span style="display: none;">     ABC123<span></p>

A paragraph element with the some text and a hidden span element inside

The example includes a paragraph element. Inside the paragraph is a span that contains a key. The key does not appear on screen because its inline style is set to a display of none.

Now, let's select the paragraph and print both the innerText value and textContent value to see the difference.

const paragraph = document.querySelector('p');

console.log("innerText: ", paragraph.innerText)
console.log("textContent: ", paragraph.textContent)

Result of log statement for innerText and textContent.

Note how innerText returns the text as it appears on the screen (without the value of the key which is hidden with CSS). And note how textContent returns the text including hidden elements and whitespaces.

Let's see another example for adding text to an element. The following code includes two paragraphs, each with bold text and an empty span, as well as a horizontal line between them.

  <p>
    <b>innerText Example</b>
    <span id="inner-text"></span>
  </p>

  <hr>    

  <p>
    <b>textContent Example</b>
    <span id="textContent"></span>
  </p>

Example to demo the innerText and textContent properties

Now, let's select the two span elements and add the same text to them. This will help you better understand the difference between innerText and textContent.

const example1 = document.querySelector('#inner-text');
const example2 = document.querySelector('#text-content');

let address = `
  ABC Street,
  Spintex Road,
  Accra,
  Ghana.
`;

example1.innerText = address;
example2.textContent = address;

The code gives the same variable address to the two examples. The first uses innerText and the second uses textContent. See the results below:

Result of updating content with innerText and textContent.

Notice how innerText uses the line breaks but the textContent example doesn't.

Another key difference between the two methods is how they behave when used inside loops. innerText can be slower than textContent when dealing with bulk operations or frequent updates in a loop.

Read this freeCodeCamp article to learn more about the difference between innerHTML, innerText, and textContent.

How to Work with Attributes of DOM Elements

HTML attributes provide useful information about HTML elements. These attributes are always included in the opening tag of the element. An attribute is made up of a name and a value (though there are exceptions where only a name is present).

As the browser generates the DOM based on the HTML structure, it translates these attributes into dynamic properties of the DOM objects.

Here's an example:

Assume there's a button in the HTML document with the following attributes:

<button id="myBtn" type="submit">Click Here</button>

For this example, the browser will create an HTMLButtonElement object in the DOM. And the object will have properties matching the attributes.

• HTMLButtonElement.id with a value of myBtn.

• HTMLButtonElement.type with a value of submit.

To interact with and manipulate these attributes using JavaScript, you can use methods like getAttribute and setAttribute to directly access the properties.

The getAttribute Method

Like the name suggests, you can use this method to get the value of an existing attribute on an element.

It accepts an argument (the name of the attribute) and returns the value of the attribute. If the attribute you passed to it as an argument does not exist on the element, the method will return null.

Here's an example:

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')
console.log(imageElement.getAttribute('src'))

The getAttribute method is used to get the value of the src attribute.

Using the getAttribute method is the above example, you can get the value of the src attribute for the image element.

The setAttribute Method

This is used to set or change the attribute of an element. The method takes in two arguments. The first argument is the name of attribute you want to change, and the second is the new value you want to give the attribute.

Here's an example:

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('src'))
imageElement.setAttribute('src', 'new-image.jpg')
console.log("AFTER:", imageElement.getAttribute('src'))

The setAttribute method is used to update the value of the src attribute.

This code example logs the value of the src attribute before and after using setAttribute to change it from image.jpg to new-image.jpg.

When you pass an argument to the setAttribute method and that attribute doesn't exit on the element, it will create a new attribute. For example, you can add a height property to the image element like so:

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.setAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

An example of adding a new height attribute to the image element.

The first log statement returns null because the height attribute was non-existent. But after setting it with the setAttribute method, the second log statement returns the correct value of the height.

The removeAttribute Method

In the previous section, you learned how to add a new attribute using the setAttribute method. What if you wanted to remove an existing attribute?

You can use the removeAttribute method. You pass in the name of the attribute you want to remove from the element as arguments to the method.

Here's an example:

  <img src="image.jpg" alt="An example image" height="200">

Let's use the removeAttribute method to remove the height attribute from the image element.

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.removeAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

An example of using the removeAttribute method.

Before using removeAttribute, the first log statement prints the value of the height attribute, 200. But after using the removeAttribute method, the second log statement prints null, confirming the removal of the height attribute from the image element.

The hasAttribute Method

Another method for working with attributes in the DOM is the hasAttribute method. You can use this method to check whether or not an element has a specific attribute.

The hasAttribute method returns true if the specified attribute exists and returns false if it doesn't.

Here's an example:

<img src="image.jpg" alt="An example image" height="200">

Let's use the hasAttribute to check for the presence of height and width values on the image element.

const imageElement = document.querySelector('img')

console.log("HEIGHT", imageElement.hasAttribute('height'))
console.log("WIDTH", imageElement.hasAttribute('width'))

Example of using the hasAttribute method to check if an attribute exists.

The check for height returns true because it's an existing attribute while the check for width returns false because it doesn't exist.

How to Change the Styles on DOM Elements

There are two main ways of styling elements when working with the DOM in JavaScript. You can use the .style property or you can use classes. Each has its benefits and situations it's best situated for.

Setting Styles With the .style Property

You use the .style property when you want to make specific changes to a single element. The .style property allows you to set styles directly as inline styles for elements. This means it overrides the styles you have in your CSS stylesheet.

Using the .style property, you get access to all the individual CSS properties. See the demo below:

  <h1>Styling elements with JavaScript</h1>

const header = document.querySelector('h1')
console.log(header.style)

CSSStyleDeclarations for an h1 element logged to the console.

The console.log prints the CSS style declarations with all the CSS properties for that element.

Now, let's see an example of how to use the .style property.

  <h1>I love JavaScript</h1>

An example h1 header element

Here is an h1 header. Now, let's add style to it using the .style property.

const paragraph = document.querySelector('h1')

paragraph.style.color = 'white'
paragraph.style.backgroundColor = 'green'

The style property is used to add a background colour to the h1 element.

NOTE: Because this is JavaScript, you cannot use the hyphen if the CSS property name includes two or more words. For example, in CSS you would write background-color. But in your JavaScript code, you need to use camel case. So background-color becomes backgroundColor.

You can also delete a style on an element by setting the value of the property to an empty string.

element.style.propertyName = ""

Setting Styles with Classes

With classes, you can create styles once and apply it to different elements. This helps make your code become more maintainable.

The className Property

The className property represent the class attribute of a DOM element. And you can use it to get or set the value of the class attribute.

Here's an example:

<p class="food rice-dish">Jollof rice</p>

const jollofParagraph = document.querySelector('p')

console.log(jollofParagraph.className)

jollofParagraph.className = 'favorite'

console.log(jollofParagraph.className)

Example of changing the value of a class with the className property.

The className also reads or replace the current class. In the example above, the first log statement prints the original value of the class. And after updating the className, the second log statement prints the new value for class.

But there is a more flexible property. For example, what if instead of replacing the old class with the new class, you wanted to add another class? That's where the classList property comes in.

The classList Property

With the classList property, you can add and remove classes. You can also toggle classes, replace existing class values with new ones, and even check if the class contains a specific value.

Here's an example:

<p class="food">Jollof rice</p>

const jollofParagraph = document.querySelector('p')
console.log(jollofParagraph.classList)

Shows the current classList with only one value

Adding Classes with classList.add()

jollofParagraph.classList.add('fav', 'tasty')

console.log(jollofParagraph.classList)

Example of adding new classes with classList.add.

The code adds two new classes fav and tasty to the class list.

Removing Classes With classList.remove()

jollofParagraph.classList.remove('tasty')

console.log(jollofParagraph.classList)

Example of removing classes with classList.remove.

The code removes the class tasty from the class list.

Replacing Classes with classList.replace()

jollofParagraph.classList.replace('fav', 'favorite')

console.log(jollofParagraph.classList)

The code replaces the class fav with favorite

Example of replacing classes with classList.replace.

Check the Presence of a Class with classList.contains()

const isFavorite = jollofParagraph.classList.contains('favorite')
const isSoup = jollofParagraph.classList.contains('soup')

console.log("Contains favorite: ", isFavorite)
console.log("Contains soup: ", isSoup)

Example checking if a class exists with classList.contains.

The code checks if the class passed to it is contained in the class list.

It returns true if it is included in the class list (for example favorite) and false if it is not included in the class list (for example soup)

Toggling a Class with the classList.toggle()

When you use the toggle property, it first checks if the class exists. If it exists, it will remove it. And if it doesn't exist, it will add it.

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

Example of toggling a class value with classList.toggle.

The first time the toggle runs, favorite exists in the class list. So, the toggle removes it.

The second time the toggle runs, favorite doesn't exist so the toggle adds favorite to the class list.

The next time the toggle runs, favorite now exists again. So it removes it from the class list.

The toggle keeps adding or removing the value from the class list depending on whether it's present or absent.

How to Traverse the DOM

To traverse the DOM means to move between the different elements/nodes within the HTML document. This may includes selecting or accessing parent, child, or sibling elements (or nodes). You do this to get information or manipulate the document structure.

But before we get into how to traverse the DOM, you need to understand the difference between nodes and elements.

Difference Between a Node and an Element

Nodes are the building blocks of the DOM. They represents different components in the HTML structure.

Elements are a specific type of node, but not all nodes are elements. Other types of content like attributes of elements, text content, and comments within the code are nodes too. But they are not elements.

An element is a specific type of node that defines the structure of the document's content. Think of elements as the familiar HTML tags you use. Examples include <div>, <p>, and <ul>. Each element can consist of attributes, text content, and other nested elements.

Selecting a Parent with parentNode vs parentElement

When it comes to selecting the parent of a DOM element, you can use either the parentNode or parentElement. Both will get the parent of the element you pass to it.

From a practical viewpoint, the parent of an element or a node will always be an element. So it doesn't matter which one you use, you will get the right parent of the selected element.

Let's see an example of selecting the parent of an element.

  <div class="container">
    <p class="full-text">
        <i id="italics">Some italicized text</i>
    </p>
  </div>

const italicizedText = document.getElementById('italics')

console.log(italicizedText.parentNode)
console.log(italicizedText.parentNode.parentNode)

First, you select the element. Then, you chain the parentNode method to it to get the parent. You can also chain another parentNode property to get the parent of a parent element like the second log statement.

The screenshot below shows the output of the two log statements.

Example of selecting the parent of an element.

Selecting Elements with childNodes vs children

You can select the contents of an element using both the .childNodes and .children properties. But they work differently.

childNodes: returns a NodeList of all the child nodes within the selected elements. It will include elements and non-element nodes like text nodes, comment nodes, and so on.

.children: returns an HTML collection of only the child elements (element nodes) of the selected objects. It will not include any non-element nodes like texts or comments.

Let's see an example that shows the difference:

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

The code above has only 2 child elements (element nodes): the paragraph and the span. But there are other elements too – a text node and a comment:

const container = document.getElementById('container');

const containerChildNodes = container.childNodes;
const containerChildren = container.children;

console.log(containerChildNodes);
console.log(containerChildren);

An example of using the .childNodes property

The childNodes will return all the child nodes (both elements and non-elements). It also includes the whitespaces between elements as text nodes.

This can be confusing to work with. So, unless you have a good reason not to, you should stick with the .children property.

The children will only return the child elements (the paragraph and the span).

An example of using the .children property

Selecting the First or Last Child/Element

If you need to select only the first/last child or element, you can use these four properties.

• firstChild: Selects only the first child node of the parent element.

• lastChild: Selects only the last child node of the parent element.

• firstElementChild: Selects only the first child element of the parent.

• lastElementChild: Selects only the last child element of the parent.

Let's use the same example from the previous section to see how each works:

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

const container = document.getElementById('container');

console.log("FIRST CHILD:", container.firstChild)
console.log("LAST CHILD:", container.lastChild)
console.log("FIRST ELEMENT: ", container.firstElementChild)
console.log("LAST ELEMENT:", container.lastElementChild)

Example demo selecting first child/element and last child/element

Note how firstChild returns the first text node but the firstElementChild returns the first paragraph instead. This means it ignored the text node which comes before the paragraph.

And also note how the lastChild returns a text node – even though from the markup, it looks like there's nothing after the span. That is because the lastChild property considers the linebreak/whitespace between the closing tag of the span and the closing tag of the div elements as a node.

That's why it's generally safer to stick to firstElementChild and lastElementChild.

Selecting a Sibling of Nodes in the DOM

You've learned how to select a parent or a child of an element. You can also select a sibling of an element. You do that using the following properties:

• nextSibling: Selects the next node within the same parent element.

• nextElementSibling: Selects the next element, and ignores any non-element nodes.

• previousSibling: Selects the previous node within the same parent element.

• previousElementSibling: Selects the previous element, and ignores any non-element nodes.

Here's an example:

  <div>
    <p id="one">First paragraph</p>
    text node
    <p id="two">Second paragraph</p>
    another text node
    <p id="three">Third paragraph</p>
    <p id="four">Fourth paragraph</p>
  </div>

const paragraphTwo = document.getElementById('two')

console.log("nextSibling: ", paragraphTwo.nextSibling)
console.log("nextElementSibling: ", paragraphTwo.nextElementSibling)
console.log("previousSibling: ", paragraphTwo.previousSibling)
console.log("previousElementSibling: ", paragraphTwo.previousElementSibling)

Examples of selecting siblings of a node.

nextSibling and previousSibling select the text nodes because they consider all nodes within the parent. While nextElementSibling and previousElementSibling select only the paragraph elements because they ignore non-element nodes like text.

DOM Events and Event Listeners

DOM events are actions that take place in the browser. These events are what allows you to make websites interactive.

Some DOM events are user-initiated like clicking, moving the mouse, or typing on the keyboard. Others are browser-initiated like when a page finishes loading.

Difference Between Event Listener and Event Handler

An event listener is a method that lets you know when an event has taken place. It allows you to "listen" or keep an eye out for DOM events. That way, when an event happens, you can do something.

An event handler is a response to the event. It's a function that runs when an event occurs.

For example, you can attach an event listener to a button that lets you know when a user clicks that button. Then you can write an event handler (a function) that prints something on screen anytime a click event occurs.

In this case, the event listener is what informs your app when a click occurs and then trigger a response. And the response (the function that runs when the click occurs) is an example of an event handler.

Three Ways to Register Events in JavaScript

The following are three different ways you can listen to and respond to DOM events using JavaScript.

• Using inline event handlers: This is when you add the event listener as an attribute to HTML elements. In the early days of JavaScript, this was the only way to use events. See the example below:

// Example of using an inline event handler

<button onclick="alert('Hello')">Click me!</button>

• Using on-event handlers: You use this when an element has only one event handler. When you add more than one event handler using this method, only the last event handler will run, as it will override others before it.

<!-- An example of using an on-event handler -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')

  myButton.onclick = function() {
    console.log("Run first handler")
  }

  myButton.onclick = function() {
    console.log("Run second handler")
  }
</script>

Only the second event handler is executed.

As you can see from the result in the console, the browser runs the code for only the second event handler.

• Using the addEventListener method: This method allows you to attach more than one event handlers to an element. And it will execute them in the order in which they were added.

As a general rule, you should stick with the addEventListener, unless you have a compelling reason not to.

The addEventListener method takes two arguments. The first is the event you want to listen to, and the second is the event handler which is the function you want to run when the event occurs.

<!-- An example of using the addEventListener method -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')

  myButton.addEventListener('click', function() {
    console.log("Run first handler")
  })

  myButton.addEventListener('click', function() {
    console.log("Run second handler")
  })
</script>

The addEventListener method executes both event handlers.

Practice Challenge

Here is a challenge for you before you move on. Try solving it on your own before you take a look at the solution.

Consider the HTML and CSS code below.

The challenge includes two elements. A #gift-box div and a #click-btn button. The gift box is hidden with the .hide class.

Your task is write JavaScript code that listens to a click event on the button, and display the hidden box when the user clicks the button.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

      <div id="gift-box" class="hide">🎁</div>
      <button id="click-btn">Show the box</button>

  </body>
</html>

.hide {
  display: none;
}

#gift-box {
  font-size: 5em;
}

<a href="https://stackblitz.com/edit/js-cywa91?file=index.html,style.css,index.js" target="_blank"

Solve the challenge on StackBlitz

Demo gif for the final solution of the challenge

Solution to Practice Challenge

Congratulations if you were able to solve the challenge. If you were not, that's okay. The solution and explanation is provided below:

const giftBoxElement = document.getElementById('gift-box')
const buttonElement = document.getElementById('click-btn')

buttonElement.addEventListener('click', function() {
  giftBoxElement.classList.remove('hide')
})

To solve this challenge, first you need to select both the #gift-box and #click-btn element.

Then, you add an event listener to the button. As mentioned earlier, the addEventListener method takes in two arguments.

In this case, the first argument is the 'click' event, and the second argument is a function.

The goal is to display the box. The box has a class hide which sets display to none in the CSS. One way to display the box using JavaScript is to remove hide from the classList.

The Event Object

This is a JavaScript object the browser passes as an argument to the event handler function anytime an event occurs. The object includes some useful properties and methods like the following:

• type: the type of event that occurred (like click, mouseover, keydown, and so on)

• target: the element on which the event occurred

• clientX and clientY: the horizontal and vertical coordinates of the mouse pointer at the time the event occurred.

• preventDefault(): prevents default actions associated with the events like preventing a form submission on the submit event.

• stopPropagation(): prevents the event from propagating through the DOM. More on that later.

You can see a full list of the properties and methods on the MDN web docs.

Types of Events

There are many different kinds of DOM events the browsers lets you listen to. The following are few of the common ones.

Mouse events:

• click: when the element is clicked.

• dbclick: when the element is double clicked.

• mouseover: when the mouse pointer enters the element.

• mouseleave: when the mouse pointer leaves the element.

• mousedown: when the mouse is pressed down over an element.

• mouseup: when the mouse is released over an element.

Keyboard events:

• keydown: when a key on the keyboard is pressed down.

• keyup: when a key on the keyboard is released.

• keypress: when a key is pressed and shows the actual key that was pressed. Note that this event is not fired for all keys, especially non-printable keys.

Form events:

• submit: when a form is submitted.

• input: when the value of an input field changes.

• change: when the value of a form element changes and loses focus.

Window events:

• load: when the browser finishes loading the page.

• unload: when the user leaves the page.

• resize: when the browser window is resized.

• scroll: when the user scrolls through the document.

You can see a comprehensive list of DOM events here.

Event Flow in JavaScript

When a JavaScript event occurs, the event is propagated or travels either from the target where the event occurred to the outermost element in the DOM or vice versa.

For example, let's say you click a button on a page. By clicking the button, you've also clicked its parent element and any element the button is inside within the DOM hierarchy.

Event Bubbling

This is when the event is first registered on the target (or specified element) on which the event happened, and then registered outwards to the parent and onwards to the outermost element.

Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

The example here contains a button #btn. With event bubbling, when an event occurs (say a click) on the button, the event goes through the following sequence.

Event bubbling in DOM Manipulation: from button to div#inner to div#outer to body to HTML to document.

The event starts to bubble up from the target element back to the outermost ancestor.

Event Capturing

Event capturing is the opposite of event bubbling. The event starts from the outermost ancestor element and travels down the DOM tree to the target element.

Event capturing in DOM Manipulation

During the capturing phase, event listeners attached to elements are executed in the order of the hierarchy from the topmost ancestor to the target element.

In case you're wondering why this matters, let's see a practical example using the same HTML markup example from above:

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

Let's add event listeners to the button, the #inner div, and the #outer div:

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

By default, browsers use the event bubbling approach. So there is no need to add any argument to the event listener. This is the order in which the event handlers will run in response to a click on the button:

1. button

2. #innerDiv

3. #outerDiv

Events are executed from the element to the outermost element in the bubbling phase.

To use the event capturing model, you need to pass a third argument true to the event listener.

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
}, true)

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
}, true)

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
}, true)

The order for executing the event handlers will now run in the opposite direction, like this:

1. #outerDiv

2. #innerDiv

3. button

Events are executed from the outermost element to the element in the capturing phase.

The Event stopPropagation() Method

You've learned about how the event bubbling registers an event on an element and continues registering the event all the way to the outermost ancestor element. You've also seen how event capturing does the opposite.

But what if you don't want the event to register on all the ancestors? That's where the stopPropagation method comes in. You can use this method to prevent the event from propagating through the whole DOM.

Let's use the stopPropagation method on the same example from before:

button.addEventListener('click', function(event) {
  event.stopPropagation()
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

The stopPropagation method allows the execution of only the first event listener.

Now, only the event handler on the button is fired. The ones on the innerDiv and outerDiv are not because of the stopPropagation method on the button.

Also, note that to get the event object, you need to pass it as an argument to the event handler function.

JS DOM Manipulation Project Ideas

Building projects is an excellent way to improve your understanding of coding concepts. So roll up your sleeves and get ready to work!

Here are five JS DOM manipulation project ideas to help you practice and solidify your skills.

Toggle Switch

Design a toggle switch that changes its state (on/off) when clicked. Update the DOM (for example with a background color) that reflects the current state of the toggle switch.

Random Color Picker

Create a simple app where users can click a button to generate a random color. Include a shape on the screen that gets filled with the chosen color. Also display the color code on screen.

Countdown Timer

Build a timer that starts from a specified time. The app updates in real time and shows the remaining time on the screen.

Word Counter

Develop an app that provides an input field or text area for the user to type. Display the number of words in real time on the screen as the user types.

An Interactive To-Do List

Create an app that allows users to add, delete, or edit tasks. You can have fun with this one and add as many advanced features as you want. For example, adding features like marking tasks as completed, filtering tasks, or sorting them.

Conclusion

If you've come this far, then you now have a good understanding of JavaScript DOM manipulation. With practice, you'll be confident enough to tackle advanced projects that require knowledge of these DOM manipulation concepts.

A good foundation of Vanilla JS DOM manipulation concepts will also come in handy when picking JavaScript libraries/frameworks like React, Angular, Vue, Svelte, and so on.

Thank you for reading, and happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.