React Practice for Beginners: Build and Modify Basic Components

35mBeginner2025-05-01

Authors

Maaike van Putten

Trainer and Developer for Java, Python, Spring Boot, and More

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.

Skills covered

React.jsMetaFront-End Web DevelopmentWeb DevelopmentOne-Off

Concepts

Introduction

Why practice building and modifying basic components in React
What you should know
CoderPad tour

Understanding React and JSX

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

Using Components and Props

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

Managing State with Hooks (useState)

Managing a component state with useState
Solution - Create a counter

Handling Forms and User Input

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

Adding Basic Event Handling

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

Rendering Lists

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

Working with Styled Components

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

Conclusion

Learning more about React