React fundamentals and secure component writing
You build user interfaces from components and avoid the common security mistakes in React.
Level 201 · 18 lessons · 15 practice labs
Lessons
Getting started
- What React is and your first app with Vite: You grasp the component-based approach and get your first app running with Node.js.
- JSX: writing UI inside JavaScript: You learn the JSX rules and how expressions are embedded in curly braces.
- Components and props: You write small components and pass them data through props.
- Short task: a profile card component
Interaction
- State with useState: You hold changing UI data in state and see how updating it refreshes the screen.
- Handling events: You catch click and input events in a component and reflect them in state.
- Conditional rendering: You show different parts of the interface depending on state.
- Lists and keys: You render a list of items from an array and understand why keys are needed.
- Controlled forms: You bind form fields to state and show validation messages on screen.
- Short task: a shopping list with a counter and a form
Data and structure
- Lifting state and composing components: You move state to a shared parent so sibling components can use the same data.
- Fetching server data with useEffect: You fetch API data when a component loads and handle loading and error states.
- Writing your own hook: You extract repeated logic into a custom hook and reuse it.
- Short task: a user list from the server
Secure React
- Avoiding XSS in React: You see the danger of dangerouslySetInnerHTML and javascript: links and display user input safely.
- No secrets in the client and token storage: You know environment variables ship to the browser and weigh where session tokens are safest.
- Dependency security: npm audit and the lockfile: You audit dependencies, protect the lockfile and watch out for look-alike fake packages.
- Capstone: a secure notes board: You write a small app that lists, adds and safely displays user notes.
Practice labs
- Turn a product card into a component: Turn an HTML product card copied three times into one React component that takes props.
- Don't break the card on a missing prop: Write a component that shows defaults and a fallback view for products missing an image or price.
- Break a giant menu component apart: Split a restaurant menu that is one giant component into category, dish and price-tag components.
- Add state to a like button: Build a like button with useState whose count goes up and colour changes when clicked.
- Show loading and empty states: Show loading, empty and error states separately in an order list with conditional rendering.
- Fix a stale state update: Fix a counter that misses fast repeated clicks by using a functional update.
- Render a task list with map: Render a task array as a list with map and keys and strike through completed ones.
- Fix the index-key bug: Fix a list that keeps the wrong row's input after a delete by using stable ids.
- Write a controlled membership form: Make a membership form with name, email and plan controlled by one state object and validate it on submit.
- Update the tab title with an effect: Write the unread message count into the tab title with useEffect.
- Stop the endless request loop: Fix a component that keeps sending requests because of a wrong dependency array and add a cleanup function.
- Write a useFetch hook: Write a useFetch hook that handles loading, error and cancellation and use it in two components.
- Show a user bio safely: Render a bio shown with dangerouslySetInnerHTML as text and test it with a malicious input.
- Find a secret baked into the bundle: Inspect the built bundle, find the API key baked into it and move it to the server side.
- Block harmful link addresses: Write a safe link component that blocks javascript: URLs coming from the website field of a profile.
About this course
You build user interfaces from components and avoid the common security mistakes in React.
What you will learn
- Getting started
- Interaction
- Data and structure
- Secure React
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.