Scribd
Upload
253 views

Learn React in Easy Way Nova Designs

Uploaded by

juniorcarlito92
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
253 views

Learn React in Easy Way Nova Designs

Uploaded by

juniorcarlito92
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/ 13

@NOVADESIGNS

@NOVADESIGNS

A popular JavaScript library for building user interfaces with


a focus on reusable components, allowing developers to create
complex UIs from simple, isolated pieces of code.

NOVADESIGNS
CREATE A
REACT APP

The command npx create-react-app appname is a tool that sets


up a new React project with a default configuration.
NODE
MODULES
events

encryption
HTTP

Node modules are libraries or packages of reusable code in


JavaScript that can be included in a Node.js project to
provide specific functionality or features.
PUBLIC
FOLDER
this is where you store static assets like images, fonts, and HTML files that
are directly accessible to the client without any server-side processing.

defines metadata and settings instructs search engines on which is an icon that appears in
for a web application, such as parts of a website they are allowed the browser tab or bookmark
its name, icons, and start URL. or disallowed to crawl and index. bar, representing a website.
SOURCE
FOLDER
this is where you store the source code of your application, including JavaScript,
CSS, and other files that are processed and bundled for the final build.

index.js App.js App.css


it is connected to the main HTML used for building and used for designin
file to render the App.js organizing the app's UI. the app's UI.

index.css app.test.js reportWebVitals.js

used for designin is a file where you write used to measure and report
the index's UI. tests to check components the performance metrics of
your web application
is a syntax extension for JavaScript that allows you to write HTML-like code directly
within JavaScript, making it easier to create and manage user interfaces in React.

Use curly braces for embedding


JavaScript expressions
FUNCTIONAL
COMPONENT
is a simple way to create components in React using a JavaScript
function, which returns JSX to define what the UI should look like.

Function Name:
Function Definition:
A JavaScript function The name of the function, which
that defines the should start with an uppercase
component. letter and represents the
component.

Return Statement:
where JSX is returned
to render the
component's UI.
Export Default:

component is usually exported


so it can be imported and used
in other parts of the
application.
PROPS
allowing you to customize and configure
how the component behaves and appears.

(see the next slide)


we imported two card
component in app.js

for example, we have here a


functional component called Card. and then write the
property we want that
card to have.

and then write props in the parenthesis


of the function and get the props.
SPREAD
OPERATOR
The spread operator (...) in JavaScript allows you to expand or
spread elements from an iterable (like an array) into individual
elements, or to spread properties from an object into another
object.

Arrays: Objects:

In React, the spread operator is often used to pass props to components:


USESTATE
useState is a tool in React that lets you add and manage state in a functional component. It
allows you to create a variable that can change over time and a function to update that variable.

Current State Update the State Current Value of State

0 0
1
Current State Current State
TERNARY
OPERATOR
The ternary operator is a shorthand way to write
simple if-else statements in JavaScript.

This is an expression
Executed when the Executed when the
that evaluates to true
condtion is true. condtion is false.
or false.
MORE INFO
SUBSCRIBE TO NOVA DESIGNS FOR MORE INFO

REACT ROADMAP: REACT PROJECTS:

https://roadmap.sh/react JavaScript Mastery (YT)

You might also like