Scribd
Upload
26 views20 pages

React 1

Ghiffujhcfhjughjfididkdjddns oejfhcndmskwoe s Jon wkicjfnesn+kr;f3-rjfjdkeoend nidrnsniebe signs sjeje

Uploaded by

Huzaifa Mirza
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
26 views20 pages

React 1

Ghiffujhcfhjughjfididkdjddns oejfhcndmskwoe s Jon wkicjfnesn+kr;f3-rjfjdkeoend nidrnsniebe signs sjeje

Uploaded by

Huzaifa Mirza
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/ 20

Basics Of React

IRFAN JAVED
M HUZAIFA ALI
TABLE OF CONTENTS

01 03
Introduction What is JSX?

02 04
Installation What are Components and
Props?
01
INTRO TO REACT
INTRODUCTION
React JS is an open-source JavaScript library for
building rich user interfaces. React JS enables
developers to create interactive web applications
that are more responsive and performant than
traditional web development approaches. It uses
a component-based architecture, where each
component can be reused in multiple places
throughout the application, making it easier to
maintain code consistency
02
INSTALLATION
THINGS YOU NEED

NODE AND
NPM VS CODE
You can download You can download
the latest the latest
a version of Node.js a version of Visual
from the official Studio Code from the
website official website
(https://nodejs.org/)
and install it using
the instructions
provided.
SETUP REACT DEVELOPMENT
SERVER
STEP 1 (ONLY ONCE):

STEP 2:
REACT FILE STRUCTURE:
03
WHAT IS JSX?
JSX (JAVASCRIPT XML)
JSX is an extension of JavaScript that lets developers write HTML-like syntax in
their code. This makes it easier to create React components with a clear and simple
structure.

Using JSX helps developers:

Read and understand their code more easily.


Speed up the process of creating UI elements.
Reduce the time needed to find and fix errors compared to using plain JavaScript.
JSX (JAVASCRIPT XML)
03
WHAT ARE COMPONENTS?
COMPONENTS
● React JS Components are the building blocks of any React application. They are
reusable pieces of code that can be combined to create complex user interfaces and
applications, making development faster and more efficient.
● Components allow developers to split UI elements into separate parts, each with its own
logic, state, and markup – making creating UIs a lot easier than when using plain
JavaScript.
● Additionally, components also support powerful features such as props (which let you
pass data from one component to another), lifecycle methods (which define how an
element should behave at different stages of its life cycle), and state management (for
better control over data).
COMPONENTS
COMPONENTS
PROPS / PROPERTIES

Props, short for properties, are a way to pass data from a parent
component to a child component and serve as inputs for each
element’s behavior. They are similar to function arguments and are
used to pass data from the parent component to the child
component.
COMPONENT USING PROPS
PASSING VALUES AS PROPS
TASK

CREATE A REACT COMPONENT THAT


DISPLAYS A CARD OF YOUR FRIENDS
THAT TAKES THE FOLLOWING PROPS
1. NAME
2. ARID NO
3. GPA

USE THIS COMPONENT 5 TIMES IN APP.JSX


THANKS!

CREDITS: This presentation template was created by


Slidesgo, incluiding icons by Flaticon, and
infographics & images by Freepik.

You might also like