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

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.

`git reset` has three primary options that we might use: `--soft`, `--hard` and `--mixed` (the default).

We'll use `git reset` to undo the latest commit in all three ways, and compare the result of reseting with each flag.

Use and Compare the Different git Reset Options: --hard, --soft, and --mixed

If you've removed a commit with `git reset --hard`, it's still possible to recover the commit using `git reflog` to look up the commit hash.

Once we find the right commit hash, we can reset our branch _back_ to that commit hash with `git reset --hard [HASH]`

NOTE!  git will actually garbage collect abandoned commits (every 30 days or so - so not very often) - so you can't recover from a `reset --hard` forever; which is why it's recommended to avoid `--hard` if you ever want to references those changes.

Recover Local Changes from `git reset --hard` with `git reflog`

Once a commit is pushed, you do NOT want to use `git reset` to undo it - because `reset` will rewrite the history tree, and anyone who has already pulled that branch will have a bad tree.

Instead, we'll use `git revert` to make a "revert commit" (like a merge commit), which will "undo" a specific commit.  So the syntax is:

`git revert [HASH-TO-UNDO]`


Undo a Commit that has Already Been Pushed

If you want to pull over just a single commit from one branch onto another, you can do that with `git cherry-pick [HASH-TO-MOVE]`

We'll demonstrate that by making a commit on a feature branch, and then copying that commit (but not the entire branch) onto master.

Copy a Commit from One Branch to Another

We'll do some work and commit it - but then realize it was on the wrong branch!

To move a commit from one branch to another, we'll first `git cherry-pick` the commit we want, and then use `git reset` to remove the commit from the master branch.  

Then we'll be able to manually delete the changes that we don't want on the master branch.

Move a Commit that was Committed on the Wrong Branch

If we make a change to the same function both locally and remotely, then when we try to pull down the remote changes, we'll run into a conflict - and git won't pull the remote changes down.

So first, we'll use `git stash` to stash the local changes, and then `git pull` to get the remote changes.  To apply the stashed changed, we'll then use `git stash pop`

Since we changed the same function however, we'll get a merge conflict!  So we'll fix the merge conflict, and then add and commit that change.

Finally, we'll drop the change from the stash with: `git stash drop stash@{0}`

Use `git stash` to Save Local Changes While Pulling

To poke around in old code, we can checkout the hash of an old commit with `git checkout [HASH]` - but then we'll be in a "detached HEAD" state.

Detached HEAD just means that HEAD is not pointing to a branch.  That's problematic if we want to save the work that we do in that state - so we first have to make a new branch where we are with `git checkout -b my-new-branch`

Then, any changes we make can be committed to that new branched and saved.

Explore Old Commits with a Detached HEAD, and then Recover

If we try to make a pull request on github that has a conflict, there are a few ways to fix it.

We're going to first back out of the pull request, and then merge `master` into our feature branch.

We'll manage the merge conflict locally, and then do a new pull request (which will not have the conflict)

Fix a Pull Request that has a Merge Conflict

We've made a pull request and now we can clean up the branches by deleting the feature branch.

Branches are just pointers to commits - so we can safely delete branches without losing the underlying commits (once the commits are merged back into master).

So we'll use the github interface to delete the branch remotely, and to delete it locally we'll use `git remote prune origin --dry-run` and then `git remote prune origin`

That will tell us that the remote is gone, and we can finally clean up the feature branch with: `git branch -d feature-branch`

Cleanup and Delete Branches After a Pull Request

We'll go back into our history with

`git log --oneline`

and then we can pick a previous commit and change its commit message with an interactive rebase.  (Note: you shouldn't try to do this on commits that have already been pushed - only commits you still have locally)

To start the interactive rebase, we'll use:

`git rebase -i HEAD~3`

and then change `pick` to `reword`.  Then we can reword the commit message and the commit will be rewritten for us.

Change the Commit Message of a Previous Commit with Interactive Rebase

We're going to pick a previous commit and enter an interactive rebase with:

`git rebase -i HEAD~2`

and change the word `pick` to `edit` on the commit where we want to add a file.

Then during the interactive rebase, we can add the file, and amend the commit we stopped on with:

`git commit --amend --no-edit`

and then once we're happy, continue the rebase with:

`git rebase --continue`

Add a File to a Previous Commit with Interactive Rebase

We'll enter a more complicated interactive rebase with:

`git rebase -i HEAD~2`

and intentionally cause a merge conflict in a previous commit.

Then we can fix that merge conflict like normal, but finish up the rebase with:

`git rebase --continue`

Fix Merge Conflicts While Changing Commits During an Interactive Rebase

We have created 3 commits that we want to squash together before we push them to github.  We can enter an interactive rebase with:

`git rebase -i HEAD~3`

and then change `pick` to `squash` for the last two commits (we want to squash "down" into the first one).

Then we'll be given the chance to make the commit message for that commit, and once we save the message we'll be left with just a single commit that contains the changes from all three commits.

Squash Commits Before they are Pushed with Interactive Rebase

We make a .env file and accidentally push it to github.  

In order to remove the .env file, we first have to add it to our .gitignore file - but that's not enough, because the .env file will still be on the branch on github.

So we can remove all of our files from our git cache with:

`git rm -r --cached .`

and then add back all the files we want with:

`git add -A`

(that will exclude the .env file this time - because of the .gitignore file).

Then we can commit that change (which is effectively the same as removing the .env file), and push it, which will remove the .env file from the mater branch.

IMPORTANT! If you have secrets in a file that you remove in this way, you should still consider those secrets compromised, because anyone could have pulled them already - and they are also still in the git history.

git Ignore a File that has Already been Committed and Pushed

If we want to completely remove a file from github - including all history - there is a tool that we can use called the BFG.

The github help article is here:

https://help.github.com/en/github/authenticating-to-github/removing-sensitive-data-from-a-repository

And the BGF itself is available here:

https://rtyley.github.io/bfg-repo-cleaner/

We'll start by downloading the BFG jar file, and then cloning a mirror of our repo with:

`git clone --mirror [repo-url]`

Then we can delete our .env file with:

`java -jar ~/Downloads/bfg-1.13.0.jar --delete-files .env my-repo.git`

which will delete the .env file. Then we can use the following command to prune the entire history and garbage collect the remains:

`git reflog expire --expire=now --all && git gc --prune=now --aggressive`

And finally, use `git push` to push that change to github, and remove the .env file from all of the history on github as well.

Completely Remove a File from Pushed git History

We'll make a new feature branch with:

`git checkout -b new-branch`

and then when we make changes and commit them, we can try to push that branch with:

`git push`

However, in order to get the branch to exist on github as well, we need to set the upstream of the local branch at the same time with:

`git push --set-upstream origin new-branch`

Push a New Branch to github that Doesn't Exist Remotely Yet

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

Go to codesandbox.io and start a new sandbox using the "React" template

Then, you can edit the HTML (which is actually a special form of javascript called JSX) to make your first custom component!

CodeSandbox is great because it skips the need to set up your on development environment - so you can get started super quickly.

Write Your First React Component with CodeSandbox.io

The React UI loop follows these steps:

1. You have data
2. That data gets displayed
3. The data updates (by user input, or a fetch from the server, etc)
4. The UI updates

The React "magic" is in step 4 - React automatically updates the UI based on your changing data in a performant way.  That means you can focus on your data and UI layout, and NOT on how you would have to update the DOM to show those changes.

How React Works

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

Every UI on the web can be thought of as a tree of "components".

Break down your UI in your mind by separating out "like" components.  Those are what you'll turn into React components for displaying your data.

Think in React by Breaking Your UI into Components

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

Topics

Instructors

Content Type

Free or Pro