React Practice for Beginners: Build and Modify Basic Components

Course details

This course provides hands-on experience in working with React and JSX. Follow along with instructor Maaike van Putten to learn how to build dynamic UIs from the ground up and explore features such as functional components, props, and state management with useState, and handling forms and events. Learn how to render lists of data and style your application using styled components. Each chapter ends with a short challenge to give you practical experience and apply the concept yourself.

Learning objectives
Build and organize UIs using JSX, functional components, props, and event handling.
Create dynamic UI components with the use of useState for local state management.
Render lists, handle form data and apply styled components to create UIs.

Concepts

0. Introduction

01 - Why practice building and modifying basic components in React
02 - What you should know
03 - CoderPad tour

1. Understanding React and JSX

04 - Working with React
05 - Rendering UI elements with JSX
06 - Solution - Create a HelloComponent

2. Using Components and Props

07 - Defining functional components
08 - Passing data via props
09 - Solution - Build a user card

3. Managing State with Hooks (useState)

10 - Managing a component state with useState
11 - Solution - Create a counter

4. Handling Forms and User Input

12 - Connecting form inputs to state
13 - Submitting a simple form
14 - Solution - Make a contact form

5. Adding Basic Event Handling

15 - Using event handlers in functional components
16 - Solution - Create a toggle text

6. Rendering Lists

17 - Using map to render arrays of data
18 - Solution - Display a list of items

7. Working with Styled Components

19 - Working with styled components
20 - Converting a plain JSX element into a styled component
21 - Solution - Convert a basic button into a StyledButton

Conclusion

22 - Learning more about React