Scribd
Upload
46 views

React Fundamentals Part 2

Uploaded by

Ahmed Yassin
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

React Fundamentals Part 2

Uploaded by

Ahmed Yassin
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

© 2018, Udacity. All rights reserved.

Front End Web Development Advanced Track

© Udacity. All rights reserved.


© Udacity. All rights reserved.
Udacity Connect
Session #2

© Udacity. All rights reserved.


Agenda
❏ React Component Lifecycle.
❏ React Routing.
❏ My Reads APP Project.
❏ Q&A.

© Udacity. All rights reserved.


COMPONENT
LIFECYCLE
WHAT IS THE COMPONENT LIFECYCLE

You can think of React lifecycle methods as the series of events


that happen from the birth of a React component to its death.
Every component in React goes through a lifecycle of events. I
like to think of them as going through a cycle of birth, growth,
and death.

Source:
LIFECYCLE EVENTS

Mounting
Birth of your component

Update
Growth of your
component

Unmount
Death of your component
LIFECYCLE DIAGRAM

Source: projects.wojtekmaj.pl
RENDERING VS MOUNTING

Before we get any further you might be asking yourself what is


mounting anyway? You might compare it to rendering the component
and got confused, so let's clear that out!

RENDERING MOUNTING
Any time a component render "Mounting" is when React
method gets called which in turn "renders" the component for the
returns a set of instructions for first time and builds the initial
creating DOM. DOM from those instructions.

Source: reacttraining.com
componentDidMount

componentDidMount is called as soon as the component is


mounted and ready. This is a good place to initiate API calls,
for example in your next project you will use it to fetch the
books from the Udacity API, which means that this call will
only be made ONCE, so you will have to handle API rejections
yourself!

Source:
componentDidUpdate

Unlike componentDidMount, componentDidUpdate is invoked


as soon as an update to the component happens. Meaning it
runs EVERY TIME there’s an update.
The most common use case for the componentDidUpdate()
method is updating the DOM in response to prop or state
changes.

Source:
componentWillUnmount

As the name suggests this lifecycle method is called just before


the component is unmounted and destroyed. This component
will never be re-rendered and because of that we cannot call
setState() during this lifecycle method.

Source:
HOOKS &LifeCycle

Since late 2018, functional components became the prefered


way of making React components, and with that Hooks
entered the scene making the process of invoking lifecycle
methods much more streamlined and straightforward, we will
not be covering hooks in this session but you are welcome to
read about them.
REACT ROUTER
WHAT IS REACT ROUTER?

React is a Single Page Application.React Router is a popular


declarative way of managing routes in React applications. It
takes away all of the stress that comes with manually setting
routes for all of the pages and screens in your React
application. With the React router, we can decide what view
should be visible when we enter the specified URL.
STEPS TO USE IT
Route
Define your routes in your
parent component using Route

Link
Define your navigation logic
using Link

BrowserRouter
Enclose your parent
component with
BrowserRouter
Extra Resources
&Topics
❏ Using the Effect Hook.
❏ Rules of Hooks.
❏ Building Your Own Hooks.
❏ Hooks API Reference.
❏ How to Force Re-render With Hooks in React
❏ Imperative vs Declarative Programming.
❏ The philosophy of React: Declarative rendering

© Udacity. All rights reserved.


Extra Resources
&Topics
❏ Client-Side vs. Server-Side JavaScript Rendering: Which Is
Better for SEO?
❏ How to implement server-side rendering in your React ap
p in three simple steps

© Udacity. All rights reserved.


REACT PROJECT
LIVE DEMO
Session 5 Q&As

© Udacity. All rights reserved.


© Udacity. All rights reserved.

You might also like