Learn Flux-architecture, Purescript and React-storybook

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

In this course we will use an [online editor](http://try.purescript.org/) to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript. 

As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

Functional Programming Concepts in Purescript

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)

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

PureScript types are very extensive and we are going to experiment with type constructors and how to make then use them.

Basic Data Constructors in PureScript

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 show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

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

Flux Architecture: Application Actions

Deserializing and serializing JSON manually is a boring, error-prone way to be able to handle JSON. This example shows how you can use Generics in Purescript to automatically derive de/serializers so that once you've written your type definition, you only need a few lines of code to handle JSON.

Automatically de/serialize JSON with Purescript-Foreign-Generics

In Purescript, we can use set data structures using Purescript-Set, but many of its functions come with an Ord typeclass constraint. In this lesson, we'll learn how to understand the typeclass constraints on a function and how to create instances of typeclasses.

Use Sets with Ord Typeclass instances



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

PureScript has a REPL (a console you can type expressions into) called `pulp`. In this lesson, we will show how you can use `pulp` to test your modules and functions. We will use code as we would in a file, like `import`ing modules. We will also use REPL specific syntax like `:type` (or `:t` for short) to view type definitions and `:reset` to re-compile changes to our files.

Technologies talked about in this lesson:

[Pulp](https://github.com/bodil/pulp) by [@bodil](https://twitter.com/bodil)
[Psci](https://github.com/purescript/purescript/wiki/PSCi)
[Purescript](https://github.com/purescript/purescript)

Using PureScript's psci with pulp

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

Flux Architecture: Routing with react-router 1.0

Currying is a significant aspect of functional programming. It allows you to break down one function that takes many arguments into a series of functions that take part of the arguments; this will enable you to build and compose functions together easily.

In this lesson, we will look at what currying is doing under the hood in PureScript, as it is used extensively. 

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Topics

Instructors

Content Type

Free or Pro