Skip to content

Latest commit

 

History

History
86 lines (50 loc) · 5.67 KB

README.md

File metadata and controls

86 lines (50 loc) · 5.67 KB

Get Started with React

Module Source

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.

Goals

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

Video walk-through

workshop walk-through

🎥 Click this image to watch Christopher walk you through the workshop

Pre-Learning

Prerequisites

  • Software
  • Experience
    • Have created HTML pages and used CSS for style
    • Written basic JavaScript applications
    • Created a project and managed packages using npm

What students will learn

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.

Introducing React and JSX

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.

Create a starter project

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.

React app structure and create Hello world

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.

Exploring and creating components

As highlighted earlier, React is based around components. You will explore the concepts of a component, and create your first component.

Displaying dynamic data

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.

Adding style

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.

Quiz or Code Challenge

Knowledge check

Next steps

Practice

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!

Feedback

Be sure to give feedback about this workshop!

Code of Conduct