ReactJS and Flux: Learn By Building 10 Projects

Get the real world experience by building professional projects in React and Flux
4.3 (191 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.
1,298 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 60
  • Length 11 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course Description

The problem of scale and complexity creates new challenges for system designers and force us all to fundamentally innovate processes and paradigms for software creation. React and Flux are Facebook's response to their scaling problems and these technologies have opened up new avenues for all web programmers worldwide. React has become the buzzword as it provides a cool new framework to solve real world problems and if you are a web developer you must learn this amazing new technology.

This is where our Projects Using React JS and Flux course comes in. The course has been meticulously designed in a manner to help you understand the technology as well as have a little fun with them. Using 10 different projects, we will get you on board on how to use ReactJS and Flux to make your application unique, just like you!

What are ReactJS and Flux?

Created by Facebook, both technologies were designed to simplify the process of coding and making applications. ReactJS is a powerful JavaScript library that uses an XML-like syntax called JSX to describe component's DOM representations. It allows you to not only easily create interactive User Interface (UI) components, but also reuse them when needed in other projects.

On the other hand, Flux is an application architecture that is used for creating dynamic client-side JavaScript web applications and works alongside ReactJS. Flux is used to maintain a unidirectional data flow, in order to deal with scalability issues that can arise in the MVC and simplify the data flow.

The Projects Using React.JS and Flux tutorial is the perfect way to not only learn these technologies, but also understand how they can be practically applied to create applications. It will also give you a working idea of other technologies that can be used in tandem with these technologies.

In this course, you will build the following 10 projects:

Project 1 – Bootstrap React Components – This is a starter project to help you understand how to use Bootstrap to create basic React components.

Project 2 – Github Profile Viewer – Learn how to use ReactJS to create a UI and fetch data from the Github API.

Project 3 – Quick Quiz – Design a simple React quiz application

Project 4 – Movie Find – Learn how to create a movie find database that uses the OMDB API to fetch movies from the database.

Project 5 – Contact List – Create a contact list and learn how to use the Firebase database technology

Project 6 – Stickypad Notes - Create a fancy ToDo List that uses a Stickypad image for its background

Project 7 – InfoFinder Search Engine – Learn how to use the DuckDuckGo API to design a fully-functional search engine.

Project 8 – Youtube Gallery – Create a complex video gallery that allows you to add YouTube videos using just the ID of the video.

Project 9 – Socket . io Chat – Learn how to create a functional chat application that allows you to create a username and send messages back and forth over web sockets.

Project 10 – Workout Logger – Finally one of the most interesting and the most complex application in the list, this Workout Logger will have a mobile friendly interface and will also teach you how to create a local storage.

At the end of this course, not only will you have 10 functional applications ready for use, but you will also learn how to use React.JS and Flux to create interesting web and mobile applications. Enroll now and become a React and Flux wiz.

What are the requirements?

  • Basic web development knowledge of HTML, CSS and JS
  • Basic Knowledge of React

What am I going to get from this course?

  • Get Conceptual understanding of ReactJS and Flux
  • Learn practical application of ReactJS
  • Learn professional tricks for smart web development
  • Master the latest technologies building real world projects

What is the target audience?

  • Students who have basic understanding of React and Flux and want to learn practical development using these technologies

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course Introduction
Introduction
Preview
03:21
Section 2: Bootstrap React Components
Section Intro
Preview
01:03
Setup React & Bootstrap
Preview
12:29
Creating React Components
13:54
Component Props
12:13
Working With State
11:51
Bootstrap React Components Quiz
6 questions
Section 3: Github Profile Viewer
Section Intro
Preview
00:59
Files & Webpack Setup
Preview
17:27
Main App Component
Preview
15:36
Profile Component
19:48
RepoList & Repo Components
12:28
Search Component
07:36
Github Profile Viewer Quiz
5 questions
Section 4: Quick Quiz Application
Section Intro
00:53
App Component Setup
13:00
QuestionList & Question Component
18:06
Quiz Logic
17:17
Quick Quiz Application Quiz
4 questions
Section 5: MovieFind
Section Intro
01:11
Flux Structure & Gulp Part A
09:44
Flux Structure & Gulp Part B
13:22
Flux Setup & Preperation Part A
09:55
Flux Setup & Preperation Part B
10:33
SearchForm Component
15:10
Working With The API
18:12
Displaying Results
18:36
Quiz
5 questions
Section 6: Firebase ContactList
Section Intro
01:02
Flux Boilerplate Setup
12:34
Adding Contacts To Store
16:00
Persisting Data To Firebase
12:20
Listing & Deleting Contacts
16:28
Edit & Update Contacts Part A
11:32
Edit & Update Contacts Part B
12:16
Quiz
5 questions
Section 7: Stickypad Notes
Section Intro
01:08
Stickypad Boilerplate Setup
12:33
AddNoteForm Component
15:21
Add & Fetch Notes From MongoLab
19:06
Display Sticky Notes
09:07
Delete Sticky Notes
08:46
Stickypad Notes Quiz
4 questions
Section 8: InfoFinder Search Engine
Section Intro
01:10
InfoFinder Fluxboiler Setup
10:00
Search Form
08:53
Fetch Data From DuckDuckGo API
13:51
Display Results
11:19
InfoFinder Search Engine Quiz
5 questions
Section 9: Youtube Gallery
Section Intro
00:53
Boiler & Add Video Form
14:21
Persist Data To Firebase
12:24
Displaying Videos
14:03
Deleting Videos
10:37
Youtube Gallery Quiz
4 questions
Section 10: Socket.io Chat App
Section Intro
01:08
Webpack & React Setup
15:38
Server Connection Setup
16:34
Adding Messages
16:24
Display Messages
10:58
Username Functionality
16:49
Socket.io Chat App Quiz
5 questions
Section 11: Workoutlogger
Section Intro
01:21
Setup & ShowForm State
14:02
Add Workout Form
13:45
Using LocalStorage
12:18
Fetch & Display Workouts
10:31
Deleting Workouts
08:24
Workoutlogger Quiz
5 questions
Section 12: Course Summary
Summary
03:35

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Eduonix Learning Soultions, 1+ Million Students Worldwide | 200+ Courses

Eduonix creates and distributes high quality technology training content. Our team of industry professionals have been training manpower for more than a decade. We aim to teach technology the way it is used in industry and professional world. We have professional team of trainers for technologies ranging from Mobility, Web to Enterprise and Database and Server Administration.

Instructor Biography

Ready to start learning?
Take This Course