 Resources from Basarat Ali Syed in 2021

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

`this` is determined by *how you call a function*. To write class methods that can always safely use `this` you can use the TypeScript property initializer syntax along with arrow functions.

Make usages of "this" safe in class methods

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

You get excellent developer experience when using TypeScript with React. This is better when compared to many other frameworks that work off of simple template strings because JSX is embedded within TypeScript.

In this lesson we give a demonstration of the some of the powerful refactorings and type checks enabled by using TypeScript with React.

`find references` is the simple command that finds all the references. 

Why use TypeScript with React

Learn how to setup a TypeScript + React project from scratch. Understand the reason behind every line involved in the configuration allowing you to customize it at will in the future.

Bootstrap a TypeScript + React project

You can create a stateless React component in TypeScript as easily as creating a function.

But if you want to create high quality idiomatic React + TypeScript components we cover some improved patterns in this lesson.

Create stateless React components using TypeScript

You can create stateful React Components in TypeScript by extending from the `React.Component` class. This parent class takes two generic parameters, `Props` and `State`.

This lessons shows these generic parameters and `React.Component` in action.

Create stateful React Components using TypeScript

In this lesson we look at how to create a React Component package using TypeScript.

Creating a React Package is very similar to creating any other TypeScript Node package and we demonstrate that here.

Publish a React component with TypeScript

React is great for diffing between Virtual-DOM and rendering it to the dom. It also offers a naïve solution for diffing state in terms of `setState`. However it is slightly verbose and not easy to scale. MobX offers a very simple and effective solution to manage state in React components.

Using MobX to Isolate a React Component State

In this lesson we test the functionality of a React components using Jest and Ezyme.

Test React components and dom using Enzyme

Cypress is an E2E testing tool designed specifically to be easy to use for frontend developers. In this lesson we test the functionality of a React application using Cypress.

Test React Applications with Cypress

In this lesson we take a deeper look at `@actions` how they allow you to perform mutation in a controlled manner. We also see how MobX gives you application wide amazing `PureComponent` performance nearly for free without having to use complicated JavaScript patterns or immutable data libraries.

 Understand and Control Mutations with MobX Dev Tools and @action in React

MobX provides a neat little `@computed` decorator to exploit the *I know when you change* nature of observables for performance, fun and profit. 

In this lesson we look at an example use case for `@computed` getters and their performance advantages.

Optimize Performance in a React App with MobX @computed Properties

In this lesson we look at a maintainable `state classes` pattern for MobX-React applications. Modelling the real world is the core reason of existence for Classes and Mobx makes using these classes / their properties and their methods really easy for reactive (UI is just a reaction of the state) React applications.

Maintainable Application State React Class Pattern using MobX

The state class pattern can easily be expanded to allow you to create component-ui / component-state pairs that provide reuseable functionality for your applications. 

In this lesson we look at an example of creating a reuseable input component. 

We also mention a re-useable form state management library that uses the state class pattern. 

Creating Reusable State Class Driven React Components

MobX is independent of React and really you can use whatever testing framework you want with it. Testing MobX is essentially as easy as testing simple JavaScript. 

This lesson demonstrates an example of testing mobx application state with Jest.

Test a React Applications using MobX with Jest

Developing logic rich applications is becoming more and more common nowadays. The TypeScript-React combination enables a great developer experience in terms of writing understandable and refactorable HTML. However the default state management for React leaves much to be desired in terms of *simplicity* and *maintainability*. MobX can great enhance your state management developer experience as we cover in this course.

Topics

Instructors

Content Type