This workshop is based on the Getting started with React module on Microsoft Learn. All of the steps the attendees will follow to complete the workshop are contained in the module.
In this workshop, you will learn how to build a web application with React.
| Goal | Description |
|---|---|
| What will you learn | React concepts, JSX, and how to create your first component |
| What you'll need | Visual Studio Code, Node.js and Git |
| Duration | 1 hour |
| Just want to try the app or see the solution? | Solution files |
| Slides | Powerpoint |
🎥 Click this image to watch Christopher walk you through the workshop
- Software
- Experience
- Have created HTML pages and used CSS for style
- Written basic JavaScript applications
- Created a project and managed packages using npm
React is a popular front-end framework for creating websites. Its modular structure allows for quick prototyping and streamlined development. During this workshop you will create your first React project. You will explore JSX, the syntax most commonly used to create React components. You will close by adding style to your pages.
You will start by exploring React and JSX. While you can create React applications without using JSX, most React developers use JSX. You'll also be introduced to components, which are reusable modules to help streamline development and encourage reuse.
With the core concepts covered, you'll create a starter project. Because JSX needs to be built or converted into HTML and JavaScript, a build process is required. This project uses Snowpack to manage the build.
Most React apps follow a common structure, with an index.html file to host the React app, and some JavaScript to load the appropriate libraries and display the app. You'll explore how those are setup while creating Hello world.
As highlighted earlier, React is based around components. You will explore the concepts of a component, and create your first component.
The primary goal of most front-end JavaScript frameworks is to streamline the display of dynamic data stored in JavaScript variables or constants. With React, you will use "handlebars" ({{ }}) to indicate where you want variables and constants displayed. You will create a new component and display data.
As with any webpage, you will want to update the style by using CSS. With React, you can import a CSS file much in the same way you would import a JavaScript module. You will complete the workshop by adding style to your site.
Now that you know how to build a web application in React, either create a new project and build a blog or todo app, or add on to your Recipe app. Can you build a form so that someone could add a recipe? Can you style your recipes into cards that flip? Be creative!
Be sure to give feedback about this workshop!