Basic React Js
1. React Component
React is a JavaScript library for building user interfaces.
HTML, CSS & JavaScript are about building user interfaces as well.
React makes building complex, interactive and reactive user interfaces
simpler.
React is all about Components because all user interfaces in the end are
made up of components.
Why Components?
Reusability (Don’t repeat yourself), Separation of Concerns ( Don’t do too
many things in one and the same place (function))
A component is build by HTML, CSS, JavaScript.
JSX – JavaScript XML
JSX looks like HTML but is written in JavaScript. It allows you to write
HTML-like syntax within your JavaScript code.
const element = <p title='description'>
React is a JavaScript library for building user interfaces.
</p>
const element = [Link](
"p",
{ title: "description" },
"React is a JavaScript library for building user interfaces."
)
2. Creating A Component In React
Basic React Js 1
import React from "react";
function Hello() {
return <h1>Hello from a component!</h1>
}
export default Hello;
JSX Syntax Rules
Return a Single Parent Element: In JSX, you must return a single root
element.
JSX Expressions: You can use JavaScript expressions inside JSX by
embedding them in curly braces {} .
Attributes in JSX: Attributes in JSX are camelCase, so class in HTML
becomes className in JSX.
Self-Closing Tags: Elements without children can use self-closing tags.
(img, input, br, hr)
Why Self-Closing Tags? ⇒ No Children, Readability, JSX Syntax
Requirement.
import React from "react";
const name = "ksl"
function displayMessage() {
return "Wow!";
}
function Hello() {
// only return one root element
return (
<div>
<h1>Hello from a component! {name} {10 + 20}</h1>
Basic React Js 2
<h1>{displayMessage()}</h1>
</div>
)
}
export default Hello;
3. What are Props In React?
Props (short for properties) are a fundamental concept in React. They are
used to pass data from one component to another, typically from a parent
component to a child component. Props make components reusable and
dynamic by allowing data to be passed and displayed in different ways
depending on the context.
Key Features of Props
Immutable: Props are read-only in the child component, meaning they
cannot be changed once passed. The parent component is responsible for
providing the props, and the child can only use them, not modify them.
Passed from Parent to Child: Props flow one-way from the parent
component down to the child component. Child components cannot pass
data up to their parent directly.
Dynamic Data: Props allow components to be dynamic because they can
accept varying data and render it accordingly.
Reusable Components: Components can be reused by passing different
props to each instance of the component, making your UI more flexible
and easier to maintain.
import Hello from "./components/Hello";
function App() {
return (
<div className="App">
<Hello name="Ksl" message="Hi there!" />
<Hello name="Tom" message="Hello!" />
Basic React Js 3
</div>
);
}
export default App;
function Hello(props) {
return (
<div>
<h1>{[Link]} {[Link]}</h1>
</div>
)
}
export default Hello;
function Hello(props) {
const { name, message } = props;
return (
<div>
<h1>{message} {name}</h1>
</div>
)
}
function Hello({ name, message }) {
return (
<div>
<h1>{message} {name}</h1>
</div>
)
}
export default Hello;
Basic React Js 4
Passing Arrays & Objects To Components Using Props
import Hello from "./components/Hello";
function App() {
const seatNumbers = [1, 4, 7];
return (
<div className="App">
<Hello name="Ksl" message="Hi there!" seatNumbers={seatNumb
ers} />
</div>
);
}
function App() {
const person = {
name: "David",
message: "Hi there!",
seatNumbers: [1, 4, 7]
}
return (
<div className="App">
<Hello person={person} />
</div>
);
}
export default App;
function Hello({ name, message, seatNumbers }) {
return (
<div>
<h1>{message} {name} {seatNumbers} </h1>
</div>
)
Basic React Js 5
}
function Hello({ person }) {
return (
<div>
<h1>{[Link]} {[Link]} {[Link]} </h1
>
</div>
)
}
export default Hello;
Rendering Arrays Or Lists In React
import Fruits from "./components/Fruits";
function App() {
return (
<div className="App">
<Fruits />
</div>
);
}
export default App;
export default function Fruits() {
const fruits = ["Apple", "Mango", "Banana", "Orange", "Pineapple"]
return (
<div>
<ul>
{[Link]((fruit) => (
<li key={fruit}>{fruit}</li>
Basic React Js 6
))}
</ul>
</div>
)
}
Why We Need "Key" in Loops (React Lists)
In React, when you render a list of elements using a loop (such as map() ), each
element must have a unique key attribute. The key is crucial for performance
optimization and correct handling of UI updates by React.
Efficient Reconciliation: React uses the Virtual DOM to compare the
current DOM structure with the updated structure. When React renders a
list of elements, it tries to update or re-render only those elements that
have changed. The key helps React identify which items in the list have
changed, been added, or removed, making this update process more
efficient.
Stable Identity: Keys give each list element a stable identity across re-
renders. This helps React keep track of which items are the same between
renders. Without keys, React has no reliable way to track these changes,
and it may re-render the entire list or update the wrong items.
Avoid using indexes as keys in dynamic lists where elements may be
added, removed, or reordered. Instead, use a unique identifier like an id .
Rendering Array Of Objects In React
export default function Fruits() {
const fruits = [
{ name: "Apple", price: 10 },
{ name: "Mango", price: 4 },
{ name: "Banana", price: 7 },
{ name: "Orange", price: 5 },
{ name: "Pineapple", price: 9 },
];
return (
Basic React Js 7
<div>
<ul>
{[Link]((fruit) => (
<li key={[Link]}>{[Link]} ${[Link]}</li>
))}
</ul>
</div>
)
}
Rendering Components Inside A Loop
export default function Fruit({ name, price }) {
return (
<li>{name} ${price}</li>
)
}
import Fruit from './Fruit';
export default function Fruits() {
const fruits = [
{ name: "Apple", price: 10 },
{ name: "Mango", price: 4 },
{ name: "Banana", price: 7 },
{ name: "Orange", price: 5 },
{ name: "Pineapple", price: 9 },
];
return (
<div>
<ul>
{[Link]((fruit) => (
<Fruit key={[Link]} name={[Link]} price={[Link]} />
))}
Basic React Js 8
</ul>
</div>
)
}
4. Conditionally Rendering JSX & Components
function App() {
return (
<div className="App">
<ConditionalComponent />
</div>
);
}
export default function ConditionalComponent() {
const display = false;
if(display) {
return(
<div>
<h3>This is a conditional component</h3>
</div>
)
} else {
return (
<div>
<h3>Code everyday!</h3>
</div>
)
}
}
export default function ConditionalComponent() {
const display = false;
if(display) {
Basic React Js 9
return <Welcome />
} else {
return <Code />
}
}
function Welcome() {
return(
<div>
<h3>This is a conditional component</h3>
</div>
)
}
function Code() {
return(
<div>
<h3>Code everyday!</h3>
</div>
)
}
Conditional Rendering Using Element Variables
export default function ConditionalComponent() {
let message;
const display = true;
if(display) {
message = <h1>This is message 1</h1>
} else {
message = <h1>This is message 2</h1>
}
return message;
}
Basic React Js 10
Conditional Rendering Using Ternary Operators In React
function Welcome() {
return(
<div>
<h3>This is a conditional component</h3>
</div>
)
}
function Code() {
return(
<div>
<h3>Code everyday!</h3>
</div>
)
}
export default function ConditionalComponent() {
const display = true;
return display ? <Welcome /> : <Code />;
}
Conditionally Rendering List Items
export default function Fruit({ name, price }) {
return (
<>
{price > 5 ? (
<li>{name} ${price}</li>
):(
""
)}
</>
Basic React Js 11
)
}
Conditionally Rendering A Message Using Ternary
export default function Fruit({ name, price, soldout }) {
return (
<>
<li>
{name} ${price} {soldout ? "sold out" : ""}
</li>
</>
)
}
Basic React Js 12