3. Prerequisites Knowledge of HTML, CSS, JavaScript, and Git
Knowledge of package management with Node.js and npm
Node.js and npm locally installed
A code editor, such as Visual Studio Code
4. Learning
objectives
Explore React and JSX
Install React and create a project
Create a React component and dynamically display data
Apply style to a React component
6. Introduction to React
- React is an open-source front-end framework
- React introduces JSX, or JavaScript XML
- JSX can be used to create React components
- During this workshop you will create a page to display recipe titles
7. Introduction to JSX
- JSX allows HTML (XML) and JavaScript to be combined in one file
- Allows for faster development
- JSX follows XML rules
- All elements must be placed inside one parent element
- All elements must be closed
- Browsers do not natively support JSX
- JSX must be converted to HTML and JavaScript through the build process
- Several tools exist for managing this process including Vite, Webpack and Snowpack
- This course uses Snowpack
8. Components
- React development is based on components
- Components are reusable blocks containing both UI and logic
Cart component
ProductList component
Product component
Product component
11. The application host
- Every React app will contain an HTML file to host the app
- Note the div element with the id app
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipes</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/dist/index.js"></script>
</body>
</html>
HTML
12. index.jsx
- React apps often use index.jsx as the root to the project
- This will typically load the React app and place it on the page
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
JSX
15. Create your first component
- React development is based on components
- Components are self-contained, reusable units of UI and logic
- React projects typically contain many components
- While React components can be a function or a class, we will use
functions in this workshop
16. The core component
Many React projects start with one core component called App
import React from 'react';
function App() {
return (
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
JSX
19. Display dynamic data
To display dynamic data contained inside JavaScript,
use the syntax { }, sometimes called handlebars.
<div>{ Date.now() }</div>
JavaScript
20. Create a RecipeTitle component
In our example, we'll create a component for the title of a recipe.
import React from 'react';
function RecipeTitle() {
const title = 'Mashed potatoes';
return (
<h2>{ title }</h2>
)
};
export default RecipeTitle;
JSX
25. Question 1
What is JSX?
A. A combination of JavaScript and XML
B. A new version of JavaScript
C. The output of a React project
26. Question 1
What is JSX?
A. A combination of JavaScript and XML
B. A new version of JavaScript
C. The output of a React project
27. Question 2
Why would you use JSX to create a React application?
A. JSX is the only supported method for creating React applications.
B. JSX allows for good code management. It injects the necessary logic with
your HTML.
C. JSX is supported by all browsers.
28. Question 2
Why would you use JSX to create a React application?
A. JSX is the only supported method for creating React applications.
B. JSX allows for good code management. It injects the necessary logic
with your HTML.
C. JSX is supported by all browsers.
29. Question 3
What is the purpose of a bundler in web development?
A. To generate JSX
B. To convert JSX and other resources into JavaScript
C. To bootstrap an application
30. Question 3
What is the purpose of a bundler in web development?
A. To generate JSX
B. To convert JSX and other resources into JavaScript
C. To bootstrap an application
32. Summary
React is the most popular front-end JavaScript framework.
• Understand the core concepts of React.
• Create a React application.
• Create a component.
33. Next Steps
Practice your knowledge by
trying these Learn modules:
Please tell us how you liked this
workshop by filling out this survey:
https://aka.ms/workshopomatic-
feedback
•Intro to React Learning Path
•Explore Azure Static Web Apps
•Build JavaScript applications with
Node.js
Link to published module on Learn: https://docs.microsoft.com/en-us/learn/modules/learn-pr/language/react-get-started/
React is an open-source framework to create user interfaces. It's most famous for creating web applications. But React can be used to create mobile or desktop applications through React Native. React focuses on the View in Model-View-Controller. So you can use other libraries for routing, state management, and accessing APIs.
This module explores the core concepts of React. It introduces JavaScript XML (JSX), components, and displaying data.
React uses a special syntax known as JavaScript XML (JSX). JSX allows you to integrate both HTML (or custom components you might create) and JavaScript into a single file or even single line of code. By using JSX, you can rely on JavaScript syntax for logic. Visual Studio Code provides IntelliSense for JSX files, so it's a useful tool when you're working with React.
[!NOTE] JSX relies on Extensible Markup Language (XML). XML's syntax is similar to HTML. In many instances you might not notice a difference. However, XML places a couple of important restrictions on your syntax, as noted on the slide
Browsers don't natively support JSX. So JavaScript and HTML must be generated from the JSX files to be rendered by a browser. Several bundlers and other tools can perform the necessary tasks. These tools include Webpack, Parcel, and Snowpack. We'll use Snowpack because it doesn't require code or extra scripting.
React development is based on components. Components are self-contained units of both display and work. They can be reused in your application. Use them to logically break down your application into smaller chunks (or components).
The slide shows a sample using a component for a cart (Cart.jsx), one for a list of products (ProductList.jsx), and each product is an instance of a product component (Product.jsx)
Attendees will walk through the steps at Create a starter project - Learn | Microsoft Docs
Have the attendees look through the provided project structure
Highlight the div element, which will be replaced by the React app. Also note the reference to index.js, NOT index.jsx. This is because the HTML file will reference the JavaScript file, not the JSX file. The JavaScript file will be created during the build process
Notice index.jsx. Highlight the render function. Notice the first parameter is just HTML of <h1>Hello, world!</h1>. This is JSX in action. The second parameter is accesses the element with the ID of app, which is our div element.
Have the attendees walk through the steps at: Hello, world! - Learn | Microsoft Docs
React development is based on components. These self-contained units are designed for reuse and modularity. React projects typically contain many components.
A component can be either a function or a class. Most React developers prefer to create components by using functions, so we'll focus on this style.
Applications generally have one core component, commonly called an App. The App acts as the root of the application. We'll start by creating our App component.
Walk through the JSX provided on this slide
Note the function named App. This will generate the HTML to display
Note the return call with the HTML inside the parenthesis. This is JSX in action. Also note how everything is contained inside the article element. While this isn't required, we will be adding elements to this later, so we wanted a root element.
Note the export default App at the bottom. This returns the component, which allows it to be imported like a normal JavaScript module.
The attendees will walk through Create your first component - Learn | Microsoft Docs
To display dynamic data inside a component, use the syntax { }, sometimes called handlebars. This style of syntax is relatively common in HTML templating tools. Use these handlebars to effectively switch to JavaScript mode and run almost any valid JavaScript.
For example, to display the current time, you could use the following code:
<div>{ Date.now() }</div>
Walk through the JSX to create the component. Highlight the constant of title. Then note the { title }, which will display the value
Notice that we create a constant named title. We then use the handlebar syntax { } to tell React we want to display the value of title inside the <h2> element. This feature of JSX allows us to mix JavaScript and HTML.
Have the attendees create the RecipeTitle component by walking through the exercise: Display dynamic data - Learn | Microsoft Docs
Have the attendees add style to their component by walking through the exercise: Add style - Learn | Microsoft Docs
Explanation: Correct. JSX is a blend of JavaScript and XML.
Explanation: Correct. JSX is a blend of JavaScript and XML.
Explanation: Correct. JSX allows you to combine logic and HTML. It's the preferred method for creating React components and applications.
Explanation: Correct. JSX allows you to combine logic and HTML. It's the preferred method for creating React components and applications.
Explanation: Correct. Bundlers convert JSX and other file types into JavaScript code that the browser can read.
Explanation: Correct. Bundlers convert JSX and other file types into JavaScript code that the browser can read.
React is the most popular front-end JavaScript framework. You can use it to create both browser-based and locally installed applications. React introduces a new syntax called JSX to control the user interface.
We started this module by exploring the core concepts of React. We saw how React can help you create web applications. We explored the installation options and how to use a bundler to manage our JSX files. After creating our first project and components, we ran the code locally. We also mentioned other types of applications that React can help you create.
You learned how to:
Understand the core concepts of React.
Create a React application.
Create a component.
