This course gets you up and running with react in under a minute by using codesandbox.io to skip the painful process of setting up your dev environment.

Chris Achard

React Crash Course with Hooks

In this course, we’ll create an online/offline note-taking app.  We’ll use `create-react-app` to create the frontend, and node.js to create a simple backend. 

Progressive Web Apps in React with create-react-app

We’ll build a mobile app with React Native for both iOS and Android. Prior React experience is required, but you don’t have to know mobile development to participate.

Build a React Native Application for iOS and Android from Start to Finish

In this collection, you'll create a simple game with React using Recoil, to explore how you can share and update state across an app.

Getting Started with Recoil in React

Chris Achard Landing Page

 Resources from Chris Achard in 2021

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

We’ll replace the default App Icon on Android with a custom app icon image.  

Change the App Icon for React Native Apps on Android

Our app runs in the iOS simulator but now we’ll finally run it on a device!  For iOS, our app can be run on a connected device directly from xCode.  

Run a React Native App on an iOS Device

For Android, we can connect a physical device that will be autodetected by `react-native run-android`, just like the emulator.  Make sure to shut down the emulator first however - so that only one adb device is connected at a time.

Run a React Native App on an Android Device

Once our app is finally complete, we have to build it in a special way in preparation for uploading to the iOS app store.  We’ll look at exactly how to build and upload the app to the app store, which will allow us to release to beta users using TestFlight, or to release publicly on the store!

Build an iOS React Native App for Uploading to the iOS App Store or TestFlight

There are different steps to build an app for the iOS and Android app stores, so here we’ll look at how to build our completed app for Android.  We’ll look at how to build a release for either ad-hoc installation, or for uploading to the Google Play Store.

Build an Android React Native App for the Google Play Store or for Ad Hoc Distribution

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

In node.js, you can require `fs`, and then call `fs.writeFile` with the filename, and data to write to that file (as a string or a buffer).  That will overwrite the entire file, so to just append that data to the file instead, pass an options object with the `flag` key set to `a`.  Or, you can use `fs.appendFile`.  Make sure to handle errors using a callback as the last argument to `writeFile` and `appendFile`.

There are synchronous versions of each function as well, `fs.writeFileSync` and `fs.appendFileSync`, which will throw errors, instead of returning them in a callback.

Write or Append to a File in Node.js with fs.writeFile and fs.writeFileSync

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

Whenever you want to loop over an array and create a new array based on each element in the first array, it's possible to use the `map` function on the array, instead of using a `for` loop.  There are a few advantages to `map` over `for`, including shorter code that is more composable - meaning you can easily extract and reuse the function(s) that you're using.  You can also chain multiple `map` calls together. 

Use .map Instead of a for loop to Iterate over an Array

In Javascript, there are several ways you can iterate over an object's keys and values.  We'll look at `for`...`in`, which will loop over all the keys (though you may need to also use `hasOwnProperty`).  We'll also look at three built in object functions: `keys`, `values`, and `entries`.

Loop over an Object with for...in, Object.keys, Object.values, and Object.entries

In general:
Use `for`...`in` loops to loop over the keys of an _object_.
Use `for`...`of` loops to iterate over an _array_ or _string_.

The two loop types: for...in and for...of behave differently in javascript.  Both loops can be used with Arrays and Strings - but only `for`...`of` loops iterate over the values in order.  `for`...`in` loops actually loop over the _enumerable_ properties of an object.  For an array, that means that a `for`...`in` loop iterates over the indices of the array - and order is not guaranteed.  So use `for`...`of` for arrays or strings, and `for`...`in` for objects.

Understand the Difference Between for...in and for...of Loops in Javascript

Both double equals `==` and triple equals `===` can be used to compare values in javascript - but they are different in a subtle, but very important way.  Double equals `==` compares just the _value_ of two things - and if the types are different, it will use type coercion to match the types before comparing.  Triple equals `===` compares both the _type_ and _value_ of objects, and both must match before two values are equal.

The same rules apply for not equal `!=` (compare value only) and not equal, equal `!==` (compare type and value). 

Compare the == and === Operators in Javascript

Sorting in Javascript with `sort` uses _lexical_ sorting by default, which means it will sort in alphabetical order.  That's fine for strings of characters, but it means that arrays of numbers don't sort in numerical order!  To fix that, we'll pass a custom comparator function to `sort`.  The function you pass to `sort` will be passed two values from the array at a time, and should return a value <0, =0 or >0, based on which value should be sorted first in the final array.  

Once you have a custom sort function implemented, you can sort in any way that you'd like.  We'll show that by pulling out just part of a string, and sorting based on that value.

Use a custom sort function on an Array in Javascript

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

A Progressive Web App (PWA) can cache static assets, which allows an app to be rendered faster, and even allows it to operate offline! 

We’ll start a new app with `create-react-app`, and enable the service worker by registering it in `index.js`.  Then we’ll build and serve a production version of the app - and show that it can work offline by disabling the server and refreshing the tab.


Create a Progressive Web App with React and Register a Service Worker

Progressive Web Apps can be difficult to debug because of how they are cached by the browser, and also because they aggressively cache static assets from your app.  In the `Application` tab of the Chrome Dev Tools, you can choose to update the service worker on every reload, bypass the service worker entirely, or switch to offline mode - all of which help to debug your PWA.

You can also see what is in the service worker’s cache, and you can use the `Network` tab to see what is being served by the service worker, and when assets are coming directly from the web server.


View the Service Worker and the Cache, and Debug a PWA with Chrome’s Dev Tools

The default service worker that comes with create-react-app doesn't allow for very much configuration.  We'll replace that default service worker in two ways.

First, we'll create a blank service worker js file, and use that as our custom service worker.

Next, we'll re-write the default webpack config with `react-app-rewired`, and utilize the `InjectManifest` workbox webpack plugin.  This will allow us to create a totally custom service worker that still allows us to use workbox, without ejecting our app.

Use a Custom Service Worker in a create-react-app PWA without Ejecting

With our blank workbox based service worker, there is no caching enabled by default.  We'll enable caching on all our static assets using workbox's built-in `precacheAndRoute` method, and this will then allow us to view the PWA in offline mode. 

Pre-cache Static Resources with Workbox and View a React PWA Offline

Service workers are event-based, so we'll listen for the `install` and `activate` events, which will let us execute code when our PWA gets installed for the first time.  We'll use `setTimeout` to simulate an asynchronous action and wait for that to complete, before allowing the PWA to continue installing.

Listen for `install` and `activate` PWA Events in a Service Worker

Our service worker caches our static assets - but only those assets that are included in our React App.  This means that assets like Bootstrap, which we're including from a third-party CDN, won't be included in the cache, because they're not available at webpack compile time.  

We'll change the service worker to add caching for those assets by using workbox's `registerRoute` method, and a regular expression to match the entire URL of the asset.  We'll pick the `staleWhileRevalidate` cache strategy, though `cacheFirst`, or `networkFirst` would also be valid choices.

Finally, we'll change the name of the cache they are stored by supplying a `cacheName` parameter.

Cache Third Party Resources from a CDN in a React PWA

We can view the PWA offline because we are caching the static and CDN assets for the app - but the list of todo items won't display, because those API calls are not being cached.  We'll add another route to the service worker, to store the result of any `.json` API call from our server.  Then, we'll be able to view the app with the entire list of items offline.

Cache JSON Data in a React PWA with Workbox, and Display it while Offline

Since we can view our app offline now, it may be important to tell our users that the app is operating in an offline mode.  That way, we can let the user know that the app may not be fully functional until then re-connect to the Internet.

We'll use `navigator.onLine` to detect if there is a network connection present or not, and then we'll listen for the window's `online` and `offline` events to update the offline badge.

Add an Offline Status Indicator to a PWA with React

We're storing JSON data in the cache - but that only applies to HTTP `GET` requests - and not to `POST` or `DELETE` requests.

We'll add a `fetch` event listener to the service worker, where we can intercept all fetch requests in our app.  We'll forward them to the server - but if they fail, then we'll return an error back to the app.

In the app, we can detect that error, and respond by showing an alert that the functionality isn't available in offline mode.

Show an Error when a POST or DELETE Fails in an Offline PWA

We'll add a custom app icon to our PWA, and specify those new icon sizes in the `manifest.json` file, which defines our PWA to the browser.  That will add the icons that will allow us to install the app on Android, Chrome, and iOS.

Topics

Instructors

Content Type

Free or Pro