React

React is a powerful and popular JavaScript library used for creating user interfaces. Its component-based approach makes it easy to create complex, dynamic web applications. With React, you can create everything from a simple web page to a complex web application.

One of the most common components of web applications is a calendar. Calendars are used to display events, meetings, and other important information. Fortunately, creating a custom calendar in React is not that difficult. In this article, we will go over how to set up and build a custom calendar in React.

![react calendar](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover1.jpg)
## What is React-Calendar?

React-Calendar is a popular open source library for creating custom calendars in React. It is lightweight, customizable, and provides a lot of features out of the box. It is used by many large companies, including Facebook, Netflix, and Airbnb.

## Setting Up The React Project

Before we can start building our custom calendar, we first need to set up a React project. To do this, we will be using the [Create React App](https:&#x2F;&#x2F;create-react-app.dev&#x2F;) tool.

First, let&#x27;s create a new project using the following command:

&#96;&#96;&#96;
npx create-react-app my-calendar
&#96;&#96;&#96;

Once the project is created, we can install the React-Calendar library using the following command:

&#96;&#96;&#96;
npm install react-calendar
&#96;&#96;&#96;

## How to Build a Custom Calendar in React

Now that we have our project set up, let&#x27;s start building our custom calendar. We will start by creating a basic calendar component.

First, let&#x27;s create a new file called &#96;Calendar.js&#96; in the &#96;src&#96; folder of our project.

In this file, we can start by importing the necessary libraries and components:

&#96;&#96;&#96;js
import React, { useState } from &quot;react&quot;;
import Calendar from &quot;react-calendar&quot;;
&#96;&#96;&#96;

Next, let&#x27;s create our &#96;Calendar&#96; component. We will use the &#96;useState&#96; hook to initialize the &#96;date&#96; state:

&#96;&#96;&#96;js
function Calendar() {
  const [date, setDate] = useState(new Date());

  return (
    &lt;div&gt;
      &lt;Calendar
        onChange={date =&gt; setDate(date)}
        value={date}
      &#x2F;&gt;
    &lt;&#x2F;div&gt;
  );
}
&#96;&#96;&#96;

In the above code, we are using the &#96;Calendar&#96; component from the &#96;react-calendar&#96; library. We are also passing the &#96;date&#96; state as the &#96;value&#96; prop, and setting the &#96;onChange&#96; prop to a function that updates the &#96;date&#96; state when the user selects a new date.

Now, we can render our &#96;Calendar&#96; component in our App component:

&#96;&#96;&#96;js
function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;Calendar &#x2F;&gt;
    &lt;&#x2F;div&gt;
  );
}
&#96;&#96;&#96;

If we run our application, we should see a basic calendar with the current date selected.

## How to Style a Custom Calendar in React

Now that we have our basic calendar set up, let&#x27;s add some styling to it. React-Calendar provides a range of built-in styling options to choose from.

For example, we can add a custom background color to the calendar with the &#96;tileClassName&#96; prop:

&#96;&#96;&#96;js
&lt;Calendar
  onChange={date =&gt; setDate(date)}
  value={date}
  tileClassName=&quot;custom-background&quot;
&#x2F;&gt;
&#96;&#96;&#96;

We can then define our custom background color in the &#96;App.css&#96; file:

&#96;&#96;&#96;css
.custom-background {
  background-color: #F7F7F7;
}
&#96;&#96;&#96;

We can also add custom styles to the selected date with the &#96;tileContent&#96; prop:

&#96;&#96;&#96;js
&lt;Calendar
  onChange={date =&gt; setDate(date)}
  value={date}
  tileContent={({ date, view }) =&gt; (
    &lt;div className=&quot;custom-date-style&quot;&gt;
      {date.getDate()}
    &lt;&#x2F;div&gt;
  )}
&#x2F;&gt;
&#96;&#96;&#96;

And then define the custom style in the &#96;App.css&#96; file:

&#96;&#96;&#96;css
.custom-date-style {
  color: #FFFFFF;
  background-color: #3F51B5;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
&#96;&#96;&#96;

## Various Calendar Examples in React

Now that we know how to set up and style our custom calendar, let&#x27;s look at some examples of what we can do with it.

### Displaying Events

We can use the &#96;onClickDay&#96; prop to display events when a user clicks on a day:

&#96;&#96;&#96;js
&lt;Calendar
  onChange={date =&gt; setDate(date)}
  value={date}
  onClickDay={date =&gt; alert(&#96;You have an event on ${date.toLocaleDateString()}&#96;)}
&#x2F;&gt;
&#96;&#96;&#96;

### Selecting Multiple Dates

We can also use the &#96;selectRange&#96; prop to allow users to select multiple dates:

&#96;&#96;&#96;js
&lt;Calendar
  onChange={date =&gt; setDate(date)}
  value={date}
  selectRange={true}
&#x2F;&gt;
&#96;&#96;&#96;

### Customizing The Date Format

Finally, we can use the &#96;formatDate&#96; prop to customize the date format that is displayed in the calendar:

&#96;&#96;&#96;js
&lt;Calendar
  onChange={date =&gt; setDate(date)}
  value={date}
  formatDate={date =&gt; date.toLocaleDateString(&quot;en-US&quot;, { month: &quot;long&quot;, day: &quot;numeric&quot;, year: &quot;numeric&quot; })}
&#x2F;&gt;
&#96;&#96;&#96;

## Conclusion

In this article, we went over how to set up and build a custom calendar in React. We discussed how to use the React-Calendar library to create a basic calendar, and how to add styling and various features to it. We also looked at some examples of what we can do with a custom calendar in React.

Creating custom calendars in React is a great way to add functionality and visual appeal to your web applications. With the help of the React-Calendar library, it is relatively easy to create complex and powerful calendars.

Building a Custom Calendar in React

You may utilize state variables in functional components with the help of the useState Hook. This function takes in the given beginning state as an argument and returns either the current state value or another function that may be used to change it.

This article will show you how to utilize the useState Hook in React, which is similar to this.state and this.setState in other languages. The following topics will be discussed in length:

* React&#x27;s Class Components and Functional Parts
* Explain the function of the React.useState hook.
* Preserving State in React
* Toggle Hooks: Modify the current state
* The useState hook allows an object to be used as a state variable.
* This section will show you how to use React&#x27;s Hooks to modify the state of an object within another object.
* An item with several states or multiple states with a single object
* Guideline for utilizing useState
* The application
* Shortening Hook

The video instruction below is a great resource for anybody who is new to React Hooks and would need some visual assistance getting started.

## **React&#x27;s Class Components and Functional Parts**

In React, you&#x27;ll find two distinct kinds of parts: class components and functional components.

A class component is an ES6 class that derives from the React framework.

both components and their lifecycles may have states and methods:

&#96;&#96;&#96;javascript
class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ‘’
};
}
componentDidMount() {
&#x2F;* ... *&#x2F;
}
render() {
return &lt;div&gt;{this.state.message}&lt;&#x2F;div&gt;;
}
}
&#96;&#96;&#96;

&#x5C;
Functions that take in data as properties and return valid JSX are called functional components.

&#96;&#96;&#96;javascript
function Message(props) {
return &lt;div&gt;{props.message}&lt;&#x2F;div&gt;
}
&#x2F;&#x2F; Or as an arrow function
const Message = (props) =&gt;  &lt;div&gt;{props.message}&lt;&#x2F;div&gt;
&#96;&#96;&#96;

This shows that there are no state or lifecycle methods. The usage of Hooks was formerly unavailable, however this has changed as with React 16.8.

Hooks in React are functions that instrument the lifecycle methods of classes and add state variables to functional components. In most cases, they emerge after some period of use.

## **In what ways is the React.useState Hook useful?**

As was previously said, useState lets you include state into functional building blocks. Please respond. By using useState within a function component, a new piece of state may be created that is specific to that component.

In contrast to classes, where state is always an object, Hooks allow for state of any kind. An individual value of any conceivable kind is stored in each state item, which may be an object, an array, a boolean, or anything else.

So, when is the best time to utilize the useState Hook? Managing the state of locally deployed components is a strong suit, but for bigger projects, other state management solutions may be necessary.

## **Preserving State in React**

React provides a branded export called useState. The following is an example of its use in a sentence:

&#96;&#96;&#96;javascript
React.useState
&#96;&#96;&#96;

Or to import it just write useState:

&#96;&#96;&#96;javascript
import React, { useState } from &#x27;react&#x27;;
&#96;&#96;&#96;

But unlike the state object that you can declare in a class, which allows you to declare more than one state variable, like this:

&#96;&#96;&#96;javascript
import React from &#x27;react&#x27;;
class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
message: &#x27;&#x27;,
list: [],
};
}
&#x2F;* ... *&#x2F;
}
&#96;&#96;&#96;

A single state variable (of any type) may be declared using the useState Hook.

&#96;&#96;&#96;javascript
import React, { useState } from &#x27;react&#x27;;
const Message= () =&gt; {
const messageState = useState( &#x27;&#x27; );
const listState = useState( [] );
}
&#96;&#96;&#96;

As an argument, useState requires the starting value of the state variable.

If the initial state is the result of a costly operation, you may either supply it directly like in the preceding example, or you can use a function to lazily initialize the variable:

&#96;&#96;&#96;javascript
const Message= () =&gt; {
const messageState = useState( () =&gt; expensiveComputation() );
&#x2F;* ... *&#x2F;
}
&#96;&#96;&#96;

Only on the first render (or only if it&#x27;s a function) will the initial value be set.

The parameter of the useState Hook is disregarded in future renders (due to a change in the state of the component or a parent component), and the current value is obtained instead.

Keep this in mind if, for instance, you need to modify the component&#x27;s state in response to newly received properties:

&#96;&#96;&#96;javascript
const Message= (props) =&gt; {
const messageState = useState( props.message );
&#x2F;* ... *&#x2F;
}
&#96;&#96;&#96;

The problem with relying only on useState is that its argument is only used once, and not whenever the property changes (look here for the right way to do this).

UseState, however, does not just return a variable as the examples above suggest.

It yields a two-element array, the first of which is the state variable, and the second of which is a function that may be used to change the value of the variable:

&#96;&#96;&#96;javascript
const Message= () =&gt; {
const messageState = useState( &#x27;&#x27; );
const message = messageState[0]; &#x2F;&#x2F; Contains &#x27;&#x27;
const setMessage = messageState[1]; &#x2F;&#x2F; It’s a function
}
&#96;&#96;&#96;

*Usually, you’ll use array destructuring to simplify the code shown above:*

&#96;&#96;&#96;javascript
const Message= () =&gt; {
const [message, setMessage]= useState( &#x27;&#x27; );
}
&#96;&#96;&#96;

*This way, you can use the state variable in the functional component like any other variable:*

&#96;&#96;&#96;javascript
const Message = () =&gt; {
const [message, setMessage] = useState( &#x27;&#x27; );
return (
&lt;p&gt;
&lt;strong&gt;{message}&lt;&#x2F;strong&gt;
&lt;&#x2F;p&gt;
);
};
&#96;&#96;&#96;

When called, useState should not return an array.

The reason being that arrays are more versatile and user-friendly than objects.

Easily assigning unique names to fields would be difficult if the method always returned an object with the same predefined set of properties.

Assuming the object&#x27;s properties are state and setState, you&#x27;d need to perform something like this:

&#96;&#96;&#96;javascript
&#x2F;&#x2F; Without using object destructuring
const messageState = useState( &#x27;&#x27; );
const message = messageState.state;
const setMessage = messageState
&#x2F;&#x2F; Using object destructuring
const { state: message, setState: setMessage } = useState( &#x27;&#x27; );
const { state: list, setState: setList } = useState( [] );
&#96;&#96;&#96;

## **Change the state using react hooks**

Use the method that accepts a new value to update the state variable that is the second item returned by useState.

The state variable is automatically updated whenever the text in the following box is modified.

&#96;&#96;&#96;javascript
const Message = () =&gt; {
const [message, setMessage] = useState( &#x27;&#x27; );
return (
&lt;div&gt;
&lt;input
type=&quot;text&quot;
value={message}
placeholder=&quot;Enter a message&quot;
onChange={e =&gt; setMessage(e.target.value)}
&#x2F;&gt;
&lt;p&gt;
&lt;strong&gt;{message}&lt;&#x2F;strong&gt;
&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
);
};
&#96;&#96;&#96;

This update function, however, does not instantaneously reflect the new value.

Instead, it puts the process of updating into a queue. The function&#x27;s most recent value will be returned once the component is re-rendered, regardless of the value passed into useState.

If you want to modify the state based on the previous value, you need to provide a function that takes in the old value and returns the new one.

&#96;&#96;&#96;javascript
const Message = () =&gt; {
const [message, setMessage] = useState( &#x27;&#x27; );
return (
&lt;div&gt;
&lt;input
type=&quot;text&quot;
value={message}
placeholder=&quot;Enter some letters&quot;
onChange={e =&gt; {
const val = e.target.value;
setMessage(prev =&gt; prev + val)
} }
&#x2F;&gt;
&lt;p&gt;
&lt;strong&gt;{message}&lt;&#x2F;strong&gt;
&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
);
};
&#96;&#96;&#96;

## **The useState hook allows an object to be used as a state variable.**

When working with objects, there are two aspects of changes that must be remembered:

* Value of invariability
* In addition, unlike setState(), the setter given by useState does not perform an object merging when used in conjunction with class components.

Regarding the first issue, React will not force a re-render if the updated state has the same value as the current state (React utilizes Object.is for comparison).

It&#x27;s simple to make the following error while dealing with objects:

&#96;&#96;&#96;javascript
const Message = () =&gt; {
const [messageObj, setMessage] = useState({ message: &#x27;&#x27; });
return (
&lt;div&gt;
&lt;input
type=&quot;text&quot;
value={messageObj.message}
placeholder=&quot;Enter a message&quot;
onChange={e =&gt; {
messageObj.message = e.target.value;
setMessage(messageObj); &#x2F;&#x2F; Doesn&#x27;t work
}}
&#x2F;&gt;
&lt;p&gt;
&lt;strong&gt;{messageObj.message}&lt;&#x2F;strong&gt;
&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
);
};
&#96;&#96;&#96;

In contrast to other examples, the one above modifies the current state object. That&#x27;s the same thing for React to use.

For this to function, a new thing must be made:

&#96;&#96;&#96;javascript
onChange={e =&gt; {
const newMessageObj = { message: e.target.value };
setMessage(newMessageObj); &#x2F;&#x2F; Now it works
}}
&#96;&#96;&#96;

The method supplied by useState does not automatically merge update objects when updating a state variable, unlike this.setState in a class component.

In the same vein as before, if we give the message object an additional attribute called id:

&#96;&#96;&#96;javascript
const Message = () =&gt; {
const [messageObj, setMessage] = useState({ message: &#x27;&#x27;, id: 1 });
return (
&lt;div&gt;
&lt;input
type=&quot;text&quot;
value={messageObj.message}
placeholder=&quot;Enter a message&quot;
onChange={e =&gt; {
const newMessageObj = { message: e.target.value };
setMessage(newMessageObj);
}}
&#x2F;&gt;
&lt;p&gt;
&lt;strong&gt;{messageObj.id} : {messageObj.message}&lt;&#x2F;strong&gt;
&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
);
};
&#96;&#96;&#96;

## **Conclusion**

For state variables to be used in functional components, useState may be called as a Hook (function). This function takes in the given beginning state as an argument and returns either the current state value or another function that may be used to change it.

What Is useState() in React - Complete Guide

React is a JavaScript library for building user interfaces. It&#x27;s used to create components, handle state and props, and interact with other libraries and APIs. With React, you can create simple or complex user interfaces that are easy to maintain and update. In this tutorial, we&#x27;ll be building a basic todo app in React. We&#x27;ll cover setting up the project, adding, deleting, and editing todo items, listing all todo items, marking a todo item as complete, and styling the todo app.

![react todo app](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover16.jpg)
## Setting Up The React Project

Before we can start building our todo app, we need to set up our React project. We&#x27;ll be using [Create React App](https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;create-react-app) to set up our project. Create React App is a tool that will generate a basic React project structure for us, so we don&#x27;t have to worry about configuring webpack, Babel, or any other tools.

First, open a terminal window and create a new directory for our project:

&#96;&#96;&#96;
$ mkdir todo-app
$ cd todo-app
&#96;&#96;&#96;

Next, we&#x27;ll use Create React App to generate the project structure:

&#96;&#96;&#96;
$ npx create-react-app .
&#96;&#96;&#96;

This will create the React project structure in the current directory. Once the project has been created, we can start the development server:

&#96;&#96;&#96;
$ npm start
&#96;&#96;&#96;

This will start the development server and open a browser window with the React application. Now that we have the project set up, we can start building our todo app.

## Adding a Todo Item

The first thing we need to do is add a way for users to add todo items to our app. We&#x27;ll start by creating a &#96;TodoForm&#96; component that will handle this functionality. We&#x27;ll use a &#96;Form&#96; component from [React Bootstrap](https:&#x2F;&#x2F;react-bootstrap.github.io&#x2F;) to create our form.

&#96;&#96;&#96;jsx
import React, { useState } from &#x27;react&#x27;;
import { Form, Button } from &#x27;react-bootstrap&#x27;;

const TodoForm = () =&gt; {
  const [todo, setTodo] = useState(&#x27;&#x27;);

  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    &#x2F;&#x2F; Add todo item to list
    setTodo(&#x27;&#x27;);
  };

  return (
    &lt;Form onSubmit={handleSubmit}&gt;
      &lt;Form.Group controlId=&quot;formTodo&quot;&gt;
        &lt;Form.Control
          type=&quot;text&quot;
          placeholder=&quot;Enter a todo item&quot;
          value={todo}
          onChange={(e) =&gt; setTodo(e.target.value)}
        &#x2F;&gt;
      &lt;&#x2F;Form.Group&gt;
      &lt;Button type=&quot;submit&quot;&gt;Add Todo Item&lt;&#x2F;Button&gt;
    &lt;&#x2F;Form&gt;
  );
};

export default TodoForm;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a simple form with a text input and a submit button. We&#x27;re using the &#96;useState&#96; hook to keep track of the todo item that the user has entered. When the user submits the form, we&#x27;ll call the &#96;handleSubmit&#96; function, which will add the todo item to the list.

## Deleting a Todo Item

Now that we have a way for users to add todo items to our app, we need to add a way to delete them. We&#x27;ll create a &#96;TodoList&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { ListGroup, Button } from &#x27;react-bootstrap&#x27;;

const TodoList = ({ todos, onDeleteTodo }) =&gt; {
  return (
    &lt;ListGroup&gt;
      {todos.map((todo) =&gt; (
        &lt;ListGroup.Item key={todo.id}&gt;
          {todo.title}
          &lt;Button
            variant=&quot;danger&quot;
            className=&quot;float-right&quot;
            onClick={() =&gt; onDeleteTodo(todo.id)}
          &gt;
            Delete
          &lt;&#x2F;Button&gt;
        &lt;&#x2F;ListGroup.Item&gt;
      ))}
    &lt;&#x2F;ListGroup&gt;
  );
};

export default TodoList;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a &#96;ListGroup&#96; component from React Bootstrap that will list out all of the todo items. We&#x27;ve also added a delete button next to each item that will call the &#96;onDeleteTodo&#96; function when clicked. This function will remove the item from the list.

## Editing a Todo Item

Next, we&#x27;ll add a way for users to edit todo items. We&#x27;ll create an &#96;EditTodoForm&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React, { useState } from &#x27;react&#x27;;
import { Form, Button } from &#x27;react-bootstrap&#x27;;

const EditTodoForm = ({ todo, onEditTodo }) =&gt; {
  const [title, setTitle] = useState(todo.title);

  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    onEditTodo(todo.id, title);
  };

  return (
    &lt;Form onSubmit={handleSubmit}&gt;
      &lt;Form.Group controlId=&quot;formTodo&quot;&gt;
        &lt;Form.Control
          type=&quot;text&quot;
          placeholder=&quot;Enter a todo item&quot;
          value={title}
          onChange={(e) =&gt; setTitle(e.target.value)}
        &#x2F;&gt;
      &lt;&#x2F;Form.Group&gt;
      &lt;Button type=&quot;submit&quot;&gt;Edit Todo Item&lt;&#x2F;Button&gt;
    &lt;&#x2F;Form&gt;
  );
};

export default EditTodoForm;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a form with a text input and a submit button. We&#x27;re using the &#96;useState&#96; hook to keep track of the todo item that the user has entered. When the user submits the form, we&#x27;ll call the &#96;onEditTodo&#96; function, which will update the todo item in the list.

## Listing All Todo Items

Now that we have a way to add, delete, and edit todo items, we need to list them all out. We&#x27;ll create a &#96;TodoList&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { ListGroup } from &#x27;react-bootstrap&#x27;;

const TodoList = ({ todos }) =&gt; {
  return (
    &lt;ListGroup&gt;
      {todos.map((todo) =&gt; (
        &lt;ListGroup.Item key={todo.id}&gt;{todo.title}&lt;&#x2F;ListGroup.Item&gt;
      ))}
    &lt;&#x2F;ListGroup&gt;
  );
};

export default TodoList;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a &#96;ListGroup&#96; component from React Bootstrap that will list out all of the todo items.

## Marking a Todo Item as Complete

Next, we&#x27;ll add a way for users to mark a todo item as complete. We&#x27;ll create a &#96;TodoList&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { ListGroup, Button } from &#x27;react-bootstrap&#x27;;

const TodoList = ({ todos, onCompleteTodo }) =&gt; {
  return (
    &lt;ListGroup&gt;
      {todos.map((todo) =&gt; (
        &lt;ListGroup.Item key={todo.id}&gt;
          {todo.title}
          &lt;Button
            variant=&quot;success&quot;
            className=&quot;float-right&quot;
            onClick={() =&gt; onCompleteTodo(todo.id)}
          &gt;
            Complete
          &lt;&#x2F;Button&gt;
        &lt;&#x2F;ListGroup.Item&gt;
      ))}
    &lt;&#x2F;ListGroup&gt;
  );
};

export default TodoList;
&#96;&#96;&#96;

In the above code, we&#x27;ve added a complete button next to each item that will call the &#96;onCompleteTodo&#96; function when clicked. This function will mark the item as complete.

## Styling the Todo App

Finally, we&#x27;ll add some basic styling to our todo app. We&#x27;ll use [Bootstrap](https:&#x2F;&#x2F;getbootstrap.com&#x2F;) to make our app look more presentable. We&#x27;ll also use [React Bootstrap](https:&#x2F;&#x2F;react-bootstrap.github.io&#x2F;) to make it easier to use Bootstrap components in our React app.

First, we&#x27;ll install the React Bootstrap package:

&#96;&#96;&#96;
$ npm install react-bootstrap
&#96;&#96;&#96;

Next, we&#x27;ll import the Bootstrap CSS file into our &#96;index.js&#96; file:

&#96;&#96;&#96;js
import &#x27;bootstrap&#x2F;dist&#x2F;css&#x2F;bootstrap.min.css&#x27;;
&#96;&#96;&#96;

Now, we can use the React Bootstrap components to style our app. For example, we can add a &#96;Container&#96; component to our &#96;App&#96; component to give our app a nice centered layout:

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { Container } from &#x27;react-bootstrap&#x27;;

const App = () =&gt; {
  return (
    &lt;Container&gt;
      {&#x2F;* App content here *&#x2F;}
    &lt;&#x2F;Container&gt;
  );
};

export default App;
&#96;&#96;&#96;

We can also use the React Bootstrap components to style our form and list components.

## Conclusion

In this tutorial, we&#x27;ve seen how to build a basic todo app in React. We&#x27;ve covered setting up the project, adding, deleting, and editing todo items, listing all todo items, marking a todo item as complete, and styling the todo app. I hope you&#x27;ve found this tutorial helpful and that you&#x27;ll be able to use it to build your own todo app!

Building a Basic Todo App in React

Firebase is an incredibly powerful platform that can help you build and manage applications quickly and easily. It provides a range of services, from authentication to hosting, and its integration with React makes it even more powerful. In this article, we&#x27;ll provide a complete cheatsheet for Firebase integration in React, including installation, authentication, Firestore integration, storage integration, and analytics integration.

![react firebase cheatsheet](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover6.jpg)
## Installing Firebase into Your Project

The first step in integrating Firebase into your React project is to install the Firebase SDK. To do this, you&#x27;ll need to open a terminal window and run the following command:

&#96;&#96;&#96;
npm install firebase
&#96;&#96;&#96;

Once the installation is complete, you&#x27;ll need to import the Firebase library into your React component. To do this, you&#x27;ll need to add the following line to the top of your component:

&#96;&#96;&#96;
import firebase from &#x27;firebase&#x2F;app&#x27;;
&#96;&#96;&#96;

## Authentication with Firebase in React JS

Firebase provides an easy way to authenticate users with your React application. Here, we&#x27;ll provide examples for the three most common authentication methods: registration, login, and SMS verification.

### Registration with Firebase in React

To register a user with Firebase, you&#x27;ll need to use the &#96;createUserWithEmailAndPassword&#96; method. This method takes two parameters, the user&#x27;s email address and a password. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(user) {
    console.log(&#x27;User registered successfully!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error registering user:&#x27;, error);
  });
&#96;&#96;&#96;

### Login with Firebase in React

Once a user has been registered, you&#x27;ll need to provide them with a way to log in. To do this, you can use the &#96;signInWithEmailAndPassword&#96; method. This method takes two parameters, the user&#x27;s email address and a password. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(user) {
    console.log(&#x27;User logged in successfully!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error logging in user:&#x27;, error);
  });
&#96;&#96;&#96;

### SMS Verification with Firebase in React

Firebase also provides the ability to send an SMS message to a user&#x27;s phone to verify their identity. To do this, you&#x27;ll need to use the &#96;sendSignInLinkToEmail&#96; method. This method takes two parameters, the user&#x27;s email address and a callback URL. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.auth().sendSignInLinkToEmail(email, callbackURL)
  .then(function() {
    console.log(&#x27;Verification link sent!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error sending verification link:&#x27;, error);
  });
&#96;&#96;&#96;

### Resetting Passwords with Firebase in React

Finally, Firebase provides the ability to reset a user&#x27;s password. To do this, you&#x27;ll need to use the &#96;sendPasswordResetEmail&#96; method. This method takes one parameter, the user&#x27;s email address. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.auth().sendPasswordResetEmail(email)
  .then(function() {
    console.log(&#x27;Password reset link sent!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error sending password reset link:&#x27;, error);
  });
&#96;&#96;&#96;

## Firestore Integration in ReactJS

Firestore is a powerful NoSQL cloud database that can be used to store and retrieve data for your React application. In this section, we&#x27;ll provide examples for writing data to Firestore, reading single data from Firestore, reading lists from Firestore, pagination with Firestore, sorting &amp; filtering with Firestore, and grouping &amp; aggregating with Firestore.

### Writing Data to Firestore in React

To write data to Firestore, you&#x27;ll need to use the &#96;set&#96; method. This method takes two parameters, the data you want to write and an optional callback function. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.firestore().collection(&#x27;users&#x27;).doc(userId).set({
  name: &#x27;John Doe&#x27;,
  age: 30
})
  .then(function() {
    console.log(&#x27;Data written successfully!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error writing data:&#x27;, error);
  });
&#96;&#96;&#96;

### Reading Single Data from Firestore in React

To read data from Firestore, you&#x27;ll need to use the &#96;get&#96; method. This method takes one parameter, the document ID of the data you want to read. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.firestore().collection(&#x27;users&#x27;).doc(userId).get()
  .then(function(doc) {
    console.log(&#x27;Data retrieved successfully!&#x27;);
    console.log(doc.data());
  })
  .catch(function(error) {
    console.log(&#x27;Error retrieving data:&#x27;, error);
  });
&#96;&#96;&#96;

### Reading Lists from Firestore in React

To read a list of data from Firestore, you&#x27;ll need to use the &#96;get&#96; method. This method takes one parameter, a query object that specifies the data you want to retrieve. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.firestore().collection(&#x27;users&#x27;).where(&#x27;age&#x27;, &#x27;&gt;&#x27;, 25).get()
  .then(function(querySnapshot) {
    console.log(&#x27;Data retrieved successfully!&#x27;);
    querySnapshot.forEach(function(doc) {
      console.log(doc.data());
    });
  })
  .catch(function(error) {
    console.log(&#x27;Error retrieving data:&#x27;, error);
  });
&#96;&#96;&#96;

### Pagination with Firestore in React

Firestore also provides the ability to paginate data, which can be useful for large datasets. To do this, you&#x27;ll need to use the &#96;startAfter&#96; and &#96;limit&#96; methods. This method takes two parameters, the number of documents you want to skip, and the maximum number of documents you want to retrieve. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.firestore().collection(&#x27;users&#x27;).startAfter(10).limit(10).get()
  .then(function(querySnapshot) {
    console.log(&#x27;Data retrieved successfully!&#x27;);
    querySnapshot.forEach(function(doc) {
      console.log(doc.data());
    });
  })
  .catch(function(error) {
    console.log(&#x27;Error retrieving data:&#x27;, error);
  });
&#96;&#96;&#96;

### Sorting &amp; Filtering with Firestore in React

Firestore also provides the ability to sort and filter data. To do this, you&#x27;ll need to use the &#96;orderBy&#96; and &#96;where&#96; methods. This method takes two parameters, the field you want to sort by and the condition you want to filter by. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.firestore().collection(&#x27;users&#x27;).orderBy(&#x27;name&#x27;).where(&#x27;age&#x27;, &#x27;&gt;&#x27;, 25).get()
  .then(function(querySnapshot) {
    console.log(&#x27;Data retrieved successfully!&#x27;);
    querySnapshot.forEach(function(doc) {
      console.log(doc.data());
    });
  })
  .catch(function(error) {
    console.log(&#x27;Error retrieving data:&#x27;, error);
  });
&#96;&#96;&#96;

### Grouping &amp; Aggregating with Firestore in React

Finally, Firestore provides the ability to group and aggregate data. To do this, you&#x27;ll need to use the &#96;groupBy&#96; and &#96;sum&#96; methods. This method takes two parameters, the field you want to group by and the field you want to sum. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.firestore().collection(&#x27;users&#x27;).groupBy(&#x27;age&#x27;).sum(&#x27;score&#x27;).get()
  .then(function(querySnapshot) {
    console.log(&#x27;Data retrieved successfully!&#x27;);
    querySnapshot.forEach(function(doc) {
      console.log(doc.data());
    });
  })
  .catch(function(error) {
    console.log(&#x27;Error retrieving data:&#x27;, error);
  });
&#96;&#96;&#96;

## Firebase Storage Integration in React

Firebase Storage provides a way to store files such as images, videos, and documents. To use Firebase Storage, you&#x27;ll need to use the &#96;ref&#96; method. This method takes one parameter, the file path you want to store the file at. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.storage().ref(&#x27;users&#x2F;&#x27; + userId + &#x27;&#x2F;profileImage.jpg&#x27;).put(file)
  .then(function(snapshot) {
    console.log(&#x27;File uploaded successfully!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error uploading file:&#x27;, error);
  });
&#96;&#96;&#96;

## Analytics Integration in React

Firebase Analytics provides a way to track user behavior and gain insights into how your application is being used. To use Firebase Analytics, you&#x27;ll need to use the &#96;logEvent&#96; method. This method takes two parameters, the event name and an optional set of parameters. Here&#x27;s an example of how you might use it:

&#96;&#96;&#96;
firebase.analytics().logEvent(&#x27;user_signup&#x27;, {
  user_id: userId
})
  .then(function() {
    console.log(&#x27;Event logged successfully!&#x27;);
  })
  .catch(function(error) {
    console.log(&#x27;Error logging event:&#x27;, error);
  });
&#96;&#96;&#96;

## Conclusion

In this article, we&#x27;ve provided a complete cheatsheet for Firebase integration in React, including installation, authentication, Firestore integration, storage integration, and analytics integration. We&#x27;ve also provided concrete step by step code snippets, with documentation, to help you get started with Firebase in React.

Complete Firebase Cheatsheet in React JS

Supabase is an open source realtime database, authentication, and storage service for web and mobile apps. It is built on top of Postgres, giving you access to all the features of Postgres, with no need to worry about the complexities of managing a server. Supabase provides an easy way to integrate React applications with its authentication, database, and storage services. In this article, we will look at how to install Supabase in ReactJS, handle authentication, and integrate the database and storage services.

![react js supabase](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover2.jpg)
## What Is Supabase?

Supabase is an open source realtime database, authentication, and storage service for web and mobile apps. It is built on top of Postgres, giving you access to all the features of Postgres, with no need to worry about the complexities of managing a server. Supabase is a great alternative to traditional databases, as it is easier to use and provides a robust set of features.

## How To Install Supabase in ReactJS?

Installing Supabase in ReactJS is straightforward and simple. First, install the Supabase SDK in your React app:

&#96;&#96;&#96;javascript
npm install @supabase&#x2F;supabase-js
&#96;&#96;&#96;

Next, import the SDK into your React component:

&#96;&#96;&#96;javascript
import { Supabase } from &#x27;@supabase&#x2F;supabase-js&#x27;
&#96;&#96;&#96;

Finally, create a Supabase instance with your project credentials:

&#96;&#96;&#96;javascript
const supabase = new Supabase({
  url: &#x27;https:&#x2F;&#x2F;your-project-url.supabase.co&#x27;,
  key: &#x27;your-project-key&#x27;
})
&#96;&#96;&#96;

## How to Handle Supabase Authentication in React JS?

Supabase provides an easy way to handle authentication in React apps. It allows you to register and log in users, as well as manage their accounts. Here is a quick overview of how to handle authentication in React apps with Supabase.

### Registration with Supabase in React

To register a new user with Supabase in React, you can use the &#96;supabase.auth.signup()&#96; method. This method accepts an object containing the registration details, such as the username, email address, and password. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const { username, email, password } = this.state

supabase.auth.signup({
  username,
  email,
  password
})
  .then(user =&gt; {
    console.log(&#x27;User registered successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error registering user:&#x27;, err)
  })
&#96;&#96;&#96;

### Login with Supabase in React

To log in a user with Supabase in React, you can use the &#96;supabase.auth.login()&#96; method. This method accepts an object containing the login details, such as the username or email address, and the password. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const { username, password } = this.state

supabase.auth.login({
  username,
  password
})
  .then(user =&gt; {
    console.log(&#x27;User logged in successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error logging in user:&#x27;, err)
  })
&#96;&#96;&#96;

## Supabase Database Integration in React

Supabase provides an easy way to integrate the database into React apps. It allows you to write, read, update, and delete data from the database. Here is a quick overview of how to use the database in React apps with Supabase.

### Writing Data to Supabase in React

To write data to Supabase in React, you can use the &#96;supabase.data.insert()&#96; method. This method takes an object containing the data you want to insert into the database. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const data = {
  title: &#x27;My Post&#x27;,
  content: &#x27;This is my post content.&#x27;
}

supabase.data.insert(&#x27;posts&#x27;, data)
  .then(res =&gt; {
    console.log(&#x27;Data inserted successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error inserting data:&#x27;, err)
  })
&#96;&#96;&#96;

### Reading Single Data from Supabase in React

To read single data from Supabase in React, you can use the &#96;supabase.data.get()&#96; method. This method takes the table name and the ID of the record you want to retrieve from the database. Here is an example of how to use it:

&#96;&#96;&#96;javascript
supabase.data.get(&#x27;posts&#x27;, &#x27;12345&#x27;)
  .then(res =&gt; {
    console.log(&#x27;Data retrieved successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error retrieving data:&#x27;, err)
  })
&#96;&#96;&#96;

### Reading Lists from Supabase in React

To read lists of data from Supabase in React, you can use the &#96;supabase.data.query()&#96; method. This method takes a SQL query string and an object containing the parameters of the query. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const query = &#96;
  SELECT *
  FROM posts
  WHERE title LIKE :title
&#96;

const params = {
  title: &#x27;%My Post%&#x27;
}

supabase.data.query(query, params)
  .then(res =&gt; {
    console.log(&#x27;Data retrieved successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error retrieving data:&#x27;, err)
  })
&#96;&#96;&#96;

### Pagination with Supabase in React

To paginate data from Supabase in React, you can use the &#96;supabase.data.paginate()&#96; method. This method takes a SQL query string and an object containing the parameters of the query, as well as the page number and page size. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const query = &#96;
  SELECT *
  FROM posts
&#96;

const params = {
  title: &#x27;%My Post%&#x27;
}

const pageNumber = 1
const pageSize = 10

supabase.data.paginate(query, params, pageNumber, pageSize)
  .then(res =&gt; {
    console.log(&#x27;Data retrieved successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error retrieving data:&#x27;, err)
  })
&#96;&#96;&#96;

### Sorting &amp; Filtering with Supabase in React

To sort and filter data from Supabase in React, you can use the &#96;supabase.data.sort()&#96; and &#96;supabase.data.filter()&#96; methods. These methods take a SQL query string and an object containing the parameters of the query, as well as the sorting and filtering parameters. Here is an example of how to use them:

&#96;&#96;&#96;javascript
const query = &#96;
  SELECT *
  FROM posts
&#96;

const params = {
  title: &#x27;%My Post%&#x27;
}

const sortBy = &#x27;title&#x27;
const sortOrder = &#x27;asc&#x27;
const filterBy = &#x27;published&#x27;
const filterValue = true

supabase.data.sort(query, params, sortBy, sortOrder)
  .then(res =&gt; {
    return supabase.data.filter(res.sql, res.params, filterBy, filterValue)
  })
  .then(res =&gt; {
    console.log(&#x27;Data retrieved successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error retrieving data:&#x27;, err)
  })
&#96;&#96;&#96;

## Supabase Storage Integration in React

Supabase also provides an easy way to integrate the storage service into React apps. It allows you to upload, download, and delete files from the storage service. Here is a quick overview of how to use the storage service in React apps with Supabase.

### Uploading Files to Supabase in React

To upload files to Supabase in React, you can use the &#96;supabase.storage.upload()&#96; method. This method takes a file object and an optional object containing the metadata of the file. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const file = document.querySelector(&#x27;#file&#x27;).files[0]

const metadata = {
  title: &#x27;My File&#x27;,
  description: &#x27;This is my file description.&#x27;
}

supabase.storage.upload(file, metadata)
  .then(res =&gt; {
    console.log(&#x27;File uploaded successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error uploading file:&#x27;, err)
  })
&#96;&#96;&#96;

### Downloading Files from Supabase in React

To download files from Supabase in React, you can use the &#96;supabase.storage.download()&#96; method. This method takes the file ID of the file you want to download. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const fileId = &#x27;12345&#x27;

supabase.storage.download(fileId)
  .then(res =&gt; {
    console.log(&#x27;File downloaded successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error downloading file:&#x27;, err)
  })
&#96;&#96;&#96;

### Deleting Files from Supabase in React

To delete files from Supabase in React, you can use the &#96;supabase.storage.delete()&#96; method. This method takes the file ID of the file you want to delete. Here is an example of how to use it:

&#96;&#96;&#96;javascript
const fileId = &#x27;12345&#x27;

supabase.storage.delete(fileId)
  .then(res =&gt; {
    console.log(&#x27;File deleted successfully!&#x27;)
  })
  .catch(err =&gt; {
    console.error(&#x27;Error deleting file:&#x27;, err)
  })
&#96;&#96;&#96;

## Conclusion

In this article, we looked at how to use Supabase to integrate React applications with its authentication, database, and storage services. We covered how to install Supabase in ReactJS, handle authentication, and integrate the database and storage services. We also provided code examples of how to write, read, update, delete, upload, download, and delete files in React apps with Supabase. With Supabase, you can easily and quickly add powerful features to your React apps.

How To Integrate React JS Apps with Supabase

Unit tests are a great way to ensure that your code is working as expected. They help to identify bugs, prevent regressions, and make your code more reliable. In this article, we&#x27;ll cover what unit tests are, how to write unit tests in React, running unit tests in React, and best practices for unit tests in React. 

![react unit tests](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover14.jpg)
## What are Unit Tests?

Unit tests are small, isolated tests that check the functionality of a specific piece of code. They are written to ensure that the code is working as expected and are used to prevent regressions and detect bugs. Unit tests are usually written before the code is written, to ensure that the code is tested before it is deployed.

## How to write unit tests in React?

Writing unit tests in React involves creating a test suite for each of your components. This test suite should include a set of tests that validate the behavior of the component. Here is an example of a unit test for a React component:

&#96;&#96;&#96;javascript
import React from &#x27;react&#x27;;
import { shallow } from &#x27;enzyme&#x27;;
import MyComponent from &#x27;.&#x2F;MyComponent&#x27;;

describe(&#x27;MyComponent&#x27;, () =&gt; {
  it(&#x27;should render a div&#x27;, () =&gt; {
    const wrapper = shallow(&lt;MyComponent &#x2F;&gt;);
    expect(wrapper.find(&#x27;div&#x27;)).toHaveLength(1);
  });
});
&#96;&#96;&#96;

In this example, we are using the &#96;shallow&#96; function from the Enzyme library to render the &#96;MyComponent&#96; component, and then using &#96;expect&#96; to test that the component renders a &#96;div&#96; element.

## Running unit tests in React

Once you have written your unit tests, you can run them using a test runner such as Jest. Jest is a popular test runner for React, and it can be installed with the following command:

&#96;&#96;&#96;
npm install jest --save-dev
&#96;&#96;&#96;

Once Jest is installed, you can run your tests with the following command:

&#96;&#96;&#96;
npx jest
&#96;&#96;&#96;

This will run all of your tests, and you will see the results in the terminal.

## Best Practices for Unit Tests in React

When writing unit tests in React, there are a few best practices that you should follow:

- **Test each component separately:** Make sure that each component is tested independently, rather than trying to test the entire application at once.

- **Test all scenarios:** Make sure to test all scenarios for each component, including edge cases and error states.

- **Make tests readable:** Make sure that your tests are easy to read and understand, so that anyone can understand what the tests are doing.

- **Test the output:** Make sure to test the output of each component, rather than just testing the code.

- **Test in isolation:** Make sure to test each component in isolation, without relying on other components or external services.

- **Write clean code:** Make sure to write clean and readable code, so that your tests are easy to maintain.

- **Keep tests up to date:** Make sure to keep your tests up to date with any changes to the codebase.

By following these best practices, you can ensure that your tests are reliable and maintainable.

Unit tests are an essential part of writing reliable code in React. By following the best practices outlined in this article, you can ensure that your code is tested and reliable.

Getting Started with Unit Tests in React

## **React State Hook**

Let&#x27;s talk about the state. A vital part of the React community. To help you get started with Hooks, I&#x27;ll be covering the most ubiquitous of them: useState ().

Examine a class that makes use of state.

&#96;&#96;&#96;javascript
import React, { Component } from &#x27;react&#x27;;
import &#x27;.&#x2F;styles.css&#x27;;
class Counter extends Component {
            state = {
                        count: this.props.initialValue,
            };
            setCount = () =&gt; {
                        this.setState({ count: this.state.count + 1 });
            };
            render() {
                        return (
                                    &lt;div&gt;
                                                &lt;h2&gt;This is a counter using a class&lt;&#x2F;h2&gt;
                                                &lt;h1&gt;{this.state.count}&lt;&#x2F;h1&gt;
                                                &lt;button onClick={this.setCount}&gt;Click to Increment&lt;&#x2F;button&gt;
                                    &lt;&#x2F;div&gt;
                        );
            }
}
export default Counter;
&#96;&#96;&#96;

&#x5C;
The use of React Hooks allows us to redesign this component while stripping it of unnecessary code, making it more readable:

&#96;&#96;&#96;javascript
import React, { useState } from &#x27;react&#x27;;
function CounterWithHooks(props) {
            const [count, setCount] = useState(props.initialValue);
            return (
                        &lt;div&gt;
                                    &lt;h2&gt;This is a counter using hooks&lt;&#x2F;h2&gt;
                                    &lt;h1&gt;{count}&lt;&#x2F;h1&gt;
                                    &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click to Increment&lt;&#x2F;button&gt;
                        &lt;&#x2F;div&gt;
            );
}
export default CounterWithHooks;
&#96;&#96;&#96;

## React State Syntax

Okay, we have our first hook! Hurrah!

&#96;&#96;&#96;javascript
const [count, setCount] = useState();
&#96;&#96;&#96;

Essentially, array assignments are handled through destructuring here. There are two benefits to using the useState() function:

a state value storing variable (count) and a setCount function (used to alter the value).

You&#x27;re free to give them whatever names you like:

&#96;&#96;&#96;javascript
const [myCount, setCount] = useState(0);
&#96;&#96;&#96;

Additionally, they may be used anywhere in the code just like any other variables or functions:

&#96;&#96;&#96;javascript
function CounterWithHooks() {
const [count, setCount] = useState();
return (
&lt;div&gt;
&lt;h2&gt;This is a counter using hooks&lt;&#x2F;h2&gt;
&lt;h1&gt;{count}&lt;&#x2F;h1&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click to Increment&lt;&#x2F;button&gt;
&lt;&#x2F;div&gt;
);
}
&#96;&#96;&#96;

Take note of the top-level useState hook. We are stating and deconstructing the following:

count: a number that will keep our internal state value set

A function that modifies our internal &quot;counter&quot; variable.

Next, we&#x27;ll reach this line in the code:

&#96;&#96;&#96;javascript
&lt;h1&gt;{count}&lt;&#x2F;h1&gt;
&#96;&#96;&#96;

This demonstrates the application of a state hook variable. By enclosing our count variable in JSX&#x27;s, which causes it to be processed as JavaScript, we are able to see its value shown on the page.

If we look at the traditional &quot;class-based&quot; approach to employing a state variable, we can see several key differences:

&#96;&#96;&#96;javascript
&lt;h1&gt;{this.state.count}&lt;&#x2F;h1&gt;
&#96;&#96;&#96;

You&#x27;ll see that we no longer have to fret about utilizing this, which simplifies our lives tremendously; for instance, the VS Code editor will notify us if count is not specified, helping us to see issues before they snowball. On the other hand, it won&#x27;t know whether this.state.count is undefined until it&#x27;s actually used.

Now, onto the next line!

&#96;&#96;&#96;javascript
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click to Increment&lt;&#x2F;button&gt;
&#96;&#96;&#96;

In this case, we&#x27;re modifying the count variable by using the setCount method (recall that we destructured&#x2F;declared this from the useState() hook).

We increment the count variable by one every time the button is pressed. This causes a re-render, and React automatically adjusts the display to reflect the new count value due to the state transition. Sweet!

## **What are my options for establishing a default value?**

By providing a value as an input to the useState() idiom, the starting state may be determined. A fixed value may be used here.

&#96;&#96;&#96;javascript
const [count, setCount] = useState(0);
&#96;&#96;&#96;

It may also be gleaned from the set pieces:

&#96;&#96;&#96;javascript
const [count, setCount] = useState(props.initialValue);
&#96;&#96;&#96;

By doing so, the count would be initialized to the number specified by the props.initialValue property.

That&#x27;s all there is to useState (). The great thing about using state variables and functions is that they are treated exactly the same as any other variables and functions you could create.

# **When there are several state variables, how do I manage them?**

The fact that hooks can do this is also really amazing. In a given part, we may have as many as we desire.

&#96;&#96;&#96;javascript
const [count, setCount] = useState(props.initialValue);
const [title, setTitle] = useState(&quot;This is my title&quot;);
const [age, setAge] = useState(25);
&#96;&#96;&#96;

There are 3 distinct items representing states. To modify the age, for instance, we would simply use the setAge() method. The same holds true for rank and status. We are liberated from the inefficient old method of maintaining state using setState() and a centralised heap of class components:

&#96;&#96;&#96;javascript
this.setState({ count: props.initialValue, title: &quot;This is my title&quot;, age: 25 })
&#96;&#96;&#96;

## **What about refreshing when props or state are updated?**

After switching to hooks and functional components, we can no longer use the standard React lifecycle methods like componentDidMount, componentDidUpdate, and so on. Poor thing! Do not worry, React has provided us with yet another tool:

* Tune the Drums &#x5C;*

### **The useEffect!**

We save &quot;side effects&quot; in the Effect hook (useEffect()).

Consequences, huh? What? Let&#x27;s digress for a second and talk about what it means when something has a side effect. Our comprehension of useEffect() and its value will increase greatly as a result of this.

In the realm of computers, the explanation would be dull.

&gt; *When a procedure modifies a variable that is outside of its scope, this is known as a side effect in computer programming.*

&quot;when a component&#x27;s variables or state change depending on some outside item,&quot; as the React community puts it. This might include things like:

* A state transition occurs when an element gets updated parameters.
* What happens when a piece of code makes an API request and acts on the result (e.g, changes the state)

To what end, therefore, is it classified as a &quot;side effect&quot;? The outcome of this action is uncertain at this time. In the case of API calls, we can never know for sure what parameters will be sent to us or what kind of answer we will get. Furthermore, we are unsure of the consequences of this on our component.

While it&#x27;s true that we can build code to validate, manage errors, and the like, this does not mean that we know for sure what such actions will cause.

A common kind of side effect is the modification of our internal states in response to outside stimuli.

Now that we have it settled, we can return to React and the useEffect Hook.

Life cycle methods such as componentDidMount(), componentDidUpdate(), etc. are unavailable when utilizing functional components. Therefore, the existing React Life Cycle hooks have been replaced with useEffect hooks.

Here&#x27;s how the useEffect hook stacks up against a class-based component:

&#96;&#96;&#96;javascript
import React, { Component } from &#x27;react&#x27;;
class App extends Component {
componentDidMount() {
console.log(&#x27;I have just mounted!&#x27;);
}
render() {
return &lt;div&gt;Insert JSX here&lt;&#x2F;div&gt;;
}
}
&#96;&#96;&#96;

And now using useEffect():

&#96;&#96;&#96;javascript
function App() {
useEffect(() =&gt; {
console.log(&#x27;I have just mounted!&#x27;);
});
return &lt;div&gt;Insert JSX here&lt;&#x2F;div&gt;;
}
&#96;&#96;&#96;

First, it&#x27;s vital that you understand that the useEffect hook is automatically invoked before each and every render and re-render. Therefore, the useEffect hook will be invoked repeatedly whenever the state of your component changes or when your component receives new props.

## **Invoking a function once (componentDidMount)**

Is there a way to restrict hook execution to once per component mount rather than each time the component is rendered? For instance, it&#x27;s undesirable for data fetched from an API by a component to be re-fetched each time the component is re-rendered.

The useEffect() hook accepts an array as a second parameter, containing the conditions under which the hook should be executed. The effect hook is activated when the value is modified. To trigger an effect only once, simply supply an empty array as the parameter.

&#96;&#96;&#96;javascript
useEffect(() =&gt; {
console.log(&#x27;This only runs once&#x27;);
}, []);
&#96;&#96;&#96;

In other words, the useEffect hook will execute normally during the initial render. However, useEffect will assume that your component has changed when it re-renders &quot;I don&#x27;t need to run again because I&#x27;ve already done so and the array contains nothing. I need to go back to bed.&quot; and makes no effort to do so.

&gt; *In conclusion, the useEffect hook is invoked only once on mount when the array is empty.*

## **Using repercussions when circumstances shift (componentDidUpdate)**

We&#x27;ve discussed how to limit the number of times a useEffect hook is executed, but what about when our component is passed a new prop? Alternatively, we&#x27;d like to trigger the execution of a script whenever the state shifts. Hooks make it possible for us to do this as well!

&#96;&#96;&#96;javascript
useEffect(() =&gt; {
console.log(&quot;The name props has changed!&quot;)
}, [props.name]);
&#96;&#96;&#96;

Take note that this time, the props.name variable is being passed on to the useEffect array.

The useEffect hook will execute normally, at the start of the initial load, in this case. The useEffect hook will be activated whenever your component gets a new name prop from its parent.

The same holds true for state variables:

&#96;&#96;&#96;javascript
const [name, setName] = useState(&quot;Chris&quot;);
useEffect(() =&gt; {
console.log(&quot;The name state variable has changed!&quot;);
}, [name]);
&#96;&#96;&#96;

Each time the name variable is modified, the component will re-render and the useEffect hook will be activated, causing the message to be shown. Because this already is an array, we can insert several items:

&#96;&#96;&#96;javascript
const [name, setName] = useState(&quot;Chris&quot;);
useEffect(() =&gt; {
console.log(&quot;Something has changed!&quot;);
}, [name, props.name]);
&#96;&#96;&#96;

This time, the console message will be shown whenever the useEffect hook is activated, regardless of whether the name state variable or name prop has changed.

## **Is componentWillUnmount() available for use?**

Simply returning a function from the useEffect hook causes it to be executed immediately before the component is unmounted.

&#96;&#96;&#96;javascript
useEffect(() =&gt; {
console.log(&#x27;running effect&#x27;);
return () =&gt; {
console.log(&#x27;unmounting&#x27;);
};
});
&#96;&#96;&#96;

## **Can I combine hook types?**

Yes! You&#x27;re free to combine and utilize whatever many hooks you wish inside a single component:

&#96;&#96;&#96;javascript
function App = () =&gt; {
const [name, setName] = useState();
const [age, setAge] = useState();
useEffect(()=&gt;{
console.log(&quot;component has changed&quot;);
}, [name, age])
return(
&lt;div&gt;Some jsx here...&lt;div&gt;
)
}
&#96;&#96;&#96;

## **Conclusion**

So there you go. With the help of hooks, we can write less-cumbersome React components using traditional JavaScript functions.

You are free to experiment with construction on your own in the React hooks universe now.

The React useEffect Hook for Absolute Beginners

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application, keeping the URL in sync with what&#x27;s being displayed on the page. In this tutorial, we will be exploring the basics of React Router and how to use it in creating a simple React application.

![react router tutorial](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover13.jpg)
## What Is React Router?

React Router is a routing library built on top of React that helps developers add new screens and flows to their React applications, keeping the URL in sync with what&#x27;s being displayed on the page. It is used by many popular websites, including Facebook, Airbnb, and The New York Times. React Router provides a way to keep the URL in sync with what&#x27;s being displayed on the page, as well as providing features like navigation guards and route parameters.

## How To Install React Router

Installing React Router is easy and can be done with the following steps:

1.  Install the React Router package via npm:

&#96;&#96;&#96;
npm install react-router-dom
&#96;&#96;&#96;

2.  Import the &#96;BrowserRouter&#96; component from the &#96;react-router-dom&#96; package:

&#96;&#96;&#96;
import { BrowserRouter } from &#x27;react-router-dom&#x27;;
&#96;&#96;&#96;

3.  Wrap your application in the &#96;BrowserRouter&#96; component:

&#96;&#96;&#96;
&lt;BrowserRouter&gt;
  &lt;App &#x2F;&gt;
&lt;&#x2F;BrowserRouter&gt;
&#96;&#96;&#96;

4.  Start using React Router in your application!

## Adding React Router Components

Once you have installed React Router, you can start using it to add new screens and flows to your application. This can be done by using the &#96;Route&#96; component, which allows you to specify a path and a component to render when the path is matched.

For example, if you want to render a component when the path &#96;&#x2F;home&#96; is matched, you can use the following code:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;home&quot; component={Home} &#x2F;&gt;
&#96;&#96;&#96;

The &#96;Home&#96; component will be rendered when the path &#96;&#x2F;home&#96; is matched.

You can also use the &#96;Switch&#96; component to render only one component when a path is matched. For example, if you want to render a component when the path &#96;&#x2F;home&#96; is matched, and a different component when the path &#96;&#x2F;about&#96; is matched, you can use the following code:

&#96;&#96;&#96;
&lt;Switch&gt;
  &lt;Route path=&quot;&#x2F;home&quot; component={Home} &#x2F;&gt;
  &lt;Route path=&quot;&#x2F;about&quot; component={About} &#x2F;&gt;
&lt;&#x2F;Switch&gt;
&#96;&#96;&#96;

The &#96;Home&#96; component will be rendered when the path &#96;&#x2F;home&#96; is matched, and the &#96;About&#96; component will be rendered when the path &#96;&#x2F;about&#96; is matched.

## React Router Code Examples

Here are some code examples of how to use React Router in a React application:

1.  Rendering a component when the path &#96;&#x2F;home&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;home&quot; component={Home} &#x2F;&gt;
&#96;&#96;&#96;

2.  Rendering a component when the path &#96;&#x2F;about&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;about&quot; component={About} &#x2F;&gt;
&#96;&#96;&#96;

3.  Rendering a component when the path &#96;&#x2F;contact&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;contact&quot; component={Contact} &#x2F;&gt;
&#96;&#96;&#96;

4.  Rendering a component when the path &#96;&#x2F;profile&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;profile&quot; component={Profile} &#x2F;&gt;
&#96;&#96;&#96;

5.  Rendering a component when the path &#96;&#x2F;login&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;login&quot; component={Login} &#x2F;&gt;
&#96;&#96;&#96;

6.  Rendering a component when the path &#96;&#x2F;register&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;register&quot; component={Register} &#x2F;&gt;
&#96;&#96;&#96;

7.  Rendering a component when the path &#96;&#x2F;dashboard&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;dashboard&quot; component={Dashboard} &#x2F;&gt;
&#96;&#96;&#96;

8.  Rendering a component when the path &#96;&#x2F;settings&#96; is matched:

&#96;&#96;&#96;
&lt;Route path=&quot;&#x2F;settings&quot; component={Settings} &#x2F;&gt;
&#96;&#96;&#96;

## Conclusion

In this tutorial, we have explored the basics of React Router and how to use it in creating a simple React application. We have seen how to install React Router and how to add new screens and flows to our application using the &#96;Route&#96; and &#96;Switch&#96; components. We have also seen some code examples of how to use React Router in a React application.

React

Building a Custom Calendar in React

What Is useState() in React - Complete Guide

Building a Basic Todo App in React

Complete Firebase Cheatsheet in React JS

How To Integrate React JS Apps with Supabase

Getting Started with Unit Tests in React

The React useEffect Hook for Absolute Beginners

React Router Tutorial for Beginners

About Us

Devbrite

Find us on

Resources