Give me 10 mins, and React will finally make sense forever

React is a JavaScript library for building User Interfaces(UI).
Let’s dive right into the concepts.

1. Components

Components are the building blocks of every React app. They make the visible parts of our application, for example, buttons, navigation bars, cards or even entire pages. You can think of it like Lego blocks, which are reusable, stackable and powerful. you can use the components as many times as you want across the codebase.

function App() {
  return (
    <div>
      <Header />
      <p>This is the main section.</p>
    </div>
  );
}

Here, <Header/> looks like an HTML element, but it is a custom component, shows how we can reuse and stitch these pieces together.

But what really is a Component?

Every React component is nothing but a function that returns Markup.
But React doesn’t return HTML; instead, it returns something called as the JSX.

So if you can reuse, you should be ble to export/import the components or functions to be able to use in other component files right? So that’s done in 2 ways :

Default Export/Import

When we want to export only one function, meaning each file can have only one default export. And when we import, we do not need braces {}, and we can rename freely.

### Welcome.js
export default function Welcome() {
  return <h2>Welcome to my Newsletter!</h2>;
}
import Welcome from ‘./Welcome’;
function App() {
return (
<div>
<Welcome />
</div>
);
}

Named Export/Import

You can export multiple functions from one file. Here we need the braces {} while importing, because we can export and import multiple functions.

### No default keyword if you observe properly
export function Welcome() {
return <h2>Welcome to my website!</h2>;
}
export function GoodBye() {
return <h2> Byeee, Hope you enjoyed it!</h2>;
}
import { Welcome, GoodBye } from ‘./Welcome’;
function App() {
return (
<div>
<Welcome />
<GoodBye />
&lt;/div&gt;
);
}

2. What is JSX ?

function Welcome() {
return <h1>Hello, World!</h1>;
}

JSX is like a special syntax that lets you write what looks like HTML directly inside JavaScript.
JSX stands for JavaScript XML. It is optional, but it makes our lives easier. But how?
Under the hood, React uses a compiler called Babel, which converts JSX into JavaScript using React.createElement().

function Welcome() {
return React.createElement(’h1’, null, ‘Hello, World!’);
}

Single line JSX

const jsxHeading = <h1>Welcome, Reader</h1>

Multi Line JSX

If writing JSX in multiple lines, then using ‘()’ parentheses is mandatory. To tell Babel from where JSX is starting and ending.

const jsxHeading = (
<div>
<h1>Welcome, Reader</h1>
</div>
)

But why is the conversion required? Because browsers only understand JavaScript and not JSX. And writing React.createElement() everywhere would not make it a clean code; it would make your code messy and unreadable.

How to use JavaScript code inside JSX?

Inside a React Component ,when “{ }” parenthesis is present, we can write any JavaScript expression inside it.

const isLoggedIn = true;
const HeadingComponent = () => (
<div>
<h1>{isLoggedIn ? “Welcome Back!” : “Please Log In”}</h1>
</div>
);

3. React Fragments

A question to you: Can you return more than one value in a JavaScript function?

No, a JS function can only return one value, but if you want to return more than one value, then you can put the values in a container like an array or an object and return it.
Now let’s connect this idea to a React component. You might want to return more than one Component or HTML element, but the React component would also throw an error because every component must return a single root element.

So, the simplest fix is to wrap everything in a <div> . But we do not want to add another element to the page, so we use an empty component called React Fragment.

function App() {

return (
<>
<Header />
<Main />
</>
);
}

Now, this <> </>React Fragment lets us group multiple elements together while returning.

Now, we saw how more than 2 components are being returned inside another component, now say what if i want to pass a value from one component to another just like how we pass arguments or parameters in functions.

4. Props

In React, components can communicate with each other using props, shortform for properties.

Let’s look at one example:

const MovieCard = (props) => {
return (
<div>
<h2>{props.title}</h2>
<p>Genre: {props.genre}</p>
</div>
);
};
const App = () => (
<div>
<MovieCard title=”Inception” genre=”Sci-Fi, Thriller” />
</div>
);

Passing props to a component

Here, title and genre are props that we are passing down to the MovieCard component.

 <MovieCard title=”Inception” genre=”Sci-Fi, Thriller” />

Receiving props from a Component

Props are wrapped and sent as a JavaScript object.

const MovieCard = (props) => {
return (
<div>
<h2>{props.title}</h2>
<p>Genre: {props.genre}</p>
</div>
);
};

Destructuring Props

another way would be to destructure the props at the function argument level itself.

const MovieCard = ({title, genre}) => {
return (
<div>
<h2>{title}</h2>
<p>Genre: {genre}</p>
</div>
);
};

Good Practises

• While destructuring the props, use optional chaining so that the code doesnt crash incase resData or data is null.

const {genre, title} = resData?.data;

• Dynamic Component Listing
  When we have multiple components that look identical but only differ by the data they display (like multiple movies), instead of hardcoding each <MovieCard /> Individually, we can loop through an array and generate them dynamically.

  ### This is Not Recommended!!!
  <MovieCard title=”Inception” genre=”Sci-Fi, Thriller” />
  <MovieCard title=”Interstellar” genre=”Adventure, Drama” />
  <MovieCard title=”Tenet” genre=”Action, Mystery” />
  

### This is the right way to list dynamically
const movieList = 
{
id: 1,
title: “Inception”,
genre: “Sci-Fi, Thriller”,
},
{
id: 2,
title: “Interstellar”,
genre: “Adventure, Drama”,
},
{
id: 3,
title: “Tenet”,
genre: “Action, Mystery”,
},
;  

### and this is how we loop through to create same component repeatedly but with different data.
const Body = () => {
return (
<div>
{movieList.map((movie) => (
<MovieCard
key={movie.id}

title={movie.title}
genre={movie.genre}
/>
))}
</div>
);
};

Now, you might ask what this key is while looping over the map.

• Why use a unique key in prop?
  React needs a unique identifier (key) for each list item so it can track which components change, add, or remove efficiently during re-renders.
  
  Without keys:
  React can’t tell which specific item changed and may re-render the entire list, wasting performance
  
  With unique keys:
  React matches each rendered component with its corresponding data using the key and updates only what changed.

Important thing here to note is : Never use the array index as a key as the list ordering of data can change anytime, so prefer unique IDs like movie.id or uuid as the key while mapping over.

5. What is Rendering and Re-rendering?

Rendering is turning our code into what we actually see on the screen. But how does it happen?
Like we discussed earlier that the code we write JSX that react components return is converted into JS using Babel, and from here React builds a Virtual DOM.

What is a DOM ?

DOM is the Document Object Model. Its a model that every browsers use to model the HTML tree-like structure onto a webpage.

What is Virtual DOM?

Virtual DOM is a copy of the real DOM; this one lives inside the JS memory and not in the browser.

The complete rendering process in React looks like this :

• If the state of React app changes, it changes and updates the VDOM.
• And then it uses Diffing, to compare the updated VDOM with previous version of VDOM to see what is changed.
• Then, it uses a reconciliation process to update the real DOM with the changes it found.

6. Event Handling

Whenever someone uses our web, there are tons of events that happen, for eg: Clicks, Mouse movements, keyboard events etc.

Some of the most used React built in events are :

<button onClick = {handleClick} /> <input onChange = {handleChange} /> <form onSubmit = {handleSubmit} />

So, when these React events occur, we handle them using event handler functions. For eg, whenever the button is clicked, if i want to say button was clicked then, it goes like this :

function handleClick() {
alert(”Button was clicked!”);
}

7. React States

State helps us manage and store data, meaning state is just like a memory for the component. You might ask, for memory purposes, can we store in variables or any data structure? But we do not want to store the data there because React doesn’t re-render when a variable is updated. But if a state changes, React automatically re-renders the component to show the latest value on the screen.

let count = 0;
function Counter() {
function handleClick() {
count = count + 1;
console.log(count);
}
return (
<div>
<h2>Count: {count}</h2>
<button onClick={handleClick}>Increase</button>
</div>
);
}

In this basic example above, when we click the button, the handleClick() event handler is called and it increases the count, but the catch is that the screen will have 0 always; it won’t update because React DOM dint know that it changed.

So React has some special hooks for this purpose, some of them are:

• useState Hook

  import { useState } from “react”;
  function Counter() {
  const count, setCount = useState(0);
  function handleClick() {
  setCount(count + 1);
  }
  return (
  <div>
  <h2>Count: {count}</h2>
  <button onClick={handleClick}>Increase</button>
  </div>
  );
  }
  

  
  useState0, means 0 is the initial value of the state variable ‘count’ (a special variable) which is tracked by React, and setCount is a function used to update that state variable.
  So when we call setCount(newValue), it updates the state variable and also re-renders the component. So the updated count is seen on the screen.
  

So just like this, React offers multiple hooks, 5 of the most important ones are :

• useEffect Hook
  This hook let’s us run some piece of code automatically when our component first renders or when a certain state/props changes.

We will discuss about hooks in depth in our next article.

8. React Contexts - Context API

It is a powerful way to pass prop data to the app’s components. Most React apps have tons of nested components, which makes it harder for us to manage props. This is also called as prop drilling, because useless props which are not even being used by the children's components are being drilled into them.

for example:

Here, We want to show the user’s favourite movie in the Profile component.
But Profile is inside Navbar, so we have to pass it through even though Navbar doesn’t use it.

function App() {
const favoriteMovie = “Inception”;
return <Navbar favoriteMovie={favoriteMovie} />;
}
function Navbar({ favoriteMovie }) {
return (
<div>
<h3>Movie App</h3>
<Profile favoriteMovie={favoriteMovie} />
</div>
);
}
function Profile({ favoriteMovie }) {
return (
<p>Favorite Movie: {favoriteMovie}</p>
);
}

Context fixes this problem by letting ‘Profile’ directly access the data
without going through ‘Navbar’.

To us the Context, we do these 4 steps :

1. Create the Context

   import { createContext } from “react”;
   export const MovieContext = createContext();
   

2. Wrap the Provider Parent component.

   import { MovieContext } from “./MovieContext”;
   import Navbar from “./Navbar”;
   function App() {
   const favouriteMovie = “Inception”;
   return (
   ### this wraps the provider component and passes data on value prop
   <MovieContext.Provider value={favouriteMovie}>
   <Navbar />
   </MovieContext.Provider>
   );
   }
   export default App;
   //Navbar.js wont pass any prop now to profile
   import Profile from “./Profile”;
   function Navbar() {
   return (
   <nav>
   <h3>Movie App</h3>
   <Profile />
   </nav>
   );
   }
   export default Navbar;
   

3. Get data with useContext

   import { useContext } from “react”;
   import { MovieContext } from “./MovieContext”;
   function Profile() {
   const favouriteMovie = useContext(MovieContext);
   return <p>Favourite Movie: {favouriteMovie}</p>;
   }
   export default Profile;
   

Now you would have gotten an understanding of how powerful hooks like useState, useEffect, and useContext are. These hooks make React applications more interactive, dynamic, and easy to manage.

We will discuss hooks in depth, in our next article.

Hope you enjoyed this simplified breakdown of React fundamentals!
See you in the next one.