SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
Microsoft.com/Learn
Title
Speaker Name
Getting started with React
Speaker Name
Title
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
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
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
<!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
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
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
import React from 'react';
function App() {
return (
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
JSX
Exercise: Create your first component
Display dynamic data
Display dynamic data
To display dynamic data contained inside JavaScript,
use the syntax { }, sometimes called handlebars.
<div>{ Date.now() }</div>
JavaScript
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
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:
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
© Copyright Microsoft Corporation. All rights reserved.

Weitere ähnliche Inhalte

Ähnlich wie slides.pptx

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfBOSC Tech Labs
 
Learn reactjs, how to code with example and general understanding thinkwik
Learn reactjs, how to code with example and general understanding   thinkwikLearn reactjs, how to code with example and general understanding   thinkwik
Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react jsdhanushkacnd
 
Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperFabrit Global
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications Concetto Labs
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
20171108 PDN HOL React Basics
20171108 PDN HOL React Basics20171108 PDN HOL React Basics
20171108 PDN HOL React BasicsRich Ross
 
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSGDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSPratik Majumdar
 
GWT training session 1
GWT training session 1GWT training session 1
GWT training session 1SNEHAL MASNE
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Previewvaluebound
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)Chiew Carol
 
Andy Bosch - JavaServer Faces in the cloud
Andy Bosch -  JavaServer Faces in the cloudAndy Bosch -  JavaServer Faces in the cloud
Andy Bosch - JavaServer Faces in the cloudAndy Bosch
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorialMohammed Fazuluddin
 

Ähnlich wie slides.pptx (20)

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdf
 
React js
React jsReact js
React js
 
Learn reactjs, how to code with example and general understanding thinkwik
Learn reactjs, how to code with example and general understanding   thinkwikLearn reactjs, how to code with example and general understanding   thinkwik
Learn reactjs, how to code with example and general understanding thinkwik
 
React JS .NET
React JS .NETReact JS .NET
React JS .NET
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular Developer
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
20171108 PDN HOL React Basics
20171108 PDN HOL React Basics20171108 PDN HOL React Basics
20171108 PDN HOL React Basics
 
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSGDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJS
 
learning react
learning reactlearning react
learning react
 
GWT training session 1
GWT training session 1GWT training session 1
GWT training session 1
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
Andy Bosch - JavaServer Faces in the cloud
Andy Bosch -  JavaServer Faces in the cloudAndy Bosch -  JavaServer Faces in the cloud
Andy Bosch - JavaServer Faces in the cloud
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 

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
  • 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
  • 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.
  • 23. Exercise: Add style to a React component
  • 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
  • 34. © Copyright Microsoft Corporation. All rights reserved.

Hinweis der Redaktion

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