Learn React 16 And Redux By Building Real World Application

In this lesson,I will introduce you the concepts that we are going to cover in this module. I will teach you all the basics or fundamentals of React in this course

In this video, You are going to learn how to create App using React App cli

A React element is a light, stateless, immutable primitive in React. There are two types: ReactComponentElement and ReactDOMElement. React- DOMElements are virtual representations of DOM elements. ReactComponent- Elements reference either a function or a class corresponding to a React component. 

You can also create nested elements in React. React will use this.props.children to render the nested child element

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.

A React component is basically any part of a UI that can contain React nodes (via React.createElement() or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood.

As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don’t use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypesproperty:

Nested components in React.js help you create more complex view element structures

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive. ... You've interacted with state-based systems your entire life — you just haven't realized it!

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

Pass event handlers and other functions as props to child components:

<button onClick={this.handleClick}>

If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).

JSX is an extension of JavaScript that’s similar to XML and is only intended for use by code- transformation tools 

I will cover the basic summary of this module. What topics you have learned in this module

In this module you will learn about State and props in React. I will also explain you how to communicate with child components via Props.

A state is an information available to a program at a given moment on time.

setState() is the only legitimate way to update state after the initial state setup.

React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active.

React components with state render UI based on that state. When the state of components changes, so does the component UI.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

In React props is short for properties. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.

The primary purpose of props in React is to provide following component functionality:

• Pass custom data to your React component.
• Trigger "state" changes (more on this later).
• Use via this.props.reactProp inside component's render() method.

You can communicate from parent to child component via props. You can pass functions, objects and arrays inside the child components. Child component can access this data via props.

The beauty of React is the splitting of complicated UI’s into little, bite-sized bits. Not only can we thus compartmentalize our app, we can also customize each compartment.

Through lifecycle methods, we can then control what happens when each tiny section of your UI renders, updates, thinks about re-rendering, and then disappears entirely.

Lifecycle methods are special methods attached to class-based React components that will be executed at specific points in a component's lifecycle. A lifecycle is a way of thinking about a component. 

Lifecycle methods can be broken into two main groups:

• Will methods—Called right before something happens
• Did methods—Called right after something happens

Components have four main parts of their lifecycle and corresponding lifecycle methods for each:

Initialization—When a component class is being instantiated.

Mounting—A component is being inserted into the DOM.

Updating—A component is being updated with new data via state or props. Unmounting—A component is being removed from the DOM. 

Mounting is the process of React inserting a component into the DOM. 

Updating lifecycle methods. When a component is being updated, several hooks fire that let you determine whether the component should be updated at all, how to update, and when the update is done. 

More recent versions of React introduced a new concept called error boundaries to help deal with this. If an uncaught exception is thrown within a component’s con- structor, render, or lifecycle methods, React will unmount the component and its children from the DOM.

In this video, we will create React Application using create-react-app cli.

In this video, I am going to add bootstrap in React Project.

A common task for front-end developers is to simulate a backend REST service to deliver some data in JSONformat to the front-end application and make sure everything is working as expected. ... JSON Server is a simple project that helps you to setup a REST API with CRUD operations very fast.

Promise based HTTP client for the browser and node.js

Features

• Make XMLHttpRequests from the browser
• Make http requests from node.js
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Cancel requests
• Automatic transforms for JSON data
• Client side support for protecting against XSRF

In this video, we will iterate the links array and render the Link component for each array element

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

In this video, we will create a header component. Inside the header component I will show you how to create navbar.

We will create custom ErrorMessage component. If something went wrong react will render or display the text from ErrorMessage component

In this video, I will show you how to create loader in react. We will use third party package for Loader component.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.

In this video, We will refactor our code to store folder. I will place action_types, reducers and context.js in a separate folder.

I will also show you how to handle Errors in Context API . we will create a new action to handle errors and dispatch the action if something went wrong.

An input form element whose value is controlled by React in this way is called a “controlled component”.

In this video, we will add state to the add link form. 

In this video, you will learn how to send the http post request from the react component to save the record.

In this video, we will create a separate reusable component for input form control. Now you can use this form control in any component.

In this video, you will learn how to validate the form in React. We will use some bootstrap classes for displaying errors and validations. I will also use external package classnames for handling validations.

React Router is the standard routing library for React. From the docs: “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in.

ReactRouter provides a push method from the history class. You can access the push method from this.props.history.push. It will allow you to navigate to specific path.

In this video, we will create a not found component. If you user will try to access the invalid path or url then our application loads the NotFound Component.

In this video, we will create a separate component for edit record.

In this video, we will setup redux into our demo application.

In this video, I will show you how to connect react application to redux. we will use react-redux package to connect with React component

In this video, we will create a delete action to delete the record from the array.

In this video, we will create an add action to create new record in Redux Store.

The standard way to do it with Redux is to use the Redux Thunk middleware. It comes in a separate package called redux-thunk. We'll explain how middleware works in general later; for now, there is just one important thing you need to know: by using this specific middleware, an action creator can return a function instead of an action object. This way, the action creator becomes a thunk.

When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn't need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can also dispatch actions—like those synchronous actions we defined earlier.

In this video, we will create async action to delete the records from the Rest API

In this section, we will create an async action creator in redux to add the data to the API

In this section, we will create an async action creator in redux to fetch the data from the API.

In this section, we will create an async action creator in redux to update the data from the API.

I will show you how to delete the document from firebase collection inside React component.

In this video, I will show you how to edit the record from the firebase collection.

In this video, we will implement the signup feature. An authenticated user can create, delete and update the links.

In this lesson, we will implement the logout feature.

In this lesson, we will implement the firebase login.

In this lesson, we will protect private route in react application. I will use firebase-auth-wrapper package to apply security on routes.

I will show you display toaster message in react application.

In this video, we will deploy the React application to firebase.