 Resources from Chris Achard in 2024

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.

A state management library for React.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

recoil

Getting Started with Recoil in React

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

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

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

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

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

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

In large React Native projects, it’s common to have long relative import paths like:

`import MyComponent from '../../../screens/MyScreen/MyComponent'`

With import paths that go up and down the folder hierarchy like that, it can be confusing to figure out which file or folder you’re actually importing, and it generally just looks messy to have several of those import statements at the top of your file.

Instead, we can convert relative import paths to absolute import paths by creating a new `package.json` file at any level of the folder hierarchy.  That `package.json` file needs to specify a name that you want to call that folder:

`{ "name": "screens" }`

And then you can begin your import statements with that new module name:

`import MyComponent from 'screens/MyScreen/MyComponent'`

Note that this only works for React Native projects, and not other npm based projects like create-react-app web apps.

Reduce Long Import Statements in React Native with Absolute Imports

By default, React Native only targets iPhone - so if you run on an iPad, it will show up as a scaled app, and won't look like a native iPad app.

To target both iPhone and iPad, you have to change the xcode project to build it as a universal app.  Do that by finding the `Deployment Info` section of the `General` tab in the app target - and switch that from `iPhone` to `Universal`.

Then, you can run your app in either the iPhone or iPad simulator, and change the styling based on the current device.


Target both iPhone and iPad with React Native

First, install redux with: `npm install --save redux` and install react-redux with: `npm install --save react-redux`

In the top level of your component tree, import `createStore` from redux, and use it to create a new store with a simple reducer:

`import { createStore } from 'redux'`

`const rootReducer = (state = {}, action) => {
  return state
}`

`const store = createStore(rootReducer)`

Also import `Provider` from react-redux:

`import { Provider } from 'react-redux'`

And then wrap your app's components with a `Provider` component, and pass in your `store` as a prop:

`<Provider store={store}>`
  `...`
`</Provider>`

Then, you can connect any sub components with the `connect` function, by first importing it:

`import { connect } from 'react-redux'`

And then calling it with a `mapStateToProps` or `mapDispatchToProps` argument, and then passing in the unconnected component:

`const ConnectedLoginGate = connect(state => ({
  username: state.auth.username
}))(LoginGate)`





Add Redux to an Existing React Native Application

iOS and Android come with several built in fonts, but if you want to use a custom font in your react native application, you'll need to add it first.

You can add a custom font by copying the font files to your project, telling react native where to find those files by adding an `rnpm` entry to your `package.json` file, and then linking them with `react-native link`. 

Then, you can use that new font by specify it as the `fontFamily` style for a `Text` component, and you can change the `fontWeight` or `fontStyle` component if you've added additional style and weight font files.



Add a Custom Font to a React Native Application

There are two ways to open urls in React Native.  One is to open, and switch to the device's web browser, and the other is to embed the web page within your application.

To open the mobile device's web browser, we'll import `Linking` from react native, and use the `openURL` function, which will open any url that starts with `http` or `https` in that web browser.

If you want to stay within your current application however,  you can import `WebView` from react native, and use that as a component in your application.  Pass in a `uri` param to display that web page in the embedded web view.

Open a Webpage in React Native with Linking and WebView

When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on the bottom half of the screen, which can be frustrating for users.  There are a few common ways to deal with this in React Native - and this video shows the following solutions:

First, you can use the built in `KeyboardAvoidingView` to move components around when the keyboard comes on screen.  It has the advantage to being built in to React Native already - but it can be overly complicated to get this approach to work consistently across both iOS and Android.

There is also a third party library called `KeyboardAwareScrollView`, which will allow your entire view to scroll, and will keep the currently selected text inputs up and out of the way of the keyboard.

Prevent the On-screen Keyboard from Covering up Text Inputs

We will set up Keras using Tensorflow for the back end, and build your first neural network using the Keras Sequential model api, with three Dense (fully connected) layers.  This network will take in 4 numbers as an input, and output a single continuous (linear) output.

## Getting Started

* Install [Python](https://www.python.org/downloads/)
* Install [Tensorflow](https://www.tensorflow.org/install/)
* Install [Keras](https://keras.io/#installation)
* You may also need [h5py](http://docs.h5py.org/en/latest/build.html) if you don't already have it
* Configure [Keras to use Tensorflow](https://keras.io/backend/)


Create a Fully Connected TensorFlow Neural Network with Keras

We’ll set up some training data for a fully connected neural network, and train the model on that data.  Then, we’ll look at how the accuracy decreases as the number of epochs increase.

Train a Sequential Keras Model with Sample Data

When training and testing a neural net, it’s important to separate training data from validation, so that you aren’t checking the accuracy of the model with the same data that you use to train it.  This will help reduce overfitting. We’ll use the `validation_split` parameter when fitting our model to automatically split data up into a training set and a validation set, and use that to check the validation accuracy of our model.

Separate Training and Validation Data Automatically in Keras with validation_split

There are some cases where you don’t want an automatic validation sample - but you want to be able to provide your own validation data set.  For example, with time series data, you may want to use a sequential set of data to do validation.  We’ll manually split our training data into training and validation sets, and then train the model with that split.

Topics

Instructors

Content Type

Chris Achard