See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/376450883
React.JS for beginners
Presentation · December 2023
DOI: 10.13140/RG.2.2.16772.71041
CITATIONS READS
0 7,267
1 author:
Vladyslav Hrabovyii
Donetsk University
1 PUBLICATION 0 CITATIONS
SEE PROFILE
All content following this page was uploaded by Vladyslav Hrabovyii on 12 December 2023.
The user has requested enhancement of the downloaded file.
R E AC T. J S F O R B E G I N N E R S
Prepared by Vladyslav Hrabovyii
I N T R O D U C T I O N T O R E AC T. J S
o React.js is a popular JavaScript library for
building user interfaces. It's maintained by
Facebook and a community of individual
developers. React allows developers to create
large web applications that can change data,
without reloading the page.
PREREQUISITES & SETUP
o To start with React.js, you need a basic
understanding of HTML, CSS, and JavaScript.
Familiarity with ES6 features like classes, arrow
functions, and destructuring is also beneficial.
Setting up a React environment typically
involves Node.js and npm (node package
manager).
U N D E R S TA N D I N G J S X
o JSX (JavaScript XML) looks like HTML and is
used in React to describe the UI. It's a syntax
extension for JavaScript and allows you to
write HTML elements in JavaScript and place
them in the DOM without any createElement()
and/or appendChild() methods.
C O M P O N E N T S I N R E AC T
o Components are the building blocks of any
React application. There are two types of
components in React - Class components and
Functional components. Class components
are ES6 classes that extend from
React.Component and can hold state and
lifecycle methods.
FUNCTIONAL COMPONENTS &
HOOKS
o Functional components are JavaScript
functions. They accept a single 'props' object
argument with data and return a React
element. React Hooks, introduced in version
16.8, allow functional components to have
state and other React features.
S TAT E A N D P R O P S
o State is an object that holds some information
that may change over the lifetime of the
component. It is managed within the
component (similar to variables declared
within a function). Props (short for
'properties') are read-only components. They
are an object that stores the value of
attributes of a tag and work similar to HTML
VIRTUAL DOM EXPLAINED
o The Virtual DOM (VDOM) is a programming
concept where an ideal, or "virtual",
representation of a UI is kept in memory and
synced with the "real" DOM by a library such
as ReactDOM. This process is known as
reconciliation.
HANDLING EVENTS
o Event handling in React is very similar to
handling events on DOM elements. However,
there are some syntactic differences: React
events are named using camelCase, rather
than lowercase. With JSX, you pass a function
as the event handler, rather than a string.
R E AC T R O U T E R
o React Router is the standard routing library
for React. It enables the navigation among
views of various components in a React
Application, allows changing the browser URL,
and keeps UI in sync with the URL.
L E A R N I N G PAT H & R E S O U RC E S
o To effectively learn React.js, practice by
building small projects like a to-do list, a blog,
or a weather app. Join the React community
for support and keep up with the latest
updates. Remember, practice and patience
are key in learning any new technology.
View publication stats
