Learning React Application Development with Redux and NodeJS
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning React Application Development with Redux and NodeJS to your Wishlist.

Add to Wishlist

Learning React Application Development with Redux and NodeJS

Create scalable applications with ReactJS and Bootstrap
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12 students enrolled
Created by Packt Publishing
Last updated 6/2017
Curiosity Sale
Current price: $10 Original price: $125 Discount: 92% off
30-Day Money-Back Guarantee
  • 1 hour on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Take a look at Redux architecture with ReactJS and NodeJs
  • Integrate Bootstrap's nav component
  • Integrate third-party APIs such as Facebook
  • Create small applications using Bootstrap and ReactJS npm modules
View Curriculum
  • The course is designed to introduce you to creating small components for React JS and React-Bootstrap. It also gives us an understanding of JSX, Redux, and NodeJs integration for advanced concepts such as reducers, actions, and stores. All the concepts are explained by developing real-world examples. By the end of this video, you will be equipped to create responsive web applications using Bootstrap-style and React-Bootstrap components with ReactJS and will have gained an insight into best practices you should follow.

Bootstrap is one of the most popular front-end frameworks, and integrating it with React allows web developers to write much cleaner code. This video will help you gain a thorough understanding of the Bootstrap framework and show you how to build impressive web apps. In this video course, you will get an overview of the features of Bootstrap and ReactJS, including integrating React-Bootstrap components with ReactJS. You will understand the benefits of using JSX and the Redux architecture; React server-side rendering will also be demonstrated. The goal is to help viewers build responsive and scalable web applications with ReactJS and Bootstrap.

About the Authors :

Harmeet Singh is a senior UI developer working for CIGNEX Datamatics with varied experience in UI. He hails from the holy city of Amritsar, India. His expertise includes  HTML5, JavaScript, jQuery, Angular JS, and Node.js. His interests include music, sports, dancing, and adventure. Harmeet has given various presentations and conducted many workshops on UI development. On the academic front, Harmeet is a graduate in IT, and is a GNIIT diploma holder from NIIT, specializing in software engineering

Mehul Bhatt has over 11 years of experience and serves as a user experience (UX) & user interface (UI) practice manager at CIGNEX Datamatics. As a manager, he handles a wide range of onshore and offshore teams. He hails from the princely state of Jamnagar, Gujarat, India. His expertise includes HTML5, CSS3, JavaScript, jQuery, application development, guiding and mentoring developers, and more, which helps clients to take their business to the next level in the open market.

Mehul has also won many awards for his excellence. His interests include learning new technologies, music, drama, sports, and exploring new places.

Mehul is Microsoft certified in HTML, CSS, and JavaScript. On the academic front, he holds a post graduate diploma in multimedia, specialized in web development, which gives him the skills to understand customer requirements and excel in the execution of the required performance with the best code quality standards.

Who is the target audience?
  • This video is for anybody who is interested in modern web development and has an intermediate knowledge of HTML, CSS, and JavaScript. A basic knowledge of any JavaScript MVC framework would also be helpful.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
15 Lectures
Redux Architecture
4 Lectures 17:21
This video gives an overview of the entire course.
Preview 02:27

As we know, in Single Page Applications (SPAs) when we have to contract with state and time, its difficult to handgrip state over time. Let’s see how redux helps us solve this problem.

What Is Redux?

Redux is inspired by the Flux pattern, so it also follows its architecture. That means state changes will be sent to the store and the store will handle actions to communicate between components. This video shows us the redux architecture in detail.

Architecture of Redux

We have seen that Redux's architecture is very powerful and it has reusability as well. Let's look at a practical example to see how Redux works with React. In this video, we will create our Add Ticket form application in Redux.
Redux Setup
Routing with React
5 Lectures 13:13
We have learned about the Redux architecture and how we can handle the two states, the data state and the UI state, to create single page applications or components. Let's look at some of the advantages of the React router.
Preview 01:56

The React router has been packaged as a different module outside the React library. Let’s explore in this video how to install and setup application.
Installing the Router and Application Setup

As we've already created HTML, now we need to add a Bootstrap navbar component in bootstrap-navbar.js that we created earlier. This video will guide us in configuring the routing.

Creating Routes

Suppose if we need a different layout for every component, such as the home page, with two columns, and other pages should with column, and they both share common assets such as headers and footers. Let’s see how we can do we create this kind of layout.
Page Layout

We are done with creating layout-specific components, but we still need to look at how we can create nested routes for them so that the components are passed into parents with props.
Nested Routes
3 Lectures 17:39
When we are talking about the React API, it's the first step to getting into the React library. Different uses of React will provide different outputs. Let’s take a look at the React Top-level API.
Preview 02:45

A declared variable gets overridden if we declare it again beneath its declaration, the same way as ReactDOM.render overrides its declared properties. This video shows how we can have a custom wrapper in an API.
Object-Oriented Programming

React integration is nothing but converting a web component to a React component using JSX, Redux, and other React methods. Let's see a practical example of React integration with another API.
React Integration with Other APIs
React with Node.js
3 Lectures 19:23
We need to create a package.json file for our project, which includes the project information and dependencies of the npm modules. npm is very useful for JavaScript developers to create and share reusable code to build an application and solve particular problems while developing it.
Preview 06:00

Let’s include and modularize our Bootstrap application that we have developed so far. In the application, we will see a static user profile raising helpdesk tickets online and rendering React components server-side.
A Responsive Bootstrap Application with React and Node

React provides the tools for developers to debug React code. It allows us to inspect a Reactrendered component with the component hierarchy, props, and state.
React Developer Tools
About the Instructor
Packt Publishing
3.9 Average rating
7,297 Reviews
52,184 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.