React Basics

React Basics

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 13h 05m | 3.31 GB

Take a dive into the React world, complete with the brand new Hooks API. Learn how to “think” in components, dataflow and master JSX to build React applications the modern way.

What you’ll learn

Starting from the beginning you’ll learn all the main concepts of React, the best practices and comprehensive chapters will allow you to deep dive. Then, put your new knowledge together by building a real-world React application.

  • Component Architecture and Theory
  • Deep understanding of JSX
  • Functional components and props
  • React DOM vs DOM Browser
  • Functionality
  • Component Thinking
  • HTTP Sample
  • Router Basics
  • Available Forms
Table of Contents

The Missing Introduction to React
Rendering view with HTML
Bootstrapping React in HTML
Render an element with React.createElement
Rendering nested elements with React.createElement
What is JSX?
Creating view with JSX
The relation between HTML and JSX
Accessibility and ARIA in JSX
Interpolating values in JSX
Using expressions in JSX
Introduction to Components
Pure functions
Components as functions returning view
Passing props to Components
The children prop
Setting up a dev environment with create-react-app
Isolating Components as exports and imports
Adding an event handler to an element
Adding state with the useState hook
One-way Data Flow in Components
Building re-usable Components
Introduction to the React reconciler
Introduction to the React Dev Tools
Conditional rendering with an if statement
Conditional rendering with the ternary operator
Conditional rendering with the boolean AND operator
Interpolating Arrays in JSX
Exploring Array.map
Using Array.map to render an Array
Understanding the key prop
Filtering collections client side with Array.filter
Mapping an Object to view
Handling basic side effects
Understanding shallow dependency checks
Using the empty dependency Array in useEffects
Cleaning up after side effects
JavaScript closures and the useEffect hook
Creating controlled Components
Binding multiple form controls to Component State
Submitting form data
Updating form State from code
Using a textarea
Using a select
Using a checkbox
Grouping checkboxes together
Using radio buttons
Loading data into a form
From design to rough Component outline
Building a static React view from the design
From static view to statefull app
Making sure the app is accessible
Identifying re-usable code
Understanding HTTP requests
Create a basic HTTP server in Node Express
Fetching data from the server
Sending data to the server
Avoiding State changes on unmounted Components
Using async/await
Setting custom HTTP headers
Adding React Router to your application
Navigating with the router’s Link Component
Understanding route parameters
Updating the browser title
Making routing accessible
Introduction to the application
Adding a header and footer
Displaying the menu
Displaying the ice cream images
Adding a loading message
Routing to an edit component
Creating the main navigation
Fetching the menu item in the edit component
Editing the data in a form
Routing accessibility
Adding a skip navigation link
Building a validation system
Displaying validation messages
Accessible validation
Deleting a menu item
Fetching the stock ice cream list
Displaying the stock list
Extracting the edit form
Creating the add page