by Eduonix | Publisher: Packt Publishing | Release Date: November 2017 | ISBN: 9781787121362

Get the real world experience by building professional projects in React and FluxAbout This VideoThis is a starter project to help you understand how to use Bootstrap to create basic React components.Learn how to use ReactJS to create a UI and fetch data from the Github API.Design a simple React quiz applicationLearn how to create a movie find database that uses the OMDB API to fetch movies from the database.Create a contact list and learn how to use the Firebase database technologyCreate a fancy ToDo List that uses a Stickypad image for its backgroundLearn how to use the DuckDuckGo API to design a fully-functional search engine.Create a complex video gallery that allows you to add YouTube videos using just the ID of the video.Learn how to create a functional chat application that allows you to create a username and send messages back and forth over web sockets.In DetailThe 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! 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.

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