 Resources from Chris Achard in 2021

Get started with React! (with Hooks)

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.

You'll learn:

- How to write React code with JSX
- How to "think in React"
- How to use local state to store changing data
- How to pass data from parent components to children components using props

So get started now!  You need some javascript and HTML experience, but no prior React experience is needed.

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

React Crash Course (with hooks)

This workshop will start by breaking down the four states in which a file can exist, and we'll build up our mental model of git from there. Then, we'll look at how to move files between those states in different ways.

Once we've developed a new model for how git operates, we'll be able to purposefully get ourselves into some sticky situations, and then gracefully recover from them.

If you can handle git add/commit/push, but not much more - then this workshop is perfect for you.

You can finally get some proper git training, and will never have to worry about losing data or messing up the repo again!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Fix Common Git Mistakes

Recoil is a new (experimental!) library from facebook that can handle complex shared data across a large react app.

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

Recoil is similar to (but different than) Context, Redux, or other shared state libraries (like MobX), but is designed to handle large (and variable) numbers of state that can update without re-rendering your entire app's component tree.

Getting Started with Recoil in React

If you already know React, then React Native is a great way to build mobile apps for iOS and Android. Of course, web and mobile apps are very different to build — but this course serves as your guide.

In this course, we’ll build a mobile app from start to release with React Native for both iOS and Android. Prior React experience is required, but you don’t have to know anything about mobile development to participate.

Throughout the course, we’ll be building a “Restaurant Review” app. We’ll use all the standard mobile UI elements like text, images, form inputs, buttons, scroll views, and icons, and we’ll show several navigation techniques like push, modal, and tabs. The app will make HTTP API calls to a server and will store data on the device with AsyncStorage. Finally, we’ll specify a custom app icon and splash screen, deploy the app to a physical device, and prepare the app for release to the App Store and Play Store or for ad-hoc release.

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

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

This course will walk you through the entire process for creating and deploying your first Static HTML Site. 

You will learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.

Additionally, you will learn how to make your website responsive using CSS media queries, add custom emojis, animations, and a "Tweet" button.

To finalize the course, you will learn how to deploy and host your Static HTML Site with Netlify, a powerful service that automates builds, deployments, and manages your websites and web apps.

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

html

Create and Deploy a Basic Static HTML Website

Progressive Web Apps (PWAs) allow a user to use your web app online or offline, and lets them install the app onto their iOS or Android device just like a native app.  Sounds great, right?  But it can be tricky to properly configure a PWA, and not every feature works on every browser or device.

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.  We’ll start by making sure the app can be displayed offline with cached resources, and learn how to persist data while the app is in offline mode.  We’ll also interact with native features like the camera, and learn how to let users install the app on their phone home screen.  Then we’ll customize the appearance of the app, including the app icon, splash screen, and phone status bar.

Finally, we’ll deploy the production app to heroku.  By the end of this course, you will have everything you need to create a Progressive Web App with React.

Progressive Web Apps in React with create-react-app

Neural networks, with Keras, bring powerful machine learning to Python applications. They can answer questions like “How much traffic will hit my website tonight?” or answer classification questions like “Will this customer buy our product?” or “Will the stock price go up or down tomorrow?”

In this course, we’ll build a fully connected neural network with Keras. This is the most basic type of neural network you can create, but it’s powerful in application and can jumpstart your exploration of other frameworks. 

We’ll start the course by creating the primary network. Then we’ll:

- build and configure the network, then evaluate and test the accuracy of each
- save the model and learn how to load it and use it to make predictions in the future
- expose the model as part of a tiny web application that can be used to make predictions

You don’t need to know a lot of Python for this course, but some basic Python knowledge will be helpful. Enjoy!

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Fully Connected Neural Networks with Keras

When merging two objects in javascript, you can _shallow_ merge them, or _deep_ merge them.  These videos show how to do both, and talk about the pros and cons of each approach.

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

Merge Objects in JavaScript

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Get Started with Flexbox CSS Layouts

React hooks can be used to add state to functional components, as well as replace the lifecycle methods that only class methods had available until now.

This playlist goes through several different hooks available now in React, as well as how to make your own custom hooks!

React Hooks in Function Components

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

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

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

Cascading Style Sheets bring order and beauty to our applications.

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

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


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

Topics

Instructors

Content Type