 Resources from Shane Osbourne in 2024

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 our app with Webpack & Babel and how to configure these tools for use with Preact. Then we’ll move on to learning how to create components and how the Preact API mirrors that of React - highlighting the differences/additions along the way. Finally we’ll look at the interoperability with existing popular libraries in the React community such as Redux & React Router and with the popular development tools such as Redux Dev Tools & React Dev-Tools

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

Up and running with Preact

Arrays of data is one of the first things we learn about as programmers. Collections of information are a fundamental building block of most programming languages.

JavaScript is no exception. In this series, we will explore JavaScript (es6) array methods. We will slice, join, map, and reduce our way to better understanding of the powerful array methods that modern JavaScript delivers.

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

Understand JavaScript Arrays

`some` returns a `boolean` value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple `yes` or `no` answer. In this lesson we look at 2 practical use-cases for `some`. The first shows how it can be used with a ternary operator to switch a `class` on an element & the second shows how `some` can be used in an `if` conditional.

Use Some as a Ternary Operator or Conditional

Map is one of the most useful array methods. It creates a new array with the exact same number of items as the source and can be used to modify values, change their type, add fields to objects, simplify objects etc. In this lesson we focus on practical use-cases for map & see it in conjunction with other array methods.

Modify Values in an Array with Map

Many components within an application can be rendered using only data that is ‘passed’ to them by a parent. We call these “Functional Components” as they do not contain any internal state. In this lesson we look at how to define these types of components and how to pass data to them.

Define Functional Components in Preact

When dealing with Components, there’s often the need to either have some local state controlled by the component (such as form input fields) or to tap into the lifecycle events of the component. In this lesson we’ll give some practical examples of both.


Define Stateful Components in Preact

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

Use State and Props in the Component Render Function

Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’

Use Link State to Automatically Handle State Changes

Not every app is greenfield, and it would be a shame if existing React apps could not benefit from the micro-size of Preact. In this lesson we’ll discuss what preact-compat is, how to use it, and some examples of the file-size savings available. https://github.com/developit/preact-compat

 Reduce the Size of a React App in Two Lines with preact-compat

Some applications only need a very minimal routing solution. This lesson will cover a practical example showing the router in use. We’ll build a simple search feature that accepts user input and then calls the github API. We’ll see how to access route parameters, how to manually & automatically navigate around, and finally how to handle un-matched path. https://github.com/developit/preact-router

Handle Simple Routing with preact-router

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

Integrate react-router with Preact

Redux is one of the most popular state-management libraries and although not specific to React, it is widely used with it. This is why the author of Preact has released a package called preact-redux, which is a simple wrapper around the main react-redux package that enables it to be used in a Preact application without any other changes to your codebase. In this lesson we refactor a stateful component to use Redux + Redux-thunk. https://github.com/developit/preact-redux

Integrate Redux with Preact

Preact and Redux is a great combination, made even more so by the amazing dev tools extension that can be installed into both Chrome and Firefox. In this lesson we’ll see how to enable it and how it works seamlessly with Preact.
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

Use Redux Dev-Tools with Preact

Array filter creates a new array with all elements that pass the test implemented by the provided function. In this lesson we discuss how only a truthy or falsey value is required as the return value to the function, which in turns allows us to be creative in how we perform the filter. We end the lesson by looking at an example showing how chaining multiple array methods together can lead to very nice, declarative code.

Filter an Array with Truthy Values

Array push is used to add elements to the end of an Array. In this lesson we'll see how the `push` method accepts multiple arguments, can be used to merge two arrays, and how it can be used to represent user input.

Add Elements onto an Array with Push

The `every` method returns true or false based on whether or not every item in the array passes the condition you provide in a callback function. In this lesson we look at some practical examples for simple validation, inferring state from data and for re-using the logic in our callbacks with array filters. 

Validate Data with the Every() Method

Array reduce is used to accumulate a new value by applying a function that you provide to each item in your source array. Reduce behaves differently based on whether or not you provide an initial value - we cover this in depth in this lesson and provide some practical use cases.

Produce a single value from an Array with reduce

indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a *whitelist* array.

Check if a Value is in an Array with indexOf

In this lesson we manage to remove all of the nested loops that helped us towards a partial solution in the first lesson. We create a function `getTasks`, that can, only under certain conditions, call itself. This is the basis of recursion and often leads to cleaner, shorter code that can handle more dynamic input.

Intro to Recursion - The Solution

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Libraries such as RxJS use generics heavily in their definition files to describe how types flow through different interfaces and function calls. We can provide our own type information when we create Observables to enable all of the auto-complete & type-safety features that you would expect from Typescript. This can be achieved with minimal annotations thanks to the power of generics.

Understanding Generics with RxJS

Although technically you can run Preact without any tools or pre-compiling, we’ll get a much better development experience by using modern versions of Javascript along with JSX. To achieve this, we'll be installing `babel-core` along with [`babel-preset-env`](https://egghead.io/lessons/node-js-use-babel-preset-env-with-native-node-features-and-also-use-babel-plugins). This combination will provide us with a set of plugins suitable for transpiling our code for use in modern browsers. It doesn't include support for JSX however, so we'll add the `babel-plugin-transform-react-jsx` plugin to handle that part. Along with creating a Javascript file that can be executed in the browser, we also want to preview our work each time we change a file - so we install [Webpack](https://egghead.io/playlists/learning-webpack) and the Webpack Dev Server to handle both of those tasks. The final dependency we install is `babel-loader` which will allow the source files being accessed by Webpack to first be processed by Babel and the plugins we specified.

Topics

Instructors

Content Type

Shane Osbourne