slides.pptx
- 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
- 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
- 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.
Editor's Notes
- #3: Link to published module on Learn: https://docs.microsoft.com/en-us/learn/modules/learn-pr/language/react-get-started/
- #7: 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.
- #8: 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.
- #9: 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)
- #10: Attendees will walk through the steps at Create a starter project - Learn | Microsoft Docs Have the attendees look through the provided project structure
- #12: 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
- #13: 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.
- #14: Have the attendees walk through the steps at: Hello, world! - Learn | Microsoft Docs
- #16: 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.
- #17: 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.
- #18: The attendees will walk through Create your first component - Learn | Microsoft Docs
- #20: 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>
- #21: Walk through the JSX to create the component. Highlight the constant of title. Then note the { title }, which will display the value
- #22: 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.
- #23: Have the attendees create the RecipeTitle component by walking through the exercise: Display dynamic data - Learn | Microsoft Docs
- #24: Have the attendees add style to their component by walking through the exercise: Add style - Learn | Microsoft Docs
- #26: Explanation: Correct. JSX is a blend of JavaScript and XML.
- #27: Explanation: Correct. JSX is a blend of JavaScript and XML.
- #28: Explanation: Correct. JSX allows you to combine logic and HTML. It's the preferred method for creating React components and applications.
- #29: Explanation: Correct. JSX allows you to combine logic and HTML. It's the preferred method for creating React components and applications.
- #30: Explanation: Correct. Bundlers convert JSX and other file types into JavaScript code that the browser can read.
- #31: Explanation: Correct. Bundlers convert JSX and other file types into JavaScript code that the browser can read.
- #33: 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.