Learn Express, Redux and Tachyons

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Web Security Essentials: MITM, CSRF, and XSS

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Building an API with Express

Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue and Socket.io for Real-Time Communication

Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a `Map`, and accessing asynchronous data with `async/await`.

Pre-requisites:

- [Install curl](https://curl.haxx.se/)
- [Install node 14](http://nodejs.org/)
- Be familiar with the terminal

View the source for this project in the [project's github repo](https://github.com/xjamundx/egghead-express).

**Notes**:

- I'm not very pedantic about REST and basically just mean an API over HTTP
- [Express 5](https://expressjs.com/en/guide/migrating-5.html) is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like [express-async-errors](https://www.npmjs.com/package/express-async-errors) to add support for `async` routes and middleware

Build a REST API with Express 5 and node 14

At a high level Redux is just a dispatching system, sitting atop a finite state machine, driving our application state. It just so happens that the State ADT is good at modeling a finite state machine. It allows us to represent our stateful transactions in discrete, easily composed transactions. We can create complicated stateful transitions by composing many simple transitions into one state transaction. By using the State ADT, we should be able to model all of our application state transitions and provide a single reducer function to Redux that integrates with our state machine model.

We’ll put this theory to the test by building a Memory type game called “Anger The Bunny”.  We start of by defining our state transitions using the State ADT, starting with simple, discrete transactions and using them to create the complex transitions typical of any game. Then once we have a majority of our game logic implemented, we will integrate those with Redux.

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

Redux and the State ADT

Redux is a powerful way to manage application state, but that power can come with a lot of code. A single update can sometimes require changes across many files and the code required to define action creators and to handle those actions in your reducer can start to get pretty repetitive.

The redux-actions library offers a small but powerful API to help cut down on some of the boilerplate that is typical of an application that uses Redux to handle state management.

Reduce Redux Boilerplate with Redux-Actions

Working with forms can be laborious, but redux-form takes out the tedium and replaces it with an enjoyable way to create beautifully crafted forms. You get the benefit of integrating form state with an existing Redux application, plus the ability to track the state of your form with precision in Redux DevTools, without writing lots of boilerplate code.

In this course, we will use the redux-form package to create a form whose state is easy and enjoyable to manage. Over 46 minutes and 14 lessons, we will:
* find out how redux-form ties into a React/Redux application
* learn how to use both synchronous and asynchronous validation
* use real-world examples and effective ways of presenting relevant information to the user

Learn to create precise, reusable form components, and enjoy yourself in the process.

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

Manage React Form State with redux-form

While this course is for IBM Domino Developers who are looking to utilize Node.js alongside their applications, or Javascript developers looking to integrate with a Domino server. There are quite a few tips and tricks you can learn for integrating Node.js as a proxy server for any REST API you might want to communicate with your JavaScript Application.

We cover how you can continue to use cookies provided by IBM Domino for user authentication and authorization while accessing a Node.js / Express based application, including modifying the standard login form to expose authentication errors.  

We show how to store user level information inside a JWT giving the option to store functional levels of access safely.  This stateless token can then be decoded server side to list what user roles a user has and therefore can restrict functionality without having to refer back to Domino each time.

The course will demonstrate Create, Read, Update and Delete methods using the Domino Data Services all via the NodeJS application but still maintaining Domino security.

And finally, we show how you can reuse Domino generated HTML inside a handlebars template by scraping and manipulating the HTML.

Integrate IBM Domino with Node.js

JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers.

In this course, we will build a simple authentication server that will act as a token issuer, and we will use those tokens to access resources on an API.  Starting from scratch, you will learn how easy token based authentication can be and will understand how to use them on your APIs as well as on the front end of your web applications.

JSON Web Token (JWT) Authentication with Node.js and Auth0

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

Up and Running with redux-observable

Managing state in modern web applications is hard. As applications grows in complexity, keeping track of state changes and mapping those changes back to your UI becomes increasingly difficult.

One way data flow makes managing state more approachable and lightens the cognitive load required to follow the flow of data through your application. Using Redux takes this idea to the next level and moves the state and the state changes and centralizes them in a global store, managed with pure reducer functions.

In this course you will learn how to build a production quality React application using Redux. We will build up from using redux by itself, so we can understand the core API and how that interacts with a React application, then we’ll move on to introduce `react-redux` to abstract away some of the underlying details and clean up our code. We’ll use middleware and a mocked API server to understand how asynchronous code fits into the Redux model and we’ll even deploy our finished work so we can see it running live in the cloud. 

If you are brand new to React, you’ll want to read the documentation and watch our free [React Fundamentals](https://egghead.io/courses/start-using-react-to-build-web-applications) course and our [Build Your First Production Quality React App](https://egghead.io/courses/build-your-first-production-quality-react-app) course. To get up to speed on Redux, you should check out Dan Abramov’s [Getting Started With Redux](https://egghead.io/courses/getting-started-with-redux) course.

Build A React App With Redux

In this course we are going to take an empty React and Redux application and add Redux Saga side effects. We’ll begin by installing saga to the app and implement a basic saga generator function. We’ll explore the saga commands provided by Redux Saga and what the difference is between blocking and non-blocking actions. 

We will also understand how to concurrently run sagas with saga helpers and how we wire everything up with the Redux store. Finally, we’ll finish up by implementing tests for our sagas.

Async React with Redux Saga

One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state, we introduce additional complexity by trying to control application flow and the amount of code volume that comes from all of this. Redux gives us the ability to address state management and communication in astonishingly simple semantics that can be explained in just a couple minutes. The beauty of Redux is that it is not only a library but a pattern that works very will within Angular 1.x applications. In this series, we are going to learn how to integrate redux (the pattern) into Eggly from scratch and then introduce **ng-redux** and add in **Redux DevTools** at the end for fun.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Build Angular 1.x Apps with Redux

This course will pick up where we left off with the [Redux Fundamentals course](https://egghead.io/series/getting-started-with-redux). If you haven't watched that yet, you are highly encouraged to do so!

You are about to learn practical production ready techniques for building your React and Redux applications. You will explore advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while building applications for your clients and customers.

Even if you have already spent time studying Redux, this course will show you better practices straight from the library's creator Dan Abramov.

**[Click here to see the Community Notes on this course](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes)**


Building React Applications with Idiomatic Redux

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Nodejs

Express is a minimal web server built on Node.js that provides essential functionality for delivering web applications to the browser and mobile devices. This series will guide you through the first steps of using Express for building your own applications.

Getting Started with Express.js

In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your [React](/q/react) application with [Redux](/q/redux). 

[State management](https://egghead.io/playlists/react-state-management-in-2021-6732) is absolutely critical in providing users with a well-crafted experience with minimal bugs. 

It's also one of the hardest aspects of a modern front-end application to get right.

Redux provides a solid, stable, and mature solution to managing state in your React application. Through a handful of small, useful patterns, Redux can transform your application from a total mess of confusing and scattered state, into a delightfully organized, easy to understand modern [JavaScript](/q/javascript) powerhouse.

The principles of Redux aren't new, but they are packaged and presented for you in an easy to use a library that not only elevates your applications but also improves your general understanding of building JavaScript UIs.

In this course, Dan Abramov will show you the fundamentals of Redux, so that you can start using it to simplify your applications. 

There are some amazing [community notes on this course here on Github](https://github.com/tayiorbeii/egghead.io_redux_course_notes).



Fundamentals of Redux Course from Dan Abramov

Redux was [announced back in 2015](https://www.youtube.com/watch?v=xsSnOQynTHs) and immediately took off as the de-facto state management solution for React. As it gained widespread traction, it also became clear that in many cases it was brought into applications prematurely. The community in some ways started to push back on its use and recommended the built-in `setState` method as an alternative. Several other state libraries also started popping up around this time. Finally, as React Hooks were announced with a built-in `useReducer` method it appeared that Redux's time was up. However, these claims have proven to be premature. Redux is not dead and instead remains React's most popular state management library`*`.

Recent updates to redux exposing a [hooks-based API](https://react-redux.js.org/api/hooks) address some of its most serious drawbacks and make it even more appealing. This course will show you how to apply redux to a modern react hooks application. I hope you leave this course with a continued appreciation for React Hooks and renewed enthusiasm for Redux.

Thanks for watching 📺.

---

**Notes**

- This content has been inspired by the incredible work done by [Mark Erikson](https://twitter.com/acemarke) on modernizing redux and the fantastic [Redux Style Guide](https://redux.js.org/style-guide/style-guide).

- `*` Comparing [redux](https://www.npmjs.com/package/redux) with [mobx](https://www.npmjs.com/package/mobx),  [xstate](https://www.npmjs.com/package/xstate) and [flux](https://www.npmjs.com/package/flux)

Redux with React Hooks

Many engineers working with redux have felt burdened by large amounts of boilerplate code and confusing indirection. These apps often rely on legacy patterns that are no longer recommended, but are still commonly found in production code bases. If you are are an engineer working on such an application, this course is for you. In it I will show you how to modernize your application, with react hooks, one component at a time. At the end of it, we'll still be using redux, but the structure and content of your code will be significantly improved.

We will cover migrating class components to functional components with [react hooks](https://reactjs.org/docs/hooks-reference.html) and how to replace `connect()` with [redux hooks](https://react-redux.js.org/api/hooks). This course will serve as a good tutorial for learning react hooks. It will also help you apply  modern patterns for using redux. These patterns, powered by the new [useSelector](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hooks will transform your redux applications for the better.

Modernizing a Legacy Redux Application with React Hooks

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Redux: The Reducer Function

Learn how to implement adding a todo in a todo list application reducer.

Topics

Instructors

Content Type