 Resources from Chris Achard in 2021

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 doing a side effect (like fetching data) in React, we can use the `useEffect` hook to perform that action and then set state afterwards.

So we'll fetch some data inside of useEffect like this:

```
  useEffect(() => {
    console.log(props.id)
    fetch("https://swapi.co/api/people/"+props.id)
      .then(response => response.json())
      .then(result => setData(result))
  }, [props.id])
```

Caution! make sure to set the dependency array (the second argument to useEffect) to contain any data that you use inside of the `useEffect`.  Otherwise you could end up with an infinite loop as the useEffect will run every time the component in re-rendered.



Perform Asynchronous Actions (like fetching http data) in React with useEffect

React components are functions that return JSX (which looks like HTML, but is actually a flavor of javascript).

Once you create a new function component that returns JSX, you can then use it from inside of another component by returning it like any other component.

Write a Custom Function Component in React with JSX

You can reuse your custom react components multiple times and build them into a tree of components like this:

```
<Greeting />
<div>
  <Greeting />
</div>
```

Notice that the `<div>` tag contains the `Greeting` tag as a child, but the `Greeting` tag contains no children - so it requires the trailing slash (`/>`) so it can be a "self closing" tag

Building a Tree of UI Components in React with Children or with Self-closing tags

To pass data from a parent react component to a child react component, we can supply "attributes" to the JSX tags like:

```
<Greeting name="React" />
```

That `name` attribute is then available in the `Greeting` component as a `prop` (which is an object passed in as the first argument to the react function component.

That means we can display that name from the `props` argument like this:

```
function Greeting(props) {
  return(<p>{props.name}</p>)
}
```

And so you can customize any react component by passing data down in the form of that props argument.

Reusing Custom React Components by Passing Data Down as Props

Data inside of a react component that can change (with user or server interaction) is called `state`.

import `useState` from react, and then we can use that function to create some local state by calling it with a default value:

```
const [count, setCount] = useState(5)
```

`useState` returns an array of two items: the first is the current value of the state, and the second is a function that we can use to update that state.

Create State Data that can Change in a React Component with useState

After creating some state with `useState`, we can call the set function to update the data in local state, which will automatically "re-render" the component, and update the UI.

To do that, we'll first create a new function that will update the state that we want:

```
const updateCount = () => {
  setCount(count + 1)
}
```

and then we can pass that `updateCount` function into the `onClick` of a button:

```
<button onClick={updateCount}>Click Me!</button>
```

which will then call `updateCount` once clicked, which will call `setCount`, which will update the `count` state, and automatically display that update on the UI.

Create a Button in React that Changes Local State and Automatically Updates the UI

There are two main (default) ways to add styles to React components:

First, just normal CSS classes can be added to react components by setting a `className` attribute:

```
<p className='big-text'>BIG</p>
```

(It's called `className` instead of `class` because "class" is a reserved keyword in javascript)

Second, "inline styles can be added as javascript objects to the `style` attribute of a component:

```
<p style={{ fontSize: 20, color: 'blue' }}>Blue</p>
```

Notice that the "double curly braces" represent a javascript object being created _inside_ of JSX, and also that the css attributes are camel cased.

Adding Styles to React Components with CSS or Inline Styles

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

To compute a value from one or more values stored in Recoil, we can create a "selector".

First import `selector` from Recoil, and then call it with an object that has two keys: `key` and `get`:

```
import { selector } from recoil;
...
const paperSize = selector({
  key: 'paperSize',
  get: ({get}) => {
    const score = get(gameScore)
    return 100 + (score * 5)
  }
})
```

Inside of the `get` function we can get the current value of the `gameScore` atom from recoil, and then compute a new value from that to return to our game.  Then we can get the value using `useRecoilValue`:

```
import { paperSize } from './selectors'
...
const size = useRecoilValue(paperSize)
```


Compute a Value in Recoil Using a Selector

We'll create a new React game with:

```
npx create-react-app paper-game
cd paper-game
```

and then install Recoil with:

```
npm install recoil
```

and start the server:

```
npm start
```

Then, to wrap the entire app in the recoil root, we'll import `RecoilRoot` from `recoil` and wrap the app:

```
    <RecoilRoot>
      <Game />
    </RecoilRoot>
```

And the app is now up and running - ready to use Recoil



Set Up Recoil in a new React App

We'll create a new bit of shared state (called an "atom" in Recoil) by importing `atom` from Recoil and setting a unique key and default value:

```
import {
  atom
} from 'recoil'

const gameScore = atom({
  key: 'gameScore',
  default: 0
})
```

Then we can use that `gameScore` by calling the Recoil hook `useRecoilState`

```
import {
  useRecoilState
} from 'recoil'

...

  const [score, setScore] = useRecoilState(gameScore)
```

That looks a lot like a local `useState` call - but is different because it creates the state in Recoil, which can then be used in this component, or in any other component in the tree (underneath the same `RecoilRoot`)

Create Shared State with Recoil in a React App

To get a value from Recoil we can import the atom that we want and the hook `useRecoilValue` from recoil.

Then we can get the value:

```
import { useRecoilValue } from 'recoil'
...
import { gameScore } from './atoms'
...
const score = useRecoilValue(gameScore)
```

And display it in a lablel:

```
<h3>Score: {score}</h3>
```

That value will update every time the button is clicked (and `setScore` is called) automatically!

Read a Value from Recoil with useRecoilValue

To change a value in state we can do that directly (by pulling the atom with `useRecoildState`), or we can write a custom hook that will change the value for us:

```
const useResetScore = () => {
  const [score, setScore] = useRecoilState(gameScore)
  return () => {
    setScore(0)
  }
}
```

That function returns a function that we can then call from a component like any other hook:

```
  const resetScore = useResetScore()
```

and then we can use that new `resetScore` function for the `onClick` of a button:

```
<button onClick={resetScore}>Reset</button>
```

which will change the value in the Recoil state.

That's a simplistic example of a custom hook - but that hook could then be extended to do multiple state changes, and then could be imported into any component in the React tree and used.

Write a Custom Recoil Hook to Reset a Value in the Recoil State

Instead of just returning a value from a recoil selector, you can return any promise, which means that you can do asynchronous functions in recoil selectors (this is a little like a redux thunk).

The huge bonus is that you don't have to do anything different when actually calling the selector - use can use `useRecoilValue` in the same way that you would from a normal selector.

The only thing you must do is somewhere in the component tree, wrap any component that uses an async selector with a `<React.Suspense>` tag with a `fallback` prop that will tell React what to display when the async selector isn't loaded yet.





Use Async Functions in a Recoil Selector

There are two methods to append strings together in javascript, but there are edge cases that you have to watch out with each of them.

First, you can use the `+` operator to add strings together:

```
"first" + " " + "second"
```

which works, but watch out!  If one of your variables is a non-string value, then it will try to convert that to a string before adding it to the other string.

The other method is to use the `concat` method:

```
"first".concat(" ", "second")
```

but `concat` has a big problem because now if the first value is a non-string value (like `null` or `undefined`), then it will cause a runtime error, since the `concat` method is undefined on those values.

For that reason, most people use the `+` operator to add two strings together in javascript.

Append two strings together in javascript (with edge cases)

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

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

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

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


Topics

Instructors

Content Type