REACT FLUX TUTORIAL #10 – Flux Store Events



Flux Stores emit events, components listen to the events and update. It’s really that simple. Now that our component is connected to the store, let’s have the store emit change events so the component knows when to pull the latest data.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/olLI54FATb8 (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

React JS #8 – React Inline Styles & Component Arrays

React JS Flux #9 – React Flux Tutorial

React JS Flux #10 – Flux Store Events (Coming Mon, Feb 22@11CST)

React JS Flux #11 – The Flux Dispatcher (Coming Tues, Feb 23@11CST)

React JS Flux #12 – Flux Actions (Coming Wed, Feb 24@11CST)


source

REACT FLUX TUTORIAL #9 – React Flux Introduction & Flux Stores



Let’s build a Flux app with React. Flux is a pattern that Facebook created for building consistent, stable web apps with React. React really doesn’t give us a way to manage data, it simple accepts data through props or state. So, when it comes to data, there are many ways you can do it. Flux is a great, proven pattern for building apps with React.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/olLI54FATb8 (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

React JS #8 – React Inline Styles & Component Arrays

React JS Flux #9 – React Flux Tutorial

React JS Flux #10 – Flux Store Events (Coming Mon, Feb 22@11CST)


source

REACT JS TUTORIAL #8 – React Inline Styles & Component Arrays



Alright, our whole app is in React now. Here’s what I did plus some react tricks along the way.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/olLI54FATb8 (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

React JS #8 – React Inline Styles & Component Arrays


source

REACT JS TUTORIAL #7 – React Router Params & Queries



React Router has great and simple features for accessing route params and query params. Let’s get into them.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/olLI54FATb8 (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

React JS #8 – React Inline Styles & Component Arrays


source

REACT JS TUTORIAL #6 – React Router & Intro to Single Page Apps with React JS



Let’s start building single page apps with React…this is where it gets fun. We’re going to start with routing – the core of any single page application. As you’ll see, react router makes routing extremely simple. Each route simply gets a component.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries


source

REACT JS TUTORIAL #5 – Javascript Events & Data Changes in React



Let’s wrap up beginner React.js lessons with handling JS events and data changes in React.js. If you build a Reactjs app correctly, each component is able to be very “dumb”..it will only be aware of a few pieces of the application and can be reused in multiple places.

If a component is only aware of the data it needs and the event(s) it needs to fire when things change, it can be extremely decoupled from the rest of the application and less prone to break as the React JS application changes over time.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries


source

REACT JS TUTORIAL #4 – State vs Props & Application Data



A big question in React JS is State vs Props. State is essentially any data that relates to the internals of a React component, but has nothing to do with the outside world. Props are data that the React.js component depends on to function and render correctly.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries


source

REACT JS TUTORIAL #3 – Composing Multiple React.js Components



This video covers how to compose a complete React.js application component structure by building multiple components that all work together to build our application.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries


source

REACT JS TUTORIAL #2 – Reactjs Components & Rendering



The core of React js programming is React components. Just like everything in HTML is an element, everything in React is a component. In this video, we’ll break down how a component works.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

WATCH THESE FIRST:
ES6:

WEBPACK:

If you’re new to Javascript, the MODULAR JAVASCRIPT course is also helpful:


source

REACT JS TUTORIAL #1 – Reactjs Javascript Introduction & Workspace Setup



This React JS Course will help you get quickly up to pace with React.js development. React is an AMAZING Javascript framework that allows you to build extremely stable applications that are very easy to change and modify as the application changes and grows over time.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

WATCH THESE FIRST:
ES6:

WEBPACK:

If you’re new to Javascript, the MODULAR JAVASCRIPT course is also helpful:

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries


source