Learning React

Handling input, form, and browser events are essential for good web experiences. We will learn how to handle various events in our React components.

   •  Introduce various event types individually

   •  Implement event handling logic

   •  Utilize event handling behavior throughout React components

Validating form data before submission is important. We will learn how to check field values and show error messages when invalid.

   •  Demo the desired behavior of our form validation

   •  Implement validation solution to handle form submission

   •  Make sure empty or malformed info isn’t submitted

Interactive apps and components demonstrate what makes React powerful. Building a dynamic shopping list will show us how to piece together our knowledge so far.

   •  Understand the desired behavior of our shopping list

   •  Review and implement state modification logic for list items

   •  Add, delete, and toggle items in our shopping list state

Refreshing the browser will reset state and erase any state modification. We need to save the state to prevent losing changes on refresh.

   •  Implement logic state into Local Storage

   •  Retrieve saved Local Storage data and update the component state

   •  Use Local Storage to persist state in React when needed

Modular code is essential to building complex React apps. We will learn about the app we’re going to build that uses this pattern.

   •  Learn about the goal of this section.

   •  Get Visual overview of the completed Address Book app.

   •  Introduce first step of creating modular components.

Stateful and Stateless Components play important roles in React apps. We will learn about their differences, and how to implement them.

   •  Know the essential differences between Stateful and Stateless Components

   •  List out responsibilities and differences between Stateless and Stateful Components

   •  Implement simple examples of Stateful and Stateless Components

Passing down props to nested components is essential to render content correctly. We will learn how to pass down props as we map over our contacts.

   •  Identify the JSX to extract into a separate component

   •  Cut and paste JSX into separate component

   •  Make sure app content is still rendering as expected

Nested components need to access and update the parent component’s state. We will learn how to update the parent state from within a nested component.

   •  Know that Nested component needs to update parent component when clicked

   •  Create click handler and pass as prop to nested component

   •  Interact with nested Card component to update parent state

When reloading the page, the state of our React app is lost. We will learn how to save data in the browser’s local storage to persist the state after reloading.

   •  Reload the page loses our favorites state

   •  Implement local storage to save favorites state

   •  Toggle favorites and reload page to view persisted data

In this video, we will get introduced to a new concept of Hooks.

   •  Learn about in brief what hooks are all about

In this video, we will look into how to implement the useState and useEffect.

   •  Learn by example how to implement the useState and useEffect hooks using the card component

Complex apps often demand a multi-page experience. We will learn about the multi-page React app we’re going to build.

   •  Learn about the goal of this section

   •  Visual overview of the completed multi-page app

   •  Introduce next step of configuring React Router

Routing based on URLs is essential for multi-page web apps. We will learn how to use React Router to handle multiple pages.

   •  React Router provides components to configure multiple routes

   •  Utilize provided components to render URL-specific content

   •  Click links to change to different pages

URL values can be dynamic, but sometimes entered incorrectly. We will learn how to handle dynamic URL values, and error states.

   •  URLs need to support dynamic values

   •  Use React Router to match dynamic value, or display error

   •  Click to verify dynamic URL value and error handling

When configuring routes, it may be practical to move render code into separate components. We will learn how to create and render external components for our routes.

   •  Route configuration can get bulky with render logic

   •  Extract render props into separate components and use them

   •  Verify that restructured rendering works equivalently

In a multi-page app, URL structures may change, therefore requiring redirects. We will learn how to redirect from old to new URLs, and redirect based on a state condition.

   •  Know that when URL structures change, existing routes will no longer render

   •  Use provided Redirect component to handle old URLs

   •  Enter old URL, verify redirect to new URL pattern

Interacting with third party APIs is essential web apps. We will learn how to pull data from the Star Wars API.

   •  Learn about the goal of this section

   •  Visual overview of the completed app pulling SWAPI.co data

   •  Introduce next step of fetching data from Star Wars API

The Star Wars API has the data we need to populate our component state. We will learn how to fetch and render a list of vehicles.

   •  Fetch all vehicle data from SWAPI.co

   •  Fetch and iterate through data to output vehicle links

   •  Use unique links to show specified content

The main App.js file is overloaded with a lot code and logic. We will extract most of the logic into separate components.

   •  App.js now contains a mix of all the logic

   •  Extract logic into separate components for better organization and maintainability

   •  Code is now more manageable, and ready for more complexity

Fetching specific vehicle details from the API is required when navigating. We will learn how to fetch single vehicle data.

   •  Fetch specific vehicle data when a link is clicked

   •  Fetch data by calling SWAPI with specific vehicle ID

   •  Update component state, and display specific vehicle info

App state is lost when refreshing the page, and data is fetched every single time a link is clicked. We will learn how to save data and prevent unnecessary API requests.

   •  Know that our state is lost when the page is reloaded

   •  Save data into local storage, populate component state after reloading

   •  Unnecessary API calls are prevented, data displays instantly after click

We will get to see how to build React App to optimize production.

   •  Get introduced to Netlify

   •  Get help from the deployment application documentation to run commands

   •  Proceed to build the App

We will deploy to Netlify using the drag and drop.

   •  Upload the build directory to Netlify

   •  Get to know the loop holes and learn to solve them

We will deploy to Netlify using the command line.

   •  Install the Netlify CLI

   •  Login into Netlify using the login command on the terminal

   •  Follow the steps that will get us to deploy Netlify using the command line

We will deploy to Netlify using continuous deployment.

   •  Get an overview of continuous deployment

   •  Configure the init command to initiate continuous deployment

We will see how to Eject from CRA and even look at more hosting options.

   •  Learn about the command used to Eject from CRA

   •  Learn about Webpack, Babel, Zeit and code sandbox

   •  Learn about cloud deployment options like AWS EC2, Digital Ocean’s droplets, Hostgators, and Cyberduck