- What is a JavaScript framework? Watch this video.
- Why would we want to use a framework? Read this article.
There are a bunch of JavaScript frameworks out there to use. At Turing, we choose to teach React - it's one of the most popular frameworks out there. Actually, a lot of developers will call React a library, which it is...but it can also be described as a framework. It's a little confusing, but the lines are blurred for React. Let's just say that React is a library with some rules and conventions to follow.
Go through these resources to get started learning some React!
- Read over Tyler McGinnis' React Tutorial: A Comprehensive Guide to learning React.js in 2018
- Go through the React tutorial from the docs
- Take a deeper dive into JSX with the React docs and this tutorial
- Take a look at some extra JSX gotchas (courtesy of tyler McGinnis)
- Optional: practice building a simple app in React. Think of a mod 1 project, and build that in React!
We strongly encourage you to spin up a React app with Create React App and play around with it!
- CRApp (create a little toy app with Create-React-App)
We will continue to work with asynchronous JavaScript, mainly when we use network requests to get data from servers (like using the fetch). We will go in depth with asynchronous JavaScript, including how to test it in mod 3.
- Watch this video on details of the request/response cycle.
- Read ajax in react to learn about incorporating network requests in React apps.
- Watch this video on the event loop.
We are going to learn a new type of testing! In Mods 1 and 2, you learned about unit testing (testing a single function or class) and integration testing (testing multiple functions/classes working together). In Mod 3, we are going to explore "end-to-end" (sometimes called E2E) testing!
- Read this blog post for a high level overview of E2E
- Watch this video to learn about "user stories" in agile workflows - this will help us figure out how to write our E2E tests!
- Practice writing user stories by creating some user stories for a Mod 2 or Mod 1 project
Workflow is something you will deal with every day on the job. Let's continue strengthening our knowledge of workflow skills with these articles.
You'll need to make sure you've got the Xcode Command Line Tools before the mod starts. The CLT are necessary for many of React's dependencies to work as expected.
# to see whether you have the CLT, run:
xcode-select -v
# If you don't have the CLT, run:
xcode-select --install
- Xcode is installed and ready to go
Create a GitHub gist to answer these questions in as much detail as possible. Imagine someone is asking these questions in an interview (these are popular interview questions).
- What is a "data model", and how does it relate to the DOM in a front-end application?
- What is a "framework?" And how does it differ from a "library?"
- Why should we consider using a framework over vanilla JS like you have been doing in mods 1 and 2?
- What is a "component" in React? Why is it useful to have components?
- What is JSX?
- What are React "props?"
- What is React "state?"
- What does "data down, actions up" mean in React?
Note: As you do your research, stay away from React articles that talk exclusively about "hooks". We will be learning hooks in Mod 3 but they are not a requirement for success in the module.
Before the due date, send a link to your gist in a DM to both of your instructors.
- Gist is created and sent to instructors
You can find all of the instructions here!
- PD stuff is done
[optional]
Here are some podcasts and videos to listen to and watch respectively:
- Testing with Fun Fun Function (This is a playlist of 7 YouTube videos on testing)
- Shop Talk with Tom Dale (This one is a bit older but still a good introduction for thinking about why client-side applications are important and what frameworks bring to the table.)
- Intro to JS Modules (Ever been confused about
module.exportsvsexport default? When to useimportvsrequire()? Read this for some clarity) - NPM Refresher (We're going to be using a lot of packages, make sure you're comfortable with your pakcage manager!)
- Wes Bos JavaScript30 (Maybe pick 5 or 10 exercises - try to challenge yourself)
- 100 Days of CSS challenge (Do a few days of challenges to keep your CSS skills sharp)