React Navigation/Routing
1
Routing
Routing is the process of determining which content or view to display when a user accesses a
specific URL or interacts with links in a web application. It helps map URLs to specific actions or
views, allowing users to access different website sections. Developers often use routing
mechanisms provided by web frameworks to define routes and associate them with views. For
example, in a single-page application, entering a URL like "https://localhost.com/about" triggers the
routing system to display the "About Us" page without requesting a new HTML page from the
server.on in React 16.8.
2
Navigation
Navigation in React refers to users' movement within a website or web app by interacting
with links, buttons, and interactive elements. Its purpose is to facilitate user exploration,
content access, and actions. Implementation involves using various UI elements like
menus, links, and tabs tied to specific routes or views.
3
react-router-dom
React Router DOM is a popular library for handling routing and navigation in React applications. It is
an extension of React Router, specifically designed for web applications using the Document
Object Model (DOM). The React Router DOM is a powerful tool for managing client-side routing in
React applications, making it easy to create dynamic and responsive web interfaces.
Since create react app doesn’t include page routing, react router is the most popular solution.
4
Add React Router
To add React Router in your application, run this in the terminal from the root directory of
the application:
npm i react-router-dom
This command will install the latest version of react router dom to your root directory
which is the v6 version.
5
Assignment: https://www.npmjs.com/
React Carouse
FrameMotio
React Toastif
React dropzon
React datepicke
React spinners
6
7
8
9
10
11
Folder Structure
To create an application with multiple page routes, let's first start with the file structure.
Within the src folder, we'll create a folder named pages with several files:
src\pages\
Layout.js
Home.js
Blogs.js
Contact.js
NoPage.jsx
12
Example
To create an application with multiple page routes, let's first start with thNow we will use our Router in our index.js
file.e file structure.
13
Example Explained
We wrap our content first with <BrowserRouter>.
Then we define our <Routes>. An application can have multiple <Routes>. Our basic example only uses one.
<Route>s can be nested. The first <Route> has a path of / and renders the Layout component.
The nested <Route>s inherit and add to the parent route. So the blogs path is combined with the parent and
becomes /blogs.
The Home component route does not have a path but has an index attribute. That specifies this route as the
default route for the parent route, which is /.
Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.
14
Pages/Components
The Layout component has <Outlet> and <Link> elements.
The <Outlet> renders the current route selected.
<Link> is used to set the URL and keep track of browsing history.
Anytime we link to an internal path, we will use <Link> instead of <a href="">.
The "layout route" is a shared component that inserts common content on all pages, such as a
navigation menu
15
Example Explained
Layout.jsx
16
Example Explained
Home.jsx
17
Working with APIs
18
What is an API?
API is the acronym for Application Programming Interface, which is a software intermediary that allows two
applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the
weather on your phone, you’re using an API.
What an API Also Provides Is a Layer of Security
Your phone’s data is never fully exposed to the server, and likewise the server is never fully exposed to your phone.
Instead, each communicates with small packets of data, sharing only that which is necessary—like ordering
takeout. You tell the restaurant what you would like to eat, they tell you what they need in return and then, in the
end, you get your meal.
19
Types of APIs
There are many different types of APIs and ways to categorize them. For instance, you can categorize APIs by who
has access to them. This organizational framework includes
Private APIs are used within a single organization to connect different software pieces. They aren't accessible
to outsiders. For example, a social media app might have private APIs for login, feeds, and user communication
Public APIs are open to outsiders, allowing them to use an organization's data or services in their own apps.
Some are free, while others are paid. An e-commerce app might use a public payment API like Paystack for
handling payments
Partner APIs are for collaborations between companies. They're not public and require special authorization
for use.
20
Types of APIs
You can also categorize APIs according to their architectural style, of which there are many. We will focus on just
two types here. More are detailed in your class notes
REST: This is the most popular API architecture for transferring data over the internet. In a RESTful context,
resources are accessible via endpoints, and operations are performed on those resources with standard
HTTP methods such as GET, POST, PUT, and DELETE
SOAP: which stands for Simple Object Access Protocol, uses XML to transfer highly structured messages
between a client and server. SOAP is often used in enterprise environments or legacy systems, and while it
includes advanced security features, it can be slower than other API architectures.
21
Free Sample APIs
https://jsonplaceholder.typicode.com/
https://fakestoreapi.com/
https://serpapi.com/
https://www.coingecko.com/en/api
https://api.nasa.gov/
22
HTTP Status Codes
HTTP status codes are three-digit numbers returned by a web server in response to a client's request made to the
server. These status codes provide information about the outcome of the request and help both the client and
server understand how to proceed. They are divided into five classes, each with a specific range of codes
1xx - Informationa
2xx - Succes
3xx - Redirectio
4xx - Client Error
5xx - Server Error
These status codes are crucial for understanding the result of web requests and diagnosing issues in web
applications.
23
Deploying your
ReactJS application
24
HTTP Status Codes
Using free hosting platform:
Netlify: https://app.netlify.com/
Github Pages: https://pages.github.com
Using paid hosting platform:
Globalhosting247: https://globalhosting247.com/
25
Deploying to Netlify
After creating a build folder using: npm run buil
Goto the netlify platform and logi
Got to site
Click on “add new site
Click on “Deploy manually
Click on “browse to upload
Navigate to where your dist or build folder is and select i
Got to “Site overview” to check out your site
26
27
28
29
30
31
32
33
34
Deploying to Globalhosting247
After creating a build folder using: npm run buil
Goto the hosting platform and logi
Look for 'Login to cPanel
Goto File Manage
Open public_htm
Delete all the files ther
Tap on 'Upload' at the top bar are
Drop the zip folder ther
When it's done, right click on the folder: extract>extract file
Open the new extracted build folder, click on 'select all' at the top bar are
Click on 'move' at the top bar are
Change the move location to the /public_html/ and tap on 'move files
Go back to home and Open public_html, and you'll find your files there
35
36
37
38
39
40
CONGRATULATIONS
You have Completed the
Frontend Web Development course (HTML, CSS, Javascript, ReactJS).
