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 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

The name of a PWA is defined in the `manifest.json` file.  We'll edit the default manifest that comes with `create-react-app` to change the name and short name of our app.

The short name has a maximum length of 12 characters, and is used underneath your app when it is installed on a user's homescreen.

The full name has a maximum length of 45 characters, and is used in the Chrome web store, and in the installation dialog boxes, when a user is installing your application.

If you don't specify a short name, then the long name will be truncated to fit the space.

Change the Name and Short Name of a PWA built with create-react-app

A primary benefit to PWAs is that they can get added, just like native apps, to the home screens of iOS, Android, and Chrome.  We'll show the process to add the PWA to the home screen, and also see the app launch in `standalone` mode, which is without the typical web browser controls.

Add a PWA to the Home Screen of an iOS or Android Device, and the Chrome App Home Screen

When a PWA operates in `standalone` mode on a mobile device, it doesn't have the usual back button (and other browser controls) that it would on the web.  Because of that, it's very important that you add your own navigation controls (like back buttons) to your app, so that your user can get to all parts of your app without relying on any browser controls.

We'll look at the new `Profile` page, and add a back button that allows the user to go back to the home page.

Add Navigation Elements in React to a PWA in Standalone Mode

It's possible to access some, but not all, of the native device features from a PWA.  One that we _can_ access, is the camera and camera roll.  We'll use two different methods to allow users to upload images to our application.  

First, we'll add a file `input` that accepts images.  We can specify a `capture` param, which will tell PWAs on mobile devices to prompt the user to take a picture with their camera.

Next, we'll access the camera feed directly by rendering a `video` tag, and accessing `navigator.mediaDevices.getUserMedia` directly - which will allow us to show a live video feed from the camera.  Then, we can use a `canvas` tag to grab a frame from that video, and render the image. 

Access the Camera in a PWA built with React

On Android and in Chrome (but not on iOS), it's possible to send push notifications with a PWA.  We'll start by asking the user for permission to send them push notifications, and then look at how to intercept the `push` event in a service worker.  We can test the push notifications directly in Chrome's devtools, and we will also make a button that can trigger a push notification directly from the PWA app code itself.

Add Push Notifications to a PWA with React in Chrome and on Android

Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're going for a more "native" feel. 

We'll first disable the ability to select text in our app by setting the css `user-select` options to `none`.

Then, we'll disable the iOS long-press "callout" menu by setting `-webkit-touch-callout` to `none`.

Disable Text Selection and Touch Callouts in a PWA on iOS

The default status bar color on iOS doesn't look great with the color scheme of our application, so we'll set a custom theme color for Android, and a status bar meta tag for iOS.  We can't set a fully custom status bar color in iOS, but we can set the `apple-mobile-web-app-status-bar-style` meta tag to either `default`, `black`, or `black-translucent`.

Change the Status Bar Color on iOS and Android in a PWA

Android displays a splash screen for PWAs based on the icons and names you provide, but iOS just displays a solid color splash screen for installed PWAs by default.  

We'll make a new splash screen image for every iOS device resolution size that we want to support, and then we can make a `link` tag in `index.html` to specify those images as the splash screen for each device resolution.

Also, make sure to remove `background_color` from the manifest - or it may overwrite the splash screen images on iOS.

Customize the Splash Screen of a PWA built with create-react-app

Chrome has a built-in audit tool called `Lighthouse` that we can use to give a readiness score to our web app.  We'll run the progressive web app test, and interpret the results.

In particular, it's essential that a PWA gets run over HTTPS in production - otherwise, it won't work as a PWA at all.

Also, it's important to recognize the many differences in how PWAs operate between Android and iOS - and to manually test in each browser that you plan to support.

Do a PWA Audit with Lighthouse using Chrome Dev Tools

Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device!  However, setting up a PWA correctly can be tricky.

In this course, we'll create a PWA from start to finish, using create-react-app.  We'll create a custom service worker, and use different caching strategies for different types of assets.

Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.

Course Introduction: Progressive Web Apps in React with create-react-app

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

This lesson looks at three methods that can be used to shallow merge two objects in javascript: `Object.assign`, both with mutating the original object and without mutation, and the spread operator.

It also covers the potential danger of doing a shallow merge instead of a deep merge, by showing an example of merging two objects that have objects as values, instead of simple strings.

Shallow Merge Two Objects in JavaScript

If you are merging two objects that contain other objects or arrays, then you probably want to deeply merge those objects, instead of just shallow merging them.  In this lesson, we'll look at three different ways to deeply merge objects, depending on what you want to accomplish: using the spread operator, using lodash's `merge` function, or using the `deepmerge` npm library.

Deep Merge Objects in JavaScript with Spread, Lodash, and Deepmerge

Cascading Style Sheets bring order and beauty to our applications.

We'll be building www.patio11bot.com from start to finish as a staic HTML document - so the first step is to setup a mini web server, so that we can view the webpage locally.

There are three easy ways to do that:

`// python 2:`

`> python -m SimpleHTTPServer 8000`


`// python 3:`

`> python -m http.server 8000`


`// node:`

`> npm install -g http-server`

`> http-server`

Serve a Static HTML Page for Development

With a basic webpage complete, we'll add a custom font to patio11bot.
First, go to https://fonts.google.com/ choose the fonts you want, and then add them to your page like this:

`<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400|Work+Sans" rel="stylesheet">`


`font-family: 'Open Sans', sans-serif;`


Use a Custom Font from Google Fonts on a Static HTML Webpage

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html


To add a bit of flare to patio11bot, we'll add some emojis.
First, set your page's charset to UTF-8 with a meta tag: `<meta charset="UTF-8">`

And then we'll use both https://emojipedia.org/ and a sublime text package: https://packagecontrol.io/packages/Emoji

And insert the emojis directly:

`🤖`

Or with the Unicode code point:

`&#x1F916;`


Add Emojis to a Static HTML Page

The patio11bot site looks OK on a desktop, but terrible on mobile - so we'll turn it into a responsive webpage.  First (and most important), set the meta viewport tag:

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

Then, we can use media CSS queries to differentiate styles between mobile (smaller than 600px), and desktop (larger than 600px):

`@media screen and (max-width: 600px) {
  .footer p {
    font-size: 14px;
  }
}`

`@media screen and (min-width: 601px) {
  .footer p {
    font-size: 12px;
  }
}`

Make a Responsive Web Page Without Using a CSS or JavaScript Framework

We want to show an SVG avatar of the patio11bot, so we'll do that in three ways:

1. Using an `img` tag - which is easy, but doesn't let us access the internal SVG elements.

2. Copy/pasting the SVG directly into the HTML document.  That works great, but is really messy in the code

3. Using an `object` tag to embed the SVG directly into the web page.  We'll choose this solution because it's tidy, and also because it allows us to access the internal SVG elements.

Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

We'll add a text input box to patio11bot, and a button that allows the user to ask a question.

Then, we'll use vanilla javascript (so no jQuery or other framework) to grab that input.

Accept User Input with a Styled Input Tag, a Button, and Vanilla JavaScript

We'll use the `add` and `remove` methods on a DOM element's `classList` to add and remove classes with jQuery, or another framework.

Add and Remove CSS Classes with Vanilla JavaScript

We'll add animation to patio11bot using CSS `keyframes`.  When defining a CSS animation, you can add it to a class with `animation-name`, set the duration with `animation-duration`, and if you want the animation to 'stick' on the end state, add `animation-fill-mode: forwards;`

Make a One-time CSS Animation that Does Not Revert to its Original Style

To let people easily share the patio11bot, we'll add a "Tweet" button to the page.  You can easily add a static share button by going to `https://publish.twitter.com/` and following the instructions there, but to make a dynamic tweet button is more difficult.

We'll use the same share button, but we'll dynamically add it to the page with javascript, and then we have to tell the Twitter script to reload it as a widget with: `twttr.widgets.load()`

Topics

Instructors

Content Type

Free or Pro