slides.pptx

1. Microsoft.com/Learn
2. Title Speaker Name Getting started with React Speaker Name Title
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
5. Introduction to React and JSX
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
9. Exercise: Create a starter project
10. React app structure
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
13. Exercise: Create Hello world!
14. Create your first component
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
17. Exercise: Create your first component
18. Display dynamic data
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
21. Explore the code Notice that we create a constant named title.
22. Exercise: Display dynamic data
23. Exercise: Add style to a React component
24. Knowledge check
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
31. Summary
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
34. © Copyright Microsoft Corporation. All rights reserved.

Hinweis der Redaktion

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.

slides.pptx

Du liest eine Vorschau.

Hier ansehen

slides.pptx

Weitere Verwandte Inhalte

Ähnlich wie slides.pptx (20)

Aktuellste (20)

slides.pptx

Hinweis der Redaktion