Building Your First React App
About
In this module, you’ll spin up your very first React application using Vite, a modern build tool that makes scaffolding new React applications easy and intuitive. This hands-on code-along is designed to guide you through the essential steps of setting up and navigating a React environment for the first time.
You will learn to build and export function components, integrate JavaScript within JSX, and implement patterns like conditional rendering and looping with JSX elements. Each lesson focuses on understanding and utilizing React’s core features, making it ideal for beginners eager to learn the mechanics of single-page applications in React.
Content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 3 min | link | Create a new React application using Vite. |
| Getting Started with React | 9 min | link | Explore the React file structure created by Vite, and start the development server. |
| Function Components | 4 min | link | Create and export function components in React. |
| JSX Fundamentals | 8 min | link | Return JSX from a function component in React. |
| JavaScript in JSX | 5 min | link | Embed JavaScript values and expressions into JSX. |
| Conditional Rendering | 5 min | link | Using ternary expressions to implement conditional rendering in JSX. |
| Looping with JSX Elements | 11 min | link | Use the map() method to loop through arrays and transform them into JSX elements. |
| Conditional Rendering in Loops | 3 min | link | Use loops to create lists in React and apply conditions to change how each list item is displayed based on its data. |
| Total content | 48 min | – |