Scribd
Upload
11 views25 pages

1st Week Presentation Node JS

Uploaded by

huzaifa.hanif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views25 pages

1st Week Presentation Node JS

Uploaded by

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

ReactJS

Internship
● HUSSAIN TARIQ

BY
PRESENTED
● SHAYAN TAHIR
What is React?
• React is a free and open-source front-
end JavaScript library for building user
interfaces based on UI components.
React Component-
Based-Architecture

● Build encapsulated components that manage


their own state, then compose them to make
complex UIs.
● Components come in two types, Class
components and Function components
React Function based
component

● We can create a functional component to


React by writing a JavaScript function. These
functions may or may not receive data as
parameters.
● We can create a React function based
component by just typing (rfc) if we’re using ES7
React snippets extension in VS Code.
CLIs for React-app
● npm install create-react-app my-app
● npx create-react-app my-app
● npm run start
● npm install react-router-dom
● npm cls
● npm i react-infinite-scroll-component
● npm I react-top-loading-bar
JSX
• JSX allows us to
write HTML
elements in
JavaScript and
place them in the
DOM without any
createElement()
and/or
appendChild()
methods. JSX
converts HTML
tags into react
elements.
Props and PropTypes

1. Props stands for properties

2. Props are arguments passed into React


components.

3. Props are passed to components via HTML


attributes.

4. PropTypes are simply a mechanism that


ensures that the passed value is of the
correct datatype.
Snapshots

Props PropTypes
My 1st Project in React –
TextUtils app

Functionalities

● Dark Mode Theme

● Convert Text to Upper case

● Convert Text to Lower case

● Capitalize Text

● Clear Text

● Text Summary

● Text Preview
TextUtils UI – Light Theme
TextUtils UI – Dark Theme
React Router

● Create React App doesn't include page routing.


● React Router helps us organize our applications
based on (nested) URLs.
● React router doesn't handle data-fetching, we
have to use props or other classical React data
fetching mechanism to handle data fetching.
React router syntax (V6.4.2)
React Hooks
useState
● The React useState Hook allows us to track
state in a function component.
useEffect
● The useEffect Hook allows you to perform
side effects in your components.
useContext
● The useContext Hook can be used together
with the useState Hook to share state
between deeply nested components more
easily than with useState alone.
React Component Lifecycle
My 2nd Project in React –
NewsPanda app

Functionalities
● Fetching international news through API
● Different categories of news available that can
be accessed by one click.
● Pagination
● Every news author, news published time, news
description and direct link to news available.
● Sticky Navbar
● Infinite Scroll
Creating a project using
Class Based Components

Writing rcc in
App.js gives the
format of class
based
components
Difference between
function based and class
based.

Using this.
We can directly
run variables and
props and states
this.states.
this.props.
this.c
Using props in class based
Using states in class based

When we want
to change
variable without
loading page
we use states
Using Fetch API in react to
populate news item.

Using async componentDidMount


to fetch news from news API.
Infinite scroll in
News App

With the usage


infinite scroll
function we can
scroll page up
to end results

You might also like