Getting started with React
Prepared By : Suchika Patel
Prerequisites Knowledge of HTML, CSS, JavaScript, and Git
Knowledge of package management with [Link] and npm
[Link] and npm locally installed
A code editor, such as Visual Studio Code
Learning Explore React and JSX
Install React and create a project
objectives Create a React component and dynamically display data
Apply style to a React component
Introduction to React and JSX
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
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
Components
- React development is based on components
- Components are reusable blocks containing both UI and logic
Cart component
ProductList component
Product component
Product component
Exercise: Create a starter project
React app structure
The application host
- Every React app will contain an HTML file to host the app
- Note the div element with the id app
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipes</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/dist/[Link]"></script>
</body>
</html>
[Link]
- React apps often use [Link] as the root to the project
- This will typically load the React app and place it on the page
JSX
import React from 'react';
import ReactDOM from 'react-dom';
[Link](
<h1>Hello, world!</h1>,
[Link]('app')
);
Exercise: Create Hello world!
Create your first component
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
The core component
Many React projects start with one core component called App
JSX
import React from 'react';
function App() {
return (
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
Exercise: Create your first component
Display dynamic data
Display dynamic data
To display dynamic data contained inside JavaScript,
use the syntax { }, sometimes called handlebars.
JavaScript
<div>{ [Link]() }</div>
Create a RecipeTitle component
In our example, we'll create a component for the title of a recipe.
JSX
import React from 'react';
function RecipeTitle() {
const title = 'Mashed potatoes';
return (
<h2>{ title }</h2>
)
};
export default RecipeTitle;
Explore the code
Notice that we create a constant named title.
Exercise: Display dynamic data
Exercise: Add style to a React component
Knowledge check
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
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
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.
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.
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
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
Summary
Summary
React is the most popular front-end JavaScript framework.
• Understand the core concepts of React.
• Create a React application.
• Create a component.
Next Steps
Practice your knowledge by trying these Learn modules:
•Intro to React Learning Path
•Explore Azure Static Web Apps
•Build JavaScript applications with [Link]
© Copyright Microsoft Corporation. All rights reserved.
