Introduction to React
Over the next couple of weeks we'll be getting to grips with React, a popular front-end framework for building user interfaces.
Before you go any further, read this byte: ⚡️ What is React?.
As you'll see below, we have quite a few different concepts to cover. Please make all necessary arrangements to ensure you can dedicate as much time to this as possible!
Learning objectives
To be able to answer "yes" to the following questions:
- Can you explain what React is?
- Do you know the difference between JSX and HTML?
- Can you explain the difference between state and props?
- Can you test a component using React Testing Library?
- Do you know how events work and how to handle them?
- Can you make a request to a server and process the response data?
- Can you handle errors in JavaScript?
Concepts
- React
- JSX
- Props
- State
- Stateful components
- Stateless (presentational) components
- React Hooks
- React Testing Library
- Request/Response
- Error Handling
Recommended Reading
It's strongly recommended that you get familiar with official React documentation in addition to the lecture material and walkthroughs.
Please be aware that some tutorials online may be using the older approach to creating React components, namely class components. On this course we'll be using the newer approach i.e. functional components.
Functional components
(The approach we take on the course)
Class components
(The older approach, which is good to be aware of, as you may go on to work somewhere where they are yet to migrate their React code from class to functional components. Though class components are now officially discouraged by the React team)
- react.dev: Thinking in React (a good intro to React)
- react.dev: Tutorial: Tic-Tac-Toe (official React tutorial)
- Freecodecamp: Intro to React
- Codecademy: Learn React Part 1
- Codecademy: Learn React Part 2
Challenge :cloud:
We will be making a weather forecasting application, which will look something like this:
This is a 2 week project so please take time to understand the concepts.
DO:
:white_check_mark: Take time to read any recommended reading.
:white_check_mark: Try and give each step a go without the accompanying walkthrough.
:white_check_mark: Go over the walkthrough after (read it carefully).
DON'T:
:no_entry: Skip the reading materials.
:no_entry: COPY AND PASTE.
:no_entry: Selectively read the walkthroughs.
Pairing
We won't be providing formal pairing instructions going forward. When you come to clone down our pre-made React boilerplate (more on this later), you will want to initialise a Git repository inside of it, before proceeding to set up your remotes, as per previous exercises.
Prerequisites
Before you get started, you should install one of these, which you may find useful for debugging (you should be using Chrome).