Immutable JS – Redux Tutorial #2 – React.js Tutorial



Immutable Javascript means that we’re never going to change a value once it’s been set on an object. It might sound complicated, but it’s really quite simple. We simply always create new objects and copy their values over.

If you want to learn Redux for React.js applications, you have to know how to code immutable JS objects, since it’s built upon that. Instead of changing values on a store, we write reducers to modify those values and return a new object instead.

source

Redux Tutorial #1 – React js tutorial – How Redux Works



This Redux tutorial series will show you the schematics of a Redux application. Redux is AWESOME, but it takes a bit to get it setup. There really aren’t a lot of moving parts, but there are a lot of ways that you can configure it – namely – configure the store.

Redux is like Flux in several ways, but it’s different as well. It has these pieces:
– Provider: wraps your application, injecting the store
– Store: one large store that contains the state for your entire application
– Reducers: reducers listen to actions and make changes on the store values. They also cannot mutate the data on the store in any way, but must return a new set of data.
– Actions: pretty much just like flux actions, the only difference is that async can be handled in multiple different ways depending on store “middleware”
– Components: React components can be injected with various pieces of store data. React components also trigger Redux actions. This is what makes it all come together.

source

REACT FLUX TUTORIAL #14 – React & Flux Memory Leaks



React Virtual DOM helps you avoid a lot of memory leaks, but they still can happen. Here’s what memory leaks are, how they show up in a React JS Flux application and how to solve them when they happen.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/r…

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)

React JS Flux #13 – Async Flux Actions

React JS Flux #14 – React Flux Memory Leaks


source

REACT FLUX TUTORIAL #13 – Asynchronous & AJAX Flux Actions



Let’s do asynchronous flux actions now! We can easily load in data via Ajax and trigger multiple dispatches as the data loads. This will result in our React app remaining synchronous while the Flux portion handles all the async operations.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/r…

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)

React JS Flux #13 – Async Flux Actions


source

REACT FLUX TUTORIAL #12 – Flux Actions



Flux Actions will complete the circle on our Flux application. Components call actions which, in turn, send dispatches to the dispatcher. Each action needs to include an action type, and optionally any additional payload.

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 #11 – The Flux Dispatcher



Now, let’s add a Flux Dispatcher to our application. The dispatcher will route all events to our store, which will use a single switch statement to determine which events to respond to.

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 #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