ReactJS and Flux: Learn By Building 10 Projects

learn to convert bootstrap components into react components and build basic components. explore props, state, prop types, and lifecycle methods like render and get default props while starting project 1.

Set up a bootstrap-based React project by turning a standard bootstrap template into individual React components, learning props and state, and using the React starter kit, Babel, and Bootstrap.

Learn how to pass properties to React components, set default props and prop types, enforce required fields, and customize components like nav bars and jumbotrons with props.

Explore how to manage page state with React by toggling between home and about views, passing props, handling clicks, and conditionally rendering components like the Jumbotron to build dynamic navigation.

Build a hub profile viewer app with ReactJS and Flux, learn to assemble multiple components, set up Webpack and the dev server, and implement search, forms, and events.

Set up a React and Flux project with ES2015 class components, Babel and Webpack, and GitHub API integration to build a user profile with repositories.

Create the main app component in React and integrate Bootstrap for layout. Render the app into the root with ES2015 class syntax and initial state.

Learn to fetch GitHub user data with AJAX in a React profile component, using jQuery and the GitHub API, pass data via props, and render with Bootstrap panels.

build a repo list and repo item components to display a user's repositories by fetching /user/{username}/repos with per_page and sorting by created, wiring profile to repos via props.

Create a search component in a ReactJS project that captures a username, prevents default submission, passes it to a parent handler, updates state, and fetches user data and repositories.

Create a simple quiz app in React, storing questions, score, and current question in state. Set up a project with webpack, babel, and a component structure for app and quiz.

Set up a React quiz with a stateful questions array, render question list and question components from props, and style with Bootstrap for a clean interface.

Learn to implement a ReactJS quiz: render the current question, handle answer changes, update the score with a score box, and display results with percentage-based feedback.

Build a movie finder app that searches the imdb database, fetches movie data via the imdb api, and displays results with links while learning flux architecture and gulp.

Master React and Flux by building a movie search app that uses actions, dispatcher, and stores to fetch data via ajax from the MTV API, with gulp-based bundling.

Explore the Flux structure by building a React app with a store, dispatcher, app store, actions, and constants, plus a gulp workflow for bundling and assets.

Learn to scaffold a React and Flux project: create the main app component, configure imports and rendering, and initialize the dispatcher for handling view actions.

Set up the dispatcher, constants, and actions, scaffold the store with an event emitter, and handle dispatched payloads and action types for movie searches via the API.

Create a movie results component that maps over search results to render Movie items with posters, titles, years, and imdb links, while hiding the empty state and updating without reloading.

Build a contact list manager with Flux and Firebase, adding, updating, deleting, and persisting contacts in both local app state and the Firebase database, using a Flux boilerplate.

Set up a flux boilerplate to build a contact list app with firebase as the database, wiring react components, actions, stores, and a dispatcher via npm, gulp, and project scaffolding.

Build an add contact form in a React and Flux app, dispatch a save action, and persist contacts to a store, with optional uploading to Firebase.

Learn how to persist contact data to Firebase in a ReactJS and Flux project by installing Firebase, saving contacts via an API, and fetching them to display in the UI.

Fetches and displays contacts in a table beneath the form. Renders a contact list with edit and delete options, using actions and API, with firebase persistence.

Edit and update contacts in a React and Flux app, using pre-filled inputs, on-change handlers, and an update contact action to persist changes to Firebase.

Build a sticky note to-do app using React and Flux, persisting notes to Mongul Lab database; learn to add, fetch, display, and delete notes with Ajax API calls.

Build a sticky pad to-do app with React.js and Flux, persisting notes to MongoLab via its data API, using a boilerplate, gulp tasks, and React-friendly tooling.

Build an add note form component in a React and Flux app, handle submit, dispatch add note action, and update the store with new notes.

Learn how to add and fetch notes from MongoLab by wiring an app API, Ajax calls, and Flux actions to persist notes in a MongoDB collection.

Learn to persist notes to the Mongul lab API, display them with a sticky note background, and refine styling and interactions for deleting notes.

Build a DuckDuckGo instant answer powered search engine using the flux architecture. Create a search form that calls the API and renders results in a component.

Build a bootstrap-styled search form in a ReactJS and Flux project, handling input, submit events, actions, and app store state updates to perform a search.

Fetch and store search results in state, then pass them to the search results component. Map over the results to render each item and use dangerouslySetInnerHTML to parse HTML safely.

learn to build a YouTube gallery by adding videos via YouTube video IDs, with custom titles and descriptions, persisting data to firebase, and displaying, mapping, and deleting videos.

Build a YouTube video gallery by adding video IDs, titles, and descriptions through a form. Save to Firebase and render the gallery in the app using Flux and Zimet.

Learn how to persist video data to Firebase from a ReactJS and Flux setup, including dispatching actions, updating the App Store, and wiring an API to save and fetch videos.

Fetch videos from Firebase, build video objects with id, title, and description, and render them in a video list with embedded YouTube iframes and a remove option.

Build a real-time chat application with web sockets and socket.io in a ReactJS and Flux project, covering setup, server connection, message handling, display, and user name functionality across 10 projects.

Build a real-time chat app with web sockets using socket.io in a React setup, powered by webpack, babel, and an Express server.

Create modular React components for messages and users, wire up a Node.js Express server with socket.io, and establish client-server connections to support real-time chat across sockets.

Add a message form and wire it to web sockets, emitting payloads with timestamp and text, then update the client state on server message added events.

Map the messages state to a message list, pass each message as props to a message component, and format timestamps for real-time updates via web sockets.

Implement a user form to capture and set the username, emit user joined events, and display active users while updating messages with the user's name.