Blog - ReactJS

01a.Getting Started with React

In this first React tutorial, you will first install create-react-app, the command line tool for scaffolding React applications. You will then use the tool to scaffold...

Read

01b.Configuring your React Application

In this tutorial, we will set up our project to use Reactstrap (a package supporting easy to use React based Bootstrap 4 components). We will then introduce our first...

Read

02a.React Components
Part 1

In this tutorial, you will add the first component to your React application and update its view using JSX. At the end of this tutorial, you will be able to: Add compo...

Read

02b.React Components
Part 2

In this tutorial, we will continue modifying the menu component from the previous exercise. Instead of a list, we will use a Card component from reactstrap to display ...

Read

02x.Assignment 1-React Components

In this assignment, you will add a new component to the React application to show the details of a selected dish. You will use the Card component and the Bootstrap uns...

Read

03.Presentational and Container Components

In this tutorial, we understand about how presentational components deal with the look and feel of the app and container components deal with the data and behavior. At...

Read

04a.Header and Footer

In this tutorial, you will add in a header and a footer to our React application using two React components. This will illustrate the use of multiple components put to...

Read

04b.React Router

In this tutorial, we learn to use the React Router to configure and set up navigation among various pages in a React application. At the end of this tutorial, you will...

Read

05a.Single Page Applications Part 1

In this tutorial, you will continue to develop the React application as a single page application, integrating the various components. At the end of this tutorial, you...

Read

05b.Single Page Applications Part 2

In this tutorial, you will integrate the DishdetailComponent into your single page application. You will use a route parameter in the URL to pass in the details of the...

Read

05x.Assignment 2-React Router and Single Page Applications

In this assignment, you will add a new component to the React application to show the details of a selected dish. You will use the Card component and the Bootstrap uns...

Read

06a.Controlled Forms

In this tutorial, you will learn about using controlled components to design controlled forms in your React application. At the end of this tutorial, you will be able ...

Read

06b.Controlled Form Validation

In this tutorial, you will be introduced to simple form validation for controlled forms in React. At the end of this tutorial, you will be able to: Configure and perfo...

Read

07.Uncontrolled Forms

In this tutorial, we will create an uncontrolled form within our React application using the uncontrolled component approach. At the end of this tutorial, you will be ...

Read

08.Introduction to Redux

In this tutorial, you will learn to use Redux. You will install and configure Redux and use it within your React application. At the end of this tutorial, you will be ...

Read

09a.React Redux Form

In this tutorial, you will install react-redux-form and then convert the controlled form that we created earlier into a form supported by react-redux-form. At the end ...

Read

09b.React Redux Form Validation

In this tutorial, we will explore simple form validation for react-redux-form. At the end of this tutorial, you will be able to: configure and implement simple form va...

Read

09x.Assignment 3-React Forms and Redux

In this assignment, you will be updating the React application with a react-redux-form based local form and do the form validation in code. You will add a new component...

Read

10a.Combining Reducers

In this tutorial, you will learn about how we can have separate reducers managing parts of the state, and how they can be combined together to manage the whole state ...

Read

10b.Redux Actions

In this tutorial, we will learn to define various Redux actions and implement the action creators to dispatch the actions to the Redux store. At the end of this tutor ...

Read

11.Redux Thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. In this tutorial, you will see the use of redux thunk to return...

Read

12a.Fetch from Server

In this tutorial, you will incorporate Fetch into your React app and then use it to communicate with the REST API server. At the end of this tutorial, you will be able...

Read

12b.Fetch Handling Errors

In this tutorial, you will learn how to handle errors encountered while communicating with the server. At the end of this tutorial, you will be able to: configure your...

Read

12c.Fetch Post Comment

In this tutorial, you will learn how to configure Fetch to be able to post data to the server. At the end of this tutorial, you will be able to: configure fetch to po ...

Read

13a.React Animations

In this tutorial, you will learn to implement animations in your React app using react-transition-group. At the end of this tutorial, you will be able to: configure yo...

Read

13b.React Animation Components

In this tutorial, you will learn to use react-animation-components to add more subtle animations to your React app. At the end of this tutorial, you will be able to: ...

Read

13x.Assignment 4-Redux Client-Server Communication and Fetch

In this assignment, you will update the web application to get data from the server to render the information corresponding to the leadership team of the company. In a...

Read

01a.Getting Started with React

01b.Configuring your React Application

02a.React Components Part 1

02b.React Components Part 2

02x.Assignment 1-React Components

03.Presentational and Container Components

04a.Header and Footer

04b.React Router

05a.Single Page Applications Part 1

05b.Single Page Applications Part 2

05x.Assignment 2-React Router and Single Page Applications

06a.Controlled Forms

06b.Controlled Form Validation

07.Uncontrolled Forms

08.Introduction to Redux

09a.React Redux Form

09b.React Redux Form Validation

09x.Assignment 3-React Forms and Redux

10a.Combining Reducers

10b.Redux Actions

11.Redux Thunk

12a.Fetch from Server

12b.Fetch Handling Errors

12c.Fetch Post Comment

13a.React Animations

13b.React Animation Components

13x.Assignment 4-Redux Client-Server Communication and Fetch

02a.React Components
Part 1

02b.React Components
Part 2