React & Flux Course Description
Welcome to React and Flux Web Development for Beginners.
This course is designed for developers who know basic HTML and CSS but who want to take their skills to the next level by building data-driven web apps - the kind of apps that can be used for products or startups and the type of apps that can interact with servers.
The course is also for developers of any level who want to know and master React and Flux.
Why should you learn React js instead of Angular or Backbone or Ember or Meteor? One reason is because React is incredibly minimalistic. It focuses on reusable view components. Never have to copy and paste code again with React. Then take the Reflux design architecture and mix it with React js and you have a full-stack front-end solution that is very lightweight. Frameworks like Angular do a LOT of things, are very heavyweight, and have steep learning curves. Why use a framework that gives you stuff you don't need in every project?
React was created by Facebook, designed incredibly well, and makes fantastic data-driven websites. React Flux is a powerful combination.
React & Flux Course Content
You are going to learn a lot in this course. Here are some of the topics we cover:
Learn the importance of Bind and when and when not to use it. This is a React pre-requisite.
Get a taste of the Node Package Manager (NPM) and learn how to use it. This is a React pre-requisite.
Learn how to get Atom set up for React and JSX development. You don't have to use Atom as your IDE, but in case you don't know how to support React I go over the IDE that I will be using in this course.
If you have this error on Mac just do this in terminal:
ln -s /Applications/Atom.app/Contents/Resources/app/atom.sh /usr/local/bin/atom
Learn how to install Node Js for React development
Learn the basics of Node Js by interacting with the node shell and how to work with the node package manager (npm) in preparation for working with React
Learn how to import your own Node modules in preparing for working with React
Master the basics of working with multiple files in Node so you can build robust React apps
We will cover the tools we will be using and what each tool does - namely Node NPM packages react, react-dom, babelify, babelify-react-preset, browserify, watchify, and babel.
We are going to build a skeleton project template using Watchify, Babelify, Node, React, React DOM, and React Babelify Preset. This is called the CommonJS method in React and is the project setup that Facebook uses and recommends.
Build your very own React skeleton app
We briefly cover how you should start designing and thinking about your web apps in the "React Way" by using Components and modularization.
Learn how Bootstrap works and what you'll need to use it for React development. We also talk about some of the Bootstrap basics.
Get down and dirty with the Bootstrap grid system. I go in-depth on how to to properly lay out web apps with the Bootstrap grid system. We also talk about how to support phones and tablets with Bootstrap - responsive web design.
You will learn how to use CSS and Bootstrap with React
You will use Components, In-line styling, Bootstrap Panels, and the Bootstrap grid system to build a simple website. If you don't want to use Bootstrap use your favorite framework or your own CSS
Student solution for the exercise.
Learn how to write JSX & React code inline in your HTML files
Let's change the way we think about approaching web development. If we want to use React we need to start thinking in the React way. In this video we talk about how to approach a React project.
Let's get setting up React burned into your brain permanently.
Learn how to use the official React developer tools for Chrome and Firefox
A quiz that covers the basics of React that we covered in this section
Learn about how events work in React and what events are available for you to use
Learn how to use React Router to have multiple pages within a single page application
Learn how url hashing works with React Router
Build a website about the news going on in your country with React and React Router
Learn about some of the issues that might spring up when using React with other frameworks and how to solve them
Learn how to write comments inside of your JSX for your React apps
Learn how to build reusable forms in React with validation built-in
Continue working on your form and learn about using refs to get your container components to talk to their children components
Lets build a calculator with React
Fantastic Student Solution using Material Design
Learn how to set up a Node and Express server that can provide mock data for your React application
Learn how the Internet works with Clients and Servers and HTTP requests for your React and Flux apps
Learn how to use the Postman tool to hit APIs so you don't have to write a bunch of code first in your React applications
Learn the importance of Bind and when and when not to use it. This is especially important when working with promises in React
You'll learn how to use the Fetch framework to make HTTP requests with React. We also play around with our Node and Express server.
You are going to use an online API service to build a Weather component/app
Student Solution to the Weather App API
An in-depth look into the Flux architecture. Flux can be highly complex so I break it down into simple terms and show you some example code so you can see the benefit of using Flux in your React applications.
Get an insight and overview into how React and Reflux work together to reduce the complexity of manually implementing Flux
Learn how to implement Actions & Stores with React and Reflux making Flux much easier to digest
Learn how to set listeners in your React components so data automatically updates when it changes via Reflux trigger
In this lesson we'll add an input field and make a post request to the server. You'll learn how to trigger data changes in your React app
You are going to create a Pokedex with React and Flux. This exercise will be time consuming and will not be easy. It will help you master thinking in React.
The student who delivers to me the best implementation of this project will receive an official shout out from me an have their React course permanently displayed/referenced in the Devslopes React Course.
Time to set up our React web app for development
Learn how to make a reuseable navigation bar with Bootstrap and React
Learn how to use React state to handle hovering on navigation bar links
We implement React Router into our project. You also learn a few new things such as React Router Index Route and how to use route parameter to pass data through a url. Lastly we'll talk about componentWillReceiveProps and when to use it
In this video we demonstrate the power of reuseability and React when we drop in our previously built lead capture form. We also make some modifications in preparation for implementing the Flux and Reflux architecture.
We will add Reflux to our project. Then we will create a server with Node and Express that has an endpoint to take email subscribers. We then connect our lead capture form to the server.
I am a veteran mobile developer having built over 57 mobile apps for iOS and Android, and I've also build multiple Unity 3D games, including Call of Duty Ghosts mobile.
I also spend most of my days now as a professional engineering instructor - changing the lives of students throughout the world - helping them make amazing salaries as engineers.