Jitendra Choudhary
Posted on Jul 29 • Updated on Jul 31
385 9 7 14 18
Every React Concept Explained in 5
Minutes
#react #webdev #javascript #codenewbie
React is a JavaScript library that allows you to develop front-end code in
minutes. It has pre-built methods and functions to perform certain tasks. React
as a library includes complex terms like reconciliation, state, props, etc. What
do they actually mean?
In this article, you will learn about this exaggerated concept more simply.
1. Components
Components are small bit of reusable code that return a React element to be
rendered on a webpage. It is a group of code that make up a single part of the
webpage like buttons, navbar, cards, etc. It is just like a JavaScript function but
returns a rendered element. It accepts parameters called "Props". Components
are named with capital case.
Example Of Functional Component
function Heading(props) {
return <h1>Join us, {props.name}!</h1>;
;
}
Note:
Functional Components are recommended instead of Class based.
Functional components are often called stateless components.
2. JSX
JSX is JavaScript XML, which allows us to write HTML in React. It introduces
XML-like tags and attributes to create React elements. It makes it easy to create
React Components by letting you write HTML-like code in .jsx files. Instead of
using complicated JavaScript, JSX makes the code readable and clean. React
DOM uses camelCase for attribute naming such as htmlFor, onClick .
Example of JSX
<h1 className="head">This is H1!</h1>
>
Now, TSX is a file extension for TypeScript files that contains JSX syntax. With
TSX you can write type-checked code with the existing JSX syntax. TypeScript is
not a different language, it is just a superset of JavaScript that adds optional
static typing.
More simply, with TSX files you can write React components using TypeScript
and JSX together.
Example of TSX
interface AgeProps {
age: number;
}
const GreetAge = (props: AgeProps) => {
return (
<div>
Hello, you are {props.age} old.
</div>
>
);
};
Note:
JSX files uses a `.jsx` file extension.
TSX files uses a `.tsx` file extension.
TypeScript's type system helps catch potential errors early in development.
3. Fragments
Fragments in React allows you to return multiple elements from a component.
It groups the list of elements without creating a extra DOM nodes. It cleans all
the extra divs from the DOM. This quickly renders the UI.
Example of Fragments
const App = () => {
return (
<>
<h1>Eat</h1>
>
<button>Learn more</button>
>
<p>Code is Fun</p>
>
<button>Repeat</button>
>
</>
>
);
}
Note:
Fragments makes the code cleaner and readable.
It are memory efficient.
It cannot have CSS styles.
4. Props
"Props" is a special keyword in React that stands for properties. It is used to
transfer data between components. The follow of data transfer is uni-
directional i.e from parent component to child component.
Example of Props
function Head(props) {
return <p>{props.children}</p>;
;
}
Note: Props is read-only, which ensures that child components don't
manipulate the value coming from parent component.
5. State
Components need to keep track of certain values when user interacts. Let's say
the light/dark mode theme toggle button changes its value(from light to dark
& vice versa) when a user clicks on the button. Components need to remember
the current value of theme. In React, this kind of component-specific memory is
called state.
State is defined using a useState() hook; more on that later.
Example of defining state
const [index, setIndex] = useState(0)
Note: It's always a good practice to define state in a top-level component to
share it easily with other child components and ensure a single source of truth.
6. Lifecycle Methods
Lifecycle methods are special functions you can use within React classes to
perform actions at various stages of a component's existence. These stages are:
Mounting: When a component is first created and inserted into the DOM.
Updating: When a component's props or state change, causing the
component to re-render.
Unmounting: When a component is removed from the DOM.
7. Purity
Purity in functional programming is when a given same input returns the same
output. The inputs is the only factor that determine the output then the
function is said to be pure.
In React a component is said to be pure when it returns the same output for
the same input (viz props)
8. Strict Mode
Strict Mode is a developmental feature in react that enables extra safety
features to improve code quality. It shows warnings regarding potential errors
and bugs into the code. It logs warning into the browser's console.
Example of Strict Mode
import { StrictMode } from 'react';
function App() {
return (
<>
<StrictMode>
<Header />
<Sidebar />
<Content />
<Footer />
</StrictMode>
>
</>
>
)
}
Strict Mode in React Showing Browser Console
9. Hooks
Hooks in React allows to use state and other React features without writing
class components. Hooks are functions that provide access to React's state
management, side effects, and other features.
Some commonly used hooks: useState , useMemo , useRef , etc.
Example of Hooks
import React, { useState } from "react"; // Importing useState hook;
function FavoriteColor() {
const [color, setColor] = useState("red"); // Initializing the state and
return (
<>
<h1>My favorite color is {color}!</h1>
>
<button
type="button"
onClick={() => setColor("blue")} // Updating the state;
>Blue</button>
>
<button
type="button"
onClick={() => setColor("red")} // Updating the state;
>Red</button>
>
<button
type="button"
onClick={() => setColor("yellow")} // Updating the state;
>Yellow</button>
>
</>
>
);
}
Note:
Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional.
10. Context API
The Context API is used to share data like state, functions across the
component tree without passing props down manually at every level. It avoids
prop drilling by simplifying state management and sharing data across the
component. With Context API the data is shared directly with the child
component who will consume it.
The createContext() method is used to create a context. This function returns a
context object with two components – a Provider and a Consumer .
The Provider is used to wrap the part of your component tree where you want
the context to be available. It accepts a compulsory value prop that holds the
data you want to share across other components.
The useContext hook is used to access the data.
Example of Context API
Create a context using createContext() method. Wrap child components in the
Context Provider and supply the state value.
import { useState, createContext} from "react";
const UserContext = createContext();
function ParentCounter() {
const [count, setCount] = useState(10);
return (
<UserContext.Provider value={count}>
<h1>{`Current Count: ${count}!`}</h1>
>
<Button />
</UserContext.Provider>
>
);
}
Use useContext hook to access the value of age.
import { useContext } from "react";
function GrandChildConsumer() {
const count = useContext(UserContext);
return (
<>
<h1>This is GrandChildConsumer</h1>
>
<h2>{`Current Count: ${count}`}</h2>>
</>
>
);
}
Note: The `useContext` hook is often used instead of Consumer for better
readability and simplicity.
11. Lists and Keys
A Key is a special kind of attribute for list items in React. It acts as a unique
identifier for each items when it is updated, deleted, or added.
Assigning index of the item as the Key is discouraged because if the items are
rearranged it will affect the expected behavior.
Imagine in shopping cart you have 10 items added and each item have a
unique index as a Key . Now, you decide to remove the first and fifth item from
the cart. When the items are removed the indexing will change; the second
item will become first and sixth item will become fifth item.
Example of Lists and Keys
const fruits = ["apple", "banana", "orange"];
function FruitList() {
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}> {fruit} </li>
>
))}
</ul>
>
);
}
Note:
It is recommended to use string as a `Key` that uniquely identifies the item in
the list.
Third-party libraries like UUID offer the functionality to create unique keys.
12. Form: Controlled & Uncontrolled
Components
React forms allows to collect and manage user input better than traditional
HTML form. These forms are built using components and store the user inputs
into state. There are two types of components:
Controlled Components
In Controlled components, the form's state is managed by the component
himself. This is the recommended approach for managing form data in React.
When the user interacts with the form (e.g., typing in an input field), the
component's state is updated to reflect the changes.
Example of Controlled Component
function ControlledInput() {
const [name, setName] = useState('');
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<label htmlFor="name">Name: </label>
>
<input type="text" id="name" value={name} onChange={handleChange} />
>
<p>Your name is: {name}</p>
>
</div>
>
);
}
Uncontrolled Components
Uncontrolled components rely on the DOM to manage the form data. The
component doesn't directly control the form's state, but it can access the values
using DOM methods like ref.
Example of Uncontrolled Component
function UncontrolledInput() {
const nameRef = useRef(null);
const handleClick = () => {
console.log(nameRef.current.value);
}
return (
<div>
<label htmlFor="name">Name: </label>
>
<input type="text" id="name" ref={nameRef} />
>
<button onClick={handleClick}>Get Name</button>
>
</div>
>
);
}
Note:
Controlled components provides form validation because the user's input is
instantly reflected due to use of state.
Form validation is not possible in uncontrolled components because the
user's input can only be accessed after the form is submitted.
13. React Router
Introduction to React Router for navigation
Basic setup and usage
Example: Creating routes and navigating between pages
React Router is a standard library for routing in React. It enables navigation
among various components in the React app. It allows changing the browser
URL and syncing the UI with the URL. React Router is important for creating
single-page applications (SPA) with navigation features.
First, you need to install React Router from your terminal.
Installing React Router
# If you are using npm
npm install react-router-dom
# If you are using yarn
yarn add react-router-dom
Example of React Router
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
>
<Route path="about" element={<About />} />
>
<Route path="contact" element={<Contact />} />
>
<Route path="*" element={<NoPage />} />
>
</Routes>
>
</BrowserRouter>
>
);
}
First wrap your content into the <BrowserRouter> . Then we define <Routes> and
inside that introduces the <Route> for navigation. <Route> has path which
specifies URL of the page and element attribute which specifies the component
that needs to be rendered on the defined path.
Note:
An app can have multiple < Routes >.
< Route > can be nested.
`react-router-dom` also has < Link > and < Outlet > Component for
navigation.
Conclusion
The best way to learn any programming language is to practice more projects.
Build small projects and experiment with the concepts.
If you find this post helpful don't forget to keep showing me love. Until next
time like, share, and learn.
You can also stay connected with me by following me here and on X, GitHub,
and LinkedIn.
👋 Before you go
Do your career a favor. Join DEV. (The website you're on right now)
It takes one minute and is worth it for your career.
Get started
Top comments (44)
Peter Galiba • Jul 30
Fragments can have keys.
Jitendra Choudhary • Jul 30
Your are absolutely right,
I appreciate you bringing this up.
Andrey Sharypov • Jul 30
Is there some feeling of the GPT generation? 😁
Jitendra Choudhary • Jul 31
You decide and let me know.😇 For real
velu-murugesan • Aug 2 • Edited on Aug 2
I have some knowledge in react and node how can I get a entry
level job as a fresher
Jitendra Choudhary • Aug 2
Let's be honest, it's impossible to guarantee a job.
To maximize the chances of getting a job, you can:
Gain practical experience by building projects; you can
checkout @bigsondev blog on webdev.
Try Open Source
Intern at a local tech company.
Reach out to potential employers.
Engage in extensive networking to connect with as many
people as possible for job opportunities.
Justin3go • Jul 31
Thank you, for someone like me who doesn't use React often, I
reviewed a lot of knowledge
Jitendra Choudhary • Jul 31
Thank you for your love. I hope I am fulfilling my goal of technical
writing.
Afaz Khatri • Jul 30
Great article.
I find the content on the useContext example to be inaccurate. Can
you please update it?
Jitendra Choudhary • Jul 30
Thanks for pointing out the inaccuracy in the useContext example.
I have updated the explanation and corrected the errors in the code
snippet.
Shravan G.T • Jul 30
Next do for angular pls
Joao Polo • Aug 2
for angular it's required 5^5 minutes
Jitendra Choudhary • Aug 2
true, lol
Jitendra Choudhary • Jul 31
sshhh. It's in the queue.
Joao Polo • Aug 2
Awesome. Clear. Fast. Congrats!
Jitendra Choudhary • Aug 2
Glad you find this explanation helpful
Leonardo Beron • Aug 2
Thanks guy.
Jitendra Choudhary • Aug 2 • Edited on Aug 2
Thanks for reading
Rowland • Aug 1
Very nice and succinct. It captures the fundamental concepts in using
react. One thing I'll suggest is the implementation of react router v6
Jitendra Choudhary • Aug 2
Hi Rowland, I'm glad you found the article helpful.
I didn't include the React Router v6 features because I felt it would
be beyond the scope of the article. However, I did mention , which
enables client-side rendering. I'll do my best to include react-router
v6
chovy • Jul 31
This is awesome. I wish you'd write one for react native.
Jitendra Choudhary • Jul 31
Thanks you so much!!
A React Native article sounds like a great idea-- l''ll definitely try my
best to write.
Zigah Christian • Jul 31
This is simple and awesome, Big thanks for the Effort.
Jitendra Choudhary • Jul 31
Big thanks for taking the time to read it and for the kind words
WTP | WhatThePortal.com • Jul 30
Do add TSX as the primary variant to JSX - don't want new folks going
down that path unnecessarily!
the folks @ WhatThePortal.com
Jitendra Choudhary • Jul 31 • Edited on Jul 31
Thanks for the suggestion; it improves the content of the article.
I have updated the article.
Vilmos Bartalis • Jul 30 • Edited on Jul 30
Thanks for the intro. That was easy to digest from the pov of a
angular/astro dev.
Jitendra Choudhary • Jul 31
I'm happy to hear you found it easy to understand. Thank you for
bringing a smile to my face.
Chandan • Jul 30
Nicely Explained 👏🏻👍🏻
Jitendra Choudhary • Jul 31
It made my day. Thanks for the read.
Steven Olsen • Jul 30
Review the notes for hooks, they aren't accurate.
Thanks for the article!
Jitendra Choudhary • Jul 31
Thanks, Steven, for your feedback. Can you be more specific about
the inaccuracy?
I would love to correct any errors and update the article
accordingly.
Matthew McKinney • Jul 30
A bit more than 5 min but a good read regardless.
Thank you for sharing.
Jitendra Choudhary • Jul 31
I'm glad you found the article worth the read, even though it took a
bit more than 5 minutes.
LOL!! It's a 5-minute article but due to the intro, conclusion, and
code snippet, it took longer.
View full discussion (44 comments)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.
Code of Conduct • Report abuse
Jitendra Choudhary
Full Stack Developer | Open Source | Technical Writer | Flame University
LOCATION
India
EDUCATION
Freshman @Flame University
PRONOUNS
He/Him
WORK
Open for opportunities
JOINED
Jan 30, 2024
More from Jitendra Choudhary
Learn CSS Positions: with Real Examples
#css #webdev #beginners #codenewbie
Everything You Need to Know About CSS Backgrounds
#webdev #beginners #css #codenewbie
Learn CSS BOX MODEL
#css #webdev #beginners #codenewbie
