Learn Flux-architecture, Mdx and Sequelize

As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared between components? 

These are the questions that Flux was built to answer.

In this series, we will explore React Flux, using ES6 (ES2015), babel, and webpack to manage our developer workflow.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React: Flux Architecture (ES6)

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

The X in MDX

Kathleen McMahon walks us through a real-world MDX digital garden implementation

Digital Gardening with MDX Magic

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

Flux Architecture: Overview and Project Setup

In this lesson we'll create a very simple application dispatcher utilizing the open source flux dispatcher from Facebook.

Flux Architecture: Application Dispatcher

In this lesson we'll create our Flux application's store which will manage the state of our application.

Flux Architecture: Application Store

In this lesson we'll create our initial components using the architecture we've built so far.

Flux Architecture: Components/Views

In this lesson we'll shift the responsibility of managing the state of our application over to a higher-order component rather than having each component managing it's own state.

Flux Architecture: Higher-Order Components

In this lesson we'll organize our components by feature.

Flux Architecture: Project Organization

Using our established architecture we'll make short work of a few remaining tasks to meet our application requirements.

Flux Architecture: Component Wrap Up

In this lesson we'll simplify future development by reducing the logic contained in our application's store.

Flux Architecture: Dumb Stores

In this lesson we'll build our actions which will be sent to our dispatcher.

Flux Architecture: Application Actions

In this lesson we'll introduce routing into our application using react-router 1.0

Flux Architecture: Routing with react-router 1.0

Sequelize is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.

sequelize

Sequelize attribute getters and setters are a convenient way to encapsulate extra logic for model properties. In this video, we'll cover adding getters and setters to enhance and even virtualize a column.

Sequelize: Getters, Setters and Virtual Columns

Models in the Node.js ORM, Sequelize, can be expanded with both class level and instance level functions. This video will show you how to extend your models to add helpers or business logic, and explain the methods execution scope.

Sequelize: Class & Instance Methods

Javascript and database systems tend to be at odds with regard to how tables and columns should be named. Sequlize provides all the tools necessary to satisfy naming conventions in both your Node.js code and in your SQL database.

Topics

Instructors

Content Type