Learn Reason, Stripe and Webstorm

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

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

Create an eCommerce Store with Next.js and Stripe Checkout

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

Get Started with Reason

Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Making an HTTP server in ReasonML on top of Node.js

Ongoing playlist.

Don't be afraid to watch videos at 1.25x if the pace is too slow!

ReasonML Applications for the React Developer

Throughout the last year, the use of React hooks has taken the world of web development. Hooks provide users with an easy way to handle interactivity within ReactJS applications, so it's no surprise that the latest release of the ReasonReact library makes great use of them. 

In this lesson, we'll get started using ReasonReact `0.7.x` by scaffolding out an application using the [BuckleScript](https://bucklescript.github.io/) command-line tool. Once scaffolded, we'll go through the steps needed in order to properly run our application within a development environment that is ripe for productivity!

### Resources
* [ReasonML Docs](https://reasonml.github.io/docs/)
* [ReasoNReact Docs](https://reasonml.github.io/reason-react/en/)
* [BuckleScript Docs](https://bucklescript.github.io/)

Up and Running with React Hooks inside of a ReasonML 

Any React developer will agree that 2019 was the year of that hooks took the library by storm. Luckily for us, the ReasonRect library makes it possible to hooks within the context of a ReasonML application.

In this lesson we will take a test drive of the `useReducer` hook within a ReasonML application. By the end, we'll have learned how to define our actions using variants, use records to shape our state, and more!

### Resources
* [ReasonReact Docs] (https://reasonml.github.io/reason-react/en/)
* [ReasonReact Blog - Support for hooks in 0.7.0 Release](https://reasonml.github.io/reason-react/blog/2019/04/10/react-hooks)



Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State

When working with traditional React, we often pass functional stateless components the `props` object as an argument. Although there are a few minor differences when working in the context of Reason, the act of passing `props` to a component is done in an extremely similar manner.

In this lesson, we will get a first-hand look at just how similar these processes are by walking through the steps of creating a React Component in ReasonReact. By the end, you'll have developed an understanding of ReasonReact's "named args" syntax which it uses for creating components and you'll have created a re-usable Layout component that can be used to share layout throughout an application.

### Documentation
* [ReasonReact Homepage](https://reasonml.github.io/reason-react/)
* [ReasonReact Docs - Components](https://reasonml.github.io/reason-react/docs/en/components)


Create a Layout Component for Displaying Child Components Inside of a ReasonReact App

One of the key benefits of BuckleScript is the ease in which it makes the process of porting JavaScript libraries so they can be used within the context of a ReasonML application. The Reason Package Index, or [redex](https://redex.github.io/), provides a central place for browsing all available packages. Additionally, creating your own BuckleScript bindings is a straight forward process that also provides value in the form of knowledge surrounding the inner-workings of the library at hand.

In this lesson, we learn how to integrate the emotion css-in-js libray into our project by installing the `bs-css` package. Once installed, we'll create a `.re` file for our style rules and see how we can add global css, as well as styles for specific css classes which we'll target using React's `className` prop.

### Link
* [ReasonReact Docs](https://reasonml.github.io/reason-react/docs)
* [`bs-css` - GitHub](https://github.com/SentiaAnalytics/bs-css)
* [`bs-css` - Redex](https://redex.github.io/package/bs-css)


Implement a Sticky Footer within a ReasonReact App Using the bs-css BuckleScript Package

ReasonML is a fantastic way to write Javascript! But it doesn't yet have a built-in async / await syntax. Furthermore the built-in libraries for working with Javascript promises are awkward to work with, and produce code that's hard to read. This lesson will teach the viewer how to use the "bs-let" language extension (called a PPX) to achieve readable, easy to write promise-based code.

Async / Await in ReasonML

Although ReasonML has built-in libraries for working with JSON, they are low-level and difficult to use by hand. The Decco library offers automatically generated JSON decoders, and produce a result that keeps the programmer safe at runtime by telling them whether the data they got matched the shape of the data they expected. 

Automatically decode JSON into records in ReasonML using Decco

This lesson shows how the Serbet server library for ReasonML and Node.js makes handling JSON request bodies, and responding with JSON request bodies a simple task.

Handle JSON request bodies and send JSON responses from a Node.js server using ReasonML

Decco is a great library for automatically generating JSON encoders and decoders, but most real-world projects will quickly run into the need to add custom data types that Decco doesn't ship with support for. This lesson shows how to simply add a custom data type by implementing a codec that reads and writes Javascript dates as floats.

Write a simple custom JSON decoder for Decco in ReasonML

Decco is a language extension that automatically generates JSON encoders and decoders from type signatures. When adding adding custom Decoders, the error messages that the compiler produces can be quite confusing. This lesson shows the viewer how to use explicit type signatures to narrow down where an error might be coming from in custom codec code. This same pattern can be applied whenever confusing error messages come from code that is written without explicit type signatures.

Working with cryptic error messages from ReasonML when writing custom Decco decoders.

This lesson shows how to use the `serbet` npm package to write a simple Node.js http server in ReasonML by implementing a simple "hello world" endpoint. Serbet is a convenient wrapper around Express.js. It's a young library, but its patterns are already used in production code.

Make a basic server with ReasonML and Node.js

The BuckleScript compiler recently reached a new milestone with version 7. In this lesson, we walk through the process of upgrading an existing application to the latest version using `yarn` (or `npm`).


### Resources

[BuckleScript Blog - What's new in v7](https://bucklescript.github.io/blog/2019/11/18/whats-new-in-7)

[BuckleScript Blog - Holiday Release Post](https://bucklescript.github.io/blog/2019/12/20/release-7-02)

!![BuckleScript Docs](https://bucklescript.github.io/docs/)

Migrate an Existing BuckleScript Project to bs-platform v7

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

This lessons shows how to dynamically add a red border to an input when a validation error pops occurs using ReasonReact, Tailwind, and re-classnames.

Dynamically style an input border with Tailwind and ReasonReact

A live stream where Sean shows John what it takes to port Reason to JavaScript

Convert an App Built with Reason & ReasonReact into JavaScript & React.

Payments infrastructure for the internet.

stripe

Stripe has a variety of solutions that makes it super powerful as a payment provider. We're taking advantage of their Stripe Checkout product because it allows us to get started with an online store without having to manually accept payments.

To do this though, Stripe Checkout relies on the browser to make API requests, which we have to configure to work for our website.

We will set our eCommerce site domain on Stripe's CLIENT-ONLY integration to set us up to add the checkout workflow for our site.

Configure a Stripe Checkout Domain for Client-Only Integration

Next.js is a minimalistic framework for server-rendered React applications.

With Stripe or many other services, their APIs rely on special keys that authenticate requests or allow that service to track usage for things like billing.

Some of these keys are able to be used publicly and some must be kept private, but ultimately we want to have a way to easily manage these keys and not hard-code them into our application, which is where environment variables come in.

We will find our Stripe public key that will be used locally as well as in production on Vercel. You'll learn how to set an environment variable in Next.js (hint, you need to prepend `NEXT_PUBLIC` to the variable name make it available in the client) as well as in production on Vercel.

Add a Stripe API Key as an Environment Variable in Next.js & Vercel

Now that we have an app and our products configure in Stripe, it's time to connect the two and give people a way to purchase our products.

Using Stripe's API, we can initiate a new instance of the Stripe Checkout flow with a simple click of a button.

We'll create an `initiateCheckout` function that handles this flow for us. After loading stripe through `@stripe/stripe-js` we'll `await` a `stripePromise` that will allow us to redirect to stripes checkout flow. You'll notice that we will need to pass in line items with the price id and quantity.

Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Topics

Instructors

Content Type