Unit 02: Client-Side Rendering
Overview
The focus this unit is:
- Client-side rendering with React.js
- Using JSX syntax
- Composing and testing UI components
- Managing component state and user interactions
- Client Side Routing
- Deploying simple React applications
- Using forms in React
We will spend all unit on learning the fundamentals of React. We will be using webpack to build assets and consume APIs from our server. React views are built using components. By the end of the unit, you should be comfortable building these components.
There will be more self-directed learning than previous units, but the pace will be initially slower to let the material sink in and for you to reconnect with and apply your self-directed learning style.
Core Concepts
React
Exercises
*Note: If any of these exercise links are sending you to a 404, it means the challenge hasn't been made available yet. You will get access to challenges alongside the material in bootcamp. Please let an instructor know if something should be available that isn't.
- react-paws-for-effect (select your cohort for a link)
- charlottes-web-log (select your cohort for a link)
React State
Exercises
- react-state-kata (select your cohort for a link) or broken-kaleidoscope (select your cohort for a link)
- memory (select your cohort for a link)
- enspiraled (select your cohort for a link)
React Component Testing
Exercises
- Pick any of this week's challenges and write some tests.
Client Side Routing
Exercises
- worldwide-routing (select your cohort for a link)
Deployment
React Forms
Exercises
- react-form-demo (select your cohort for a link)
- kata-react-forms (select your cohort for a link)
Learning Outcomes
Tech Skills
Core
I can...
- Build a React component
- Pass props to a React component (e.g. paws-for-effect challenge)
- Manage state in a single component (e.g. broken-kaleidoscope challenge)
- Build and use simple client-side routes
- Build and use client-side routes that take a parameter, then make use of the parameter in the component with useParams
- Deploy a simple app
- Resolve merge conflicts
Core+
I can...
- Write a simple test for a React component, (e.g. that specific text or a heading is present on screen)
Stretch
I can...
- Build a React form (= controlled form)
- Manage state across multiple components (incl. passing references to functions)
- Use Nested Routes
- Refactor my React code to put a repeated element in its own component
- Write a test that uses user events