Scribd
Upload
58 views47 pages

React

This document provides an overview of the DOTNETMASTERY course for .NET developers. It discusses what React is, the tools needed for the course including Visual Studio Code, Node JS, and SQL Server Management Studio. It outlines the sections that will be covered including React fundamentals, TypeScript, Redux Toolkit, routing, Axios, Stripe payments, authentication, and file management. It also lists the 9 projects that will be built in the course and provides an example of one assignment.

Uploaded by

r.jegansaro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
58 views47 pages

React

This document provides an overview of the DOTNETMASTERY course for .NET developers. It discusses what React is, the tools needed for the course including Visual Studio Code, Node JS, and SQL Server Management Studio. It outlines the sections that will be covered including React fundamentals, TypeScript, Redux Toolkit, routing, Axios, Stripe payments, authentication, and file management. It also lists the 9 projects that will be built in the course and provides an example of one assignment.

Uploaded by

r.jegansaro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 47

DOTNETMASTERY

The ultimate learning recourse for .NET developers.


What is this course about?
Why this course?
4
My learning curve!
NOT! Your Journey
Your Journey!
.NET

JAVA

8
Best Practices

Real World Examples 9


9 Projects 25 Assignments
11
12
DOTNETMASTERY
The ultimate learning recourse for .NET developers.
What is React?
What is React?
Create React App
What is React?

• React is Front End Javascript Framework

• React is Declarative

• React is Composable / Component based

• React is FAST!

• Maintained by META

• React is responsible for maintaining/managing the UI Aspect.

17
Tools Needed

• Visual Studio Code

• Node JS

• Visual Studio 2022

• SQL Server Management Studio

• Azure Subscription

18
Visual Studio Code Extensions
How to get Help?
Section 2
Section 3
Section 4
Section 5
Section 6
Section 7
Section 2
Section 2
Start json-server
npx json-server --watch data/traveldb.json --port 5001
Section 2
Class vs Functional Components
Class Components Functional Components

• Less common • More common


• render() method is required, which returns • render() method is not present, it directly
an HTML element returns HTML element or nothing.
• Stateful components • Stateless components
• Class components have lifecycle methods • Class components do have lifecycle
methods
• Hooks!
JSX Components
• Component Names must be Pascal Casing

• Props must be camel casing

• Inline style is an object so it must be enclosed in double curly brackets

• Integer in props will go in {} and “” will be string , and bool goes in {}

• ‘class’ needs to be replaced with ‘className’


RTK Query
• Queries – used to fetch data (Get/GetALL)

• Mutation – used to update data (Create/Update/Delete)


Reviews

[email protected]
Feedback

[email protected]
Bonus Content
My code doesn’t work! Code works, but I am confused

• Google it! • Google it!

• Check Q&A Section • Message me on udemy!

• POST a queston (with Git branch)

37
My code doesn’t work! Code works, but I am confused

• Google it! • Google it!

• Check Q&A Section • Message me on udemy!

• POST a queston (with Git branch)

38
Prerequisites

• Basic programming experience

• HTML / CSS / JS Familiarity

• .NET API CRUD Operations (.NET Core & EF Core)


Reviews
Azure Deployment
Project Resources
JSX
Projects Built
1. TaskOPedia -

2. CountOPedia

3. ContactOPedia

4. LifeCyclOPedia

5. WatchOPedia

6. RouteOPedia

7. ReduxOPedia

8. TravelOPedia

9. Red Mango
44
What we will learn
1. React Fundamentals

2. TypeScript

3. Redux Toolkit & RTK Query

4. Routing in Redux

5. Axios

6. Stripe Payment in React

7. Authentication and Authorization in React

8. File Management in React

45
Assignment 7 – CountOPedia Setup

1. Remove all files other than index.html, index.js and react Image

2. Move react image to src/images folder. (Create images folder)

3. Clean index.js and index.html (Remove anything that is not used)

4. Add Bootstrap js/css CDN inside index.html

5. Create 2 components (Design to look as shown in image)

• Header.jsx (Functional Component)

• Counter.jsx (Class Component)

6. Copy the images provided in course snippet section 4 to the images folder
Class Component Lifecycle Methods

1. ComponentDidMount
• Runs after the component has been rendered to DOM

2. ComponentDidUpdate
• Runs after a component is updated.

• It is not executed when component is rendered for the first time.

3. ComponentWillUnmount
• Runs after a component is unmounted.

• Ideally used for cleanup operations

You might also like