This is the introduction to the Beginner's Guide to Real World React.

Course introduction

You'll learn a little bit about Rob Kendal, his development background, and the motivations for producing this course on React.

About Rob Kendal, Author of Beginner's Guide to Real World React

In this lesson we'll take a look at some of the conventions we'll be using throughout the course, including the type of code styles we'll employ, and code editing programs.

Conventions used and helpful links

This lesson will cover how to seek help if you get stuck, as well as how to report any errors or omissions that you come across.

Reporting errors and getting support

How to download and run the project files

Downloading the course code

Introduction

React is a declarative JavaScript library introduced by Facebook in 2013. We'll look at how React came about and determine some of the skills you'll need as a React developer.

What is React? A Comparison to JavaScript and HTML

This lesson takes a deeper look at React in comparison with other, similar frameworks such as Vue and Angular

React vs Angular vs Vue - Benefits and Drawbacks

React does have a few drawbacks and caveats to working with it. We'll explore some of those in this lesson.

React Pros and Cons

Before we dive into more deep and challenging topics, we'll have some fun by building an app. Our first React app will present our users with an input and send them a friendly greeting message.

First React app - The Greeting App

Now that we've introduced our very first app, the Greeting App, this lesson will cover the actual building of it, step by step.

Getting Started with React - Building Your First App

With our Greeting App built, we're going to learn how to 'think in React' by breaking down our small App into components and refactoring it to use them.

How to Refactor a React App into Components

So far, we've built and refactored a great React app. Now, it's time to talk about the fundamental principles of React components and its core concepts.

Beginner's Guide to Managing Data in React

React - A modern UI library

This module introduces us to React Hooks; what they are, how to use them, and why they're an important part of modern React development.

Intro to React Hooks [with examples]

In this lesson we'll take a look at the most common Hooks you'll come across and learn how to use them in your apps.

React useState and useEffect - A Beginner's Guide

We're going to build on the previous Hooks demo by creating a dog picture gallery. First though, let's take a look at what we're going to build.

Furry Friend Gallery app

This code-along lesson walks through using Create React App to build a fully-functioning picture gallery, the Furry Friend Gallery.

Build Your First Functional React App with Create React App

Introducing React Hooks

This lesson introduces the concepts and approaches you can use to deal with fetching data within React, including the JavaScript Fetch API.

How to Fetch API Data in React with JavaScript Fetch and Axios

Our code-along project for this module is to build a new Furry Friends Gallery. This time, we'll be using a new API and common UI patterns such as a sidebar filter. In this lesson, we'll take a look at what we'll be building.

Furry Friends Gallery Mark II

We've seen the finished app, so now it's time to build it! This lesson will take you, step by step, through creating a brand new app, the Furry Friends Gallery Mark II.

Build Your First API-Powered React App with Axios

Fetching data with React

Deploying your React apps is a vital step and this module will help you learn just how to do that. We cover some hosting history as well as your options for deployment in modern hosting ecosystems.

The Best Hosting Environments to Deploy a React App

React apps need to be built and packaged up for deployment before we can think about sending them off to a hosting platform. This lessons covers how to build your React apps, ready for deployment.

How to Set Up a React App for Continuous Integration

In this final lesson of the module, we'll walkthrough the deployment process to host our Furry Friends Gallery Mark II app on the Netlify hosting platform.

How to Deploy Your First React App on Netlify

Deploying an app to the world

Successful React development involves being able to 'think in React'. We'll look at breaking down UI's into components and their relationships.

Thinking in React with Higher Order and Functional Components

React components are modular, isolated slices of functionality that connect together to build user interfaces. This lesson discusses the relationships between components.

When Should You Split Up React Components?

There are many different ways to structure your apps' code. This lesson introduces some different approaches, including how I structure my projects and suggestions from the Facebook team themselves.

How to Structure a React Project

The big project in this module is a Form Builder. Let's take a look at what we'll be building.

Form Builder project

The Form Builder app is the most complex we've built so far. It builds on concepts from earlier modules and reenforces the idea of building modular, component-driven UIs. We'll walk through the app build together to create a dynamic form powered from a set of JSON objects.

How to Build a Dynamic Form Builder in React with JSON Data

Thinking in React

We'll be taking a deep dive walkthrough of the most common Hooks in React, including their use cases and how to work with them.

The 7 Core React Hooks [with examples]

Setup the base project for our Hooks deep dive examples.

Hooks project setup

Learn about the useContext Hook, its use cases and implementation.

Beginner's Guide to React useContext Hook

Learn about the useRef Hook, its use cases and implementation.

Beginner's Guide to React useRef Hook

Learn about the useMemo Hook, its use cases and implementation.

Beginner's Guide to React useMemo Hook

Learn about the useCallback Hook, its use cases and implementation.

Beginner's Guide to React useCallback Hook

React Hooks Deep Dive

In this module we'll explore the third party React Router library to add a routing and navigation system to our applications.

Beginner's Guide to App Navigation [with examples]

React Router is a routing and navigation library that bolts onto to React. We'll explore what it is and how it works.

What is React Router? A Beginner's Guide

For the demo lesson in this module we'll be building an Admin Console app. Let's take a look at what we'll be building in greater detail.

Admin Console app

We're going to build a demo Admin Console app step by step during this lesson, adding in React Router as we go.

How to Build a React Admin Dashboard

With the basics in place, this lesson is all about extending the Admin Console with parameterized routing and query strings.

Parameterized Routing and Query Strings with React Router

Navigation in complex apps

Let's take a look at why we often need a centralized state area in our apps and how we can manage updates and changes to it

Intro to React State Management

One of the best ways to manage your apps' centralized state is with the redux pattern. In this lesson we'll deep dive into redux and how you can use it for managing state.

A Beginner's Guide to Redux and React State Management

This lesson introduces the new demo project for this module, the Event Sign-Up App.

Event Sign Up App

Learn how to build our very own Event Sign-Up App using the React Redux library with a centralized state management store.

How to Build an Event Signup App with React Redux Thunk

This lesson takes things further by extending the Event Sign-Up App to use the Redux Toolkit for even easier state management.

How to Simplify React State Management with Redux Toolkit

This final lesson eschews all external redux libraries and swaps in the use of React's built-in useReducer Hook and Context tools.

Beginner's Guide to React useReducer Hook

State management with Redux

In this final module we'll be putting our skills together and building a Dinosaur Search App

The Dinosaur Search App

We put the foundations of the Dinosaur Search App in place such as creating a new React app and exploring the supporting API

React Scaffolding and File Structure Best Practices

This lesson focusses on building the data-handling services and core Redux management system for the Dinosaur Search App

Intro to React Services with Redux and useReducer Hooks

In the final coding lesson of this module we'll flesh out the UI components that will power the Dinosaur Search App

How to Combine React Components Into an App

With all the code in place, we'll take a walk through the finished Dinosaur Search App and discuss the finer points

Exploring the app

With the course at an end we'll take a look at some next steps to continue your React learning and where you can go from here

Closing thoughts and learning paths

In this course you'll take a deep dive into core React concepts as you learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots' and gain a detailed understanding of how you might use React in a real world setting.

## Why this course

The Beginner's Guide to Real World React will teach you how to successfully build web applications with modern frontend techniques, using the ReactJS library.

React on its own is only one piece of the puzzle and it doesn't, out of the box, cater for some of the missing pieces of common frontend development. Pieces such as:

- Connecting to an API or external data source and retrieving data to power your app.
- Navigating around your app to different pages or areas.
- Managing the "state" of your application's data at a higher level (i.e. outside of components).

The problem is, these missing pieces are vital parts of any modern web application, as well as any realistic development scenario. It's key to understand both their concepts and how to approach them in React development. Many tutorials only cover one aspect of these and don't bring them together in a realistic setting.

On completion of The Beginner's Guide to Real World React, you'll not only have a knowledge of modern React development, but also the skills required to build real-world apps that talk to real data.

You don't have to be a coding guru or have years of experience as this course is designed for beginners. However, you should be familiar with the basics of frontend development, including HTML, CSS and JavaScript. It would be helpful to have an understanding of basic concepts around RESTful APIs and how to interact with them, but it's not essential.

## Course topics

In The Beginners Guide to Real World React you'll join me on a deep dive into core React concepts. As you progress through this course, you will learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots'. You will gain a detailed understanding of how you might use React in a real world setting.

### Part I

In part one of the course, we'll take an end-to-end approach to React. We'll start with taking a look at the library itself and the problems it solves, before moving on to topics such as Hooks and handling data from an API. Finally, we'll talk about how to build and deploy our application to a popular service such as Netlify.

Included in the introductory part one of the course are the following modules:

- Module 1 - this very introduction.
- Module 2 - React JS: an introduction to React, a modern UI library.
- Module 3 - React Hooks: what they are and how to use them.
- Module 4 - Fetching data: using APIs in your code, and popular helper libraries such as Axios.
- Module 5 - Deploying your first app: using Netlify to deploy our app to the public.

### Part II

In the extended course part two, we'll cover similar topics to the first part but take a deeper dive into them and look at some of the challenges we face as React developers and how to overcome them. We'll also learn about navigating around our application, and managing state across our application using Redux -- a common stumbling block for aspiring React developers.

The outline for part two of the course includes the following modules:

- Module 6 - Thinking in React: structuring your projects, breaking functionality into components
- Module 7 - React Hooks deep dive: learn what each Hook does and how to use them
- Module 8 - Navigation in complex apps: moving users around different areas of your application
- Module 9 - State management in complex apps: using Redux and useReducer Hooks to manage app state
- Module 10 - The Dinosaur Search App: putting it altogether by building our very own application

If you've been looking for a way to learn _real-world_ React patterns, then this course is for you.

In this course, you'll learn to build web applications with modern front end techniques using the React JS library

Beginner's Guide to Real World React

Build a furry friends gallery application with React and Axios.

Build a form builder application powered by JSON with React.

Build an admin console application with React Router.

Build an event sign up application with Redux Toolkit.

Build a dinosaur search application with the userReducer Hook.

How to build realistic React applications from scratch

How React compares to other front end frameworks

What React is missing and how to fill in the blanks

How to use React with popular libraries like axios

How to navigate in complex apps with React-Router

Arguably the most common Hooks you’ll encounter are:

Before we move onto our big project in this module, let’s take some time to familiarize ourselves with the use of these two most common built-in Hooks.

 in the next lesson as a great way to build new React projects. For now, though, we're going to keep things simple and familiar by using Parcel JS to set up our project to bundle and run our React code for these examples.

Create a new folder and open it in VS Code. Navigate to the terminal and let’s initialize our new project:

Next, let’s install the packages we need:

 file and add the following config so we can call 

"scripts": {
    "start": "parcel index.html"
  },

Now our project is set up and ready to run, we need to add the necessary files to our project before we fill them out.

 are where we’ll do the main body of our work here, so let’s get our other files set up before we explore our example components.

This will be the entry point for Parcel to start loading our JavaScript from. We import our main 

 method to mount it into the HTML element in our 

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));

 component, the main starting point for our React app, we’re using a Hook, the 

import React, { useState } from 'react';

import './styles.css';

// components
import UseStateExample from './UseStateExample';
import UseEffectExample from './UseEffectExample';

export default props => {
  const [example, setExample] = useState('UseStateExample');

  return (
    <>
      <h1>Choose an example</h1>
      <button onClick={() => setExample('UseStateExample')}>
        useState Example
      </button>
      <button onClick={() => setExample('UseEffectExample')}>
        useEffect Example
      </button>
      <div className='container'>
        {example === 'UseStateExample' ? (
          <UseStateExample />
        ) : (
          <UseEffectExample />
        )}
      </div>
    </>
  );
};

Here, we’re importing our two example components, 

 is set to the string ‘UseStateExample' then we’ll show the 

We also have two buttons that both call the 

 state value, which will, in turn, change which child component is displayed.

Much of the styles here are the same basic styles from our very first example that we built in Module 2, the Greeting App. We’ve added a couple of extra layout selectors at the bottom to add some flex box support and additional styling to some form elements, such as a select and label.

body {
  font-size: 16px;
  line-height: 1.4;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin: 5em;
}

p {
  margin-bottom: 1.6em;
}

input,
select {
  padding: 0.5em 1em;
  line-height: 1;
  font-size: 18px;
  border: 1px solid #ececec;
}

button {
  border: 1px solid #ececec;
  background: #ececec;
  padding: 0.5em 1em;
  cursor: pointer;
  font-size: 18px;
  margin-right: 15px;
}

button:hover {
  background: #c9c6c6;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

label + input,
label + select {
  margin-bottom: 1em;
}

form button {
  display: block;
}

.container,
.dogs-container {
  padding: 0 2em 2em;
  border: 1px solid #ececec;
  border-radius: 4px;
  margin: 1em auto;
}

.form-message {
  background-color: #ececec;
  border-radius: 4px;
  margin: 1em auto;
  padding: 2em;
  font-size: 18px;
}

.dogs-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dogs-container img {
  max-width: 250px;
  max-height: 200px;
}

 file simply provides us with a basic entry point for Parcel to follow and find our JavaScript starting point.

<html>
  <head>
    <title>Hooks example demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

With the basic files set up and ready to go, let's take a closer look at the 

 is a direct replacement for the class-based 

// updating state
this.setState({
  someProperty: 'some value'
});

// using state
<p>The value is {this.state.someProperty}</p>;

As we’ve already seen in the previous module, the 

 Hook has a very simple syntax for setting and retrieving values from it.

// initial declaration
const [nameOfValue, setNameOfValue] = useState('initial value here');

// updating state
setNameOfValue('a new value');

// using state
<p>The value in state is {nameOfValue}</p>;

You’re not limited to what you can store inside this state Hook, just like you’re not limited with 

 used in a class component. Any valid JavaScript primitive value, array, object, and even function can be passed into and stored in 

The convention is to have distinct declarations for multiple values, unless they’re logically able to be kept together, such as with form values.

// multiple values
const [itemCount, setItemCount] = useState(0);
const [data, setData] = useState([]);
const [balance, setBalance] = useState(null);

// grouped values
const [formValues, setFormValues] = useState({
  name: '',
  email: '',
  message: ''
});

In the first group, you can see that we've got singular values such as an integer, '0', an empty array, and a 

 value. These are all distinct pieces of 

 and declared in their own variable pairs, each using a separate call to 

 and passing in an object with multiple properties, one for 

, that each represents a form field value.

We could have also separated these values out into their own 

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');

This is fine and you'll see this approach quite frequently. As with a lot of things in development, there is a lot of personal preference and trade-offs on how you tackle a problem and implement a solution. For me, it makes sense to group closely related slices of data, such a collection of form field values, into a single place (i.e. the 

 variable above), but it does add a little more overhead in dealing with updates to any particular form field's value. Conversely, if you have a really large form with a lot of field values, breaking each one into a separate call to 

 could potentially create a lot more code for you to manage and a very large component.

With the explanation in the bag, let’s build a little example app to demonstrate how to use 

 and the sorts of values it can be used with.

 file, where we’ll need to import React and create the empty component’s skeleton:

import React, { useState } from 'react';

const UseStateExample = () => {
  return <></>;
};

export default UseStateExample;

We want to take a look at how to effectively use the 

 Hook here. To do that, we’re going to build an HTML form that will update values in our component’s state, and display a nice message to our user once they’ve submitted the form.

Our component’s looking a little bare at the moment, so let’s fill it out.

---
title: React useState and useEffect - A Beginner's Guide
slug: common-hooks
description: In this lesson we'll take a look at the most common Hooks you'll come across and learn how to use them in your apps.
privateVideoUrl: https://fullstack.wistia.com/medias/nfosejgv9z
code: https://gitlab.com/fullstackio/books/newline-course-apps/rob-kendall-beginner-guide-to-real-world-react-app/-/tree/main/code/module_03/lesson_02
---

# Common Hooks demoed

Arguably the most common Hooks you’ll encounter are:

-   `useState` - which is used to interact with a component’s state.
-   and `useEffect` - which can be best thought of as replacing the React lifecycle events such as `componentDidMount` and `componentDidUpdate`.

Before we move onto our big project in this module, let’s take some time to familiarize ourselves with the use of these two most common built-in Hooks.

## Project setup

We're going to introduce [Create React App](https://create-react-app.dev/docs/getting-started/) in the next lesson as a great way to build new React projects. For now, though, we're going to keep things simple and familiar by using Parcel JS to set up our project to bundle and run our React code for these examples.

### Configuring Parcel JS

Create a new folder and open it in VS Code. Navigate to the terminal and let’s initialize our new project:

`yarn init -y`

Next, let’s install the packages we need:

`yarn add react react-dom`

Finally, open up your `package.json` file and add the following config so we can call `yarn start` to run the project:

```json
"scripts": {
    "start": "parcel index.html"
  },
```

### Creating the files

Now our project is set up and ready to run, we need to add the necessary files to our project before we fill them out.

-   `App.js`
-   `index.js`
-   `index.html`
-   `styles.css`
-   `UseEffectExample.jsx`
-   `UseStateExample.jsx`

`UseStateExample.jsx` and `UseEffectExample.jsx` are where we’ll do the main body of our work here, so let’s get our other files set up before we explore our example components.

#### index.js

This will be the entry point for Parcel to start loading our JavaScript from. We import our main `App` component here and call React DOM’s `render()` method to mount it into the HTML element in our `index.html` file.

```javascript { actualFilename=./protected/src/index.js endChar=147 endLine=7 startChar=0 startLine=1 statedFilename=index.js url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/index.js }
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));
```

#### App.js

In our `App` component, the main starting point for our React app, we’re using a Hook, the `useState` Hook in fact.

Let’s take a look at the file in full:

```javascript { actualFilename=./protected/src/App.js endChar=718 endLine=31 startChar=0 startLine=1 statedFilename=App.js url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/App.js }
import React, { useState } from 'react';

import './styles.css';

// components
import UseStateExample from './UseStateExample';
import UseEffectExample from './UseEffectExample';

export default props => {
  const [example, setExample] = useState('UseStateExample');

  return (
    <>
      <h1>Choose an example</h1>
      <button onClick={() => setExample('UseStateExample')}>
        useState Example
      </button>
      <button onClick={() => setExample('UseEffectExample')}>
        useEffect Example
      </button>
      <div className='container'>
        {example === 'UseStateExample' ? (
          <UseStateExample />
        ) : (
          <UseEffectExample />
        )}
      </div>
    </>
  );
};
```

Here, we’re importing our two example components, `UseStateExample` and `UseEffectExample` and using the `example` value in `state` to determine which one to show.

If `example` is set to the string ‘UseStateExample' then we’ll show the `UseStateExample.jsx` component, otherwise, we’ll show the `UseEffectExample.jsx` component.

We also have two buttons that both call the `setExample()` method to update the `example` state value, which will, in turn, change which child component is displayed.

#### styles.css

Much of the styles here are the same basic styles from our very first example that we built in Module 2, the Greeting App. We’ve added a couple of extra layout selectors at the bottom to add some flex box support and additional styling to some form elements, such as a select and label.

```css { actualFilename=./protected/src/styles.css endChar=1070 endLine=74 startChar=0 startLine=1 statedFilename=styles.css url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/styles.css }
body {
  font-size: 16px;
  line-height: 1.4;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin: 5em;
}

p {
  margin-bottom: 1.6em;
}

input,
select {
  padding: 0.5em 1em;
  line-height: 1;
  font-size: 18px;
  border: 1px solid #ececec;
}

button {
  border: 1px solid #ececec;
  background: #ececec;
  padding: 0.5em 1em;
  cursor: pointer;
  font-size: 18px;
  margin-right: 15px;
}

button:hover {
  background: #c9c6c6;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

label + input,
label + select {
  margin-bottom: 1em;
}

form button {
  display: block;
}

.container,
.dogs-container {
  padding: 0 2em 2em;
  border: 1px solid #ececec;
  border-radius: 4px;
  margin: 1em auto;
}

.form-message {
  background-color: #ececec;
  border-radius: 4px;
  margin: 1em auto;
  padding: 2em;
  font-size: 18px;
}

.dogs-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dogs-container img {
  max-width: 250px;
  max-height: 200px;
}
```

#### index.html

Once again, our `index.html` file simply provides us with a basic entry point for Parcel to follow and find our JavaScript starting point.

It looks like this:

```markup { actualFilename=./protected/src/index.html endChar=154 endLine=10 startChar=0 startLine=1 statedFilename=index.html url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/index.html }
<html>
  <head>
    <title>Hooks example demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>
```

With the basic files set up and ready to go, let's take a closer look at the `useState` and `useEffect` Hooks.

## The useState Hook

`useState` is a direct replacement for the class-based `state` you’ll see used in this fashion:

```js
// updating state
this.setState({
  someProperty: 'some value'
});

// using state
<p>The value is {this.state.someProperty}</p>;
```

As we’ve already seen in the previous module, the `useState` Hook has a very simple syntax for setting and retrieving values from it.

```js
// initial declaration
const [nameOfValue, setNameOfValue] = useState('initial value here');

// updating state
setNameOfValue('a new value');

// using state
<p>The value in state is {nameOfValue}</p>;
```

You’re not limited to what you can store inside this state Hook, just like you’re not limited with `state` used in a class component. Any valid JavaScript primitive value, array, object, and even function can be passed into and stored in `state`.

The convention is to have distinct declarations for multiple values, unless they’re logically able to be kept together, such as with form values.

```js
// multiple values
const [itemCount, setItemCount] = useState(0);
const [data, setData] = useState([]);
const [balance, setBalance] = useState(null);

// grouped values
const [formValues, setFormValues] = useState({
  name: '',
  email: '',
  message: ''
});
```

In the first group, you can see that we've got singular values such as an integer, '0', an empty array, and a `null` value. These are all distinct pieces of `state` and declared in their own variable pairs, each using a separate call to `useState`. However, for the `formValues` variable, we're calling `useState` and passing in an object with multiple properties, one for `name`, `email`, and `message`, that each represents a form field value.

We could have also separated these values out into their own `useState` call like this:

```js
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
```

This is fine and you'll see this approach quite frequently. As with a lot of things in development, there is a lot of personal preference and trade-offs on how you tackle a problem and implement a solution. For me, it makes sense to group closely related slices of data, such a collection of form field values, into a single place (i.e. the `formValues` variable above), but it does add a little more overhead in dealing with updates to any particular form field's value. Conversely, if you have a really large form with a lot of field values, breaking each one into a separate call to `useState` could potentially create a lot more code for you to manage and a very large component.

With the explanation in the bag, let’s build a little example app to demonstrate how to use `useState` and the sorts of values it can be used with.

First things first: open up the `UseStateExample.jsx` file, where we’ll need to import React and create the empty component’s skeleton:

```javascript { actualFilename=./protected/src/UseStateExample-skeleton.jsx endChar=126 endLine=8 startChar=0 startLine=1 statedFilename=UseStateExample.jsx url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/UseStateExample-skeleton.jsx }
import React, { useState } from 'react';

const UseStateExample = () => {
  return <></>;
};

export default UseStateExample;
```

We want to take a look at how to effectively use the `useState` Hook here. To do that, we’re going to build an HTML form that will update values in our component’s state, and display a nice message to our user once they’ve submitted the form.

To do that, we’ll need a few things:

-   An object in `state` to track our state values
-   A value in `state` to determine if we should show the message (i.e. has the form been submitted?)
-   Methods to handle changes in the form elements and form submission
-   An HTML form

Our component’s looking a little bare at the moment, so let’s fill it out.

### Adding in state

The very first thing we’ll do is add our `state` values and items, right at the top of the component.

```javascript { actualFilename=./protected/src/UseStateExample.jsx endLine=9 startLine=4 statedFilename=UseStateExample.jsx url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/UseStateExample.jsx#L4 }
  const [showMessage, setShowMessage] = useState(false);
  const [formValues, setFormValues] = useState({
    name: '',
    age: '',
    fruit: ''
  });
```

You'll see that we really can store just about anything you want into `state`. Our first state variable, `showMessage` is going to hold a boolean value, whilst our second, `formValues` holds an object with some default key-value pairs in there where we’ll track the input from our user.

> You don’t have to add the keys in like we’ve done here, but it’s good practice to do so. It’ll let you get an idea of what data our form will capture and what the expected type of that data will be, without having to run anything.

### Event handling methods

Next, let’s map out our `state` updating methods, our event handlers: one for a change of any form field values, and one to handle the form submission.

```javascript { actualFilename=./protected/src/UseStateExample.jsx endLine=23 startLine=11 statedFilename=UseStateExample.jsx url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/UseStateExample.jsx#L11 }
  const handleChange = evt => {
    const updatedFormValues = {
      ...formValues,
      [evt.target.id]: evt.target.value
    };

    setFormValues(updatedFormValues);
  };

  const handleSubmit = evt => {
    evt.preventDefault();
    setShowMessage(true);
  };
```

There are a couple of things to notice here. In the `handleChange` event, you can see we’re still using the `evt.target.value` to retrieve the current value from the underlying HTML element (e.g. a text input field), but we’re creating a new `updatedFormValues` object first. We're using the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (the three dots you can see before `formValues`) which will essentially copy everything from the current `formValues` object in `state` into our `updatedFormValues` object.

```javascript { actualFilename=./protected/src/UseStateExample.jsx endLine=15 startLine=11 statedFilename=UseStateExample.jsx url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_03/lesson_02/protected/src/UseStateExample.jsx#L11 }
  const handleChange = evt => {
    const updatedFormValues = {
      ...formValues,
      [evt.target.id]: evt.target.value
    };
```

Immediately after this, we use the bracketed notation `[evt.target.id]` to reference a property dynamically on the `updatedFormValues` object, specifically referencing using the form field's `id`. If it exists on the object then the value we assign to it (e.g. `evt.target.value`) will be updated. If it doesn't exist, then a new property will be created and assigned the value of `evt.target.value`.

Rob Kendal

Arguably, the most common hooks will encounter our use state, which is used to

the component state and use effect, which can be best thought of as replacing

lifecycle events such as component did mount and component did update.

Before we move on to our big project in this module though, let's take some

ourselves with the use of these two most common built in hooks.

We're going to introduce the create react app in the next lesson as a great way

For now though, we're going to keep things simple and familiar by using parcel.

setup our project and bundle and run our react code for these examples.

The first thing to do is to configure parcel.js.

So I've got a brand new folder here open in Visual Studio Code.

I'm going to navigate to the terminal window here and initialize our project by

And finally, if we open up our package.js and file, let's add the following

we can call yarn start to run the project.

So we'll add the scripts property and then in here we can add the start command

will be very similar to the first demo that we did, parcel index.html.

Now our project setup and ready to run, we need to add the necessary files to

So over in the file window here, we're going to add an app.js component.

We're going to add index.js which will be our starting point.

Stiles.css to hold our styling for the two examples.

The use effect example.jsx which will be our use effect example component.

And then finally our use state example.jsx which will be our use state example

Use state example and use effect example where we'll do the main body of our

So let's get the other file set up before we explore our example components.

So the first thing is over in index.js here.

So over in this index.js file, this will be our main entry point for parcel to

We'll import our main app component here and call react DOM's render method to

to the HTML element in our index.html file.

So I'm going to start by importing react from react and import react DOM from