As a react developer you should know react topics like Component, JSX, Hooks. In this article you will find the easiest way to understand the few of the Topics with the help of a project.

NOTE - Create the React Project First Follow the steps written in the article to setup the Project.

If you have setup the Project then Follow the Steps Below.

Projects - https://counter-app-mrabraham.vercel.app/

Source Code - https://github.com/Mr-Abraham/counter-app

---

After setting up your project you will see your vs code like this or any other editor like atom. There might be few other files depending on the selection while creating the project. But Don't worry, if you have got the app folder then its okay.

Step 1.

Open the page.js file and clear everything.

Step 2.

Write a normal Function in page.js like we write in Javascript that return an empty div. You may write the arrow function or named function.

Note - You always need to export your Function at the end of the code. like i exported the App function in the end.

function App(){
    return <di> </div>;
}
export default App;

Note - The Div we returned in App Function is something which is called JSX. But in javascript you cannot return HTML CODE without templates literal (``). But You are writing code in react so react will convert this html into javascript, so you don't have to worry about it. The Only thing you need to remember is what you returned in the form of HTML is called JSX.

Click to Learn about JSX

Understanding Component

The App function which is returning the div is a component since this will create a div for our page. Whenever You write a function which is returning a HTML code and that is going to be render on the page then that function is a Component.

Step 3 - Let's Create a Component

Go Your app Folder and create a file and you can give it any name that you want but remember you need to Capitalise the First letter of your file name. In my case i am going to create a file named "Button.js".

Now You have created the Button.js File and its empty. Lets Code our Component.

Write a function that returns a Button and then export that function.

function Button(){
return <Button> Click Me! </Button>
}
export default Button;

Note - The Function that is written above is a Component, since it returns the HTML code that is going to render on the screen.

Note- Component cannot Return Multiple item so we need to wrap them either in DIV or empty tags

function Button(){
return <> 
<Button> Click Me! </Button>
<Button> Click Me! </Button>
</>
}
export default Button;

In My Case i have returned two buttons but inside the empty tags. Those empty tags are called Fragments.

Step 4 - Import Button Component in page.js .

Your Component will not render unless you import in your main file, in our case, our main file is page.js ! So you we need to import the Button component and insert into the empty div that we returned earlier at the top.

import Button from "./Button";
function App() {
  return (
    <div>
      <Button />
    </div>
  );
}
export default App;

In the Above code you we have imported the Button Component from the same directory and inserted into the div.

Note - Whenever you want to render the Component you will insert either in Div or empty fragments and that component should be self closed.

Now if You will see you page you will find that your Two Buttons are rendering inside your HTML page.

You can clear all the CSS code from Global.css file and write your own CSS.

Step 5 - Let's Create Another Component File To Show The Numbers.

I've Created the File Named Data.js but you can put any name you want like apple.js heading.js etc.

Let's Create A Component that returns the H1 element to show the data.

function Data() {
  return <h1>1</h1>;
}
export default Data;

Import the Component Into Your Page.js file and insert into div to render the HTML.

import Button from "./Button";
import Data from "./Data";
function App() {
  return (
    <div>
      <Data />
      <Button />
    </div>
  );
}
export default App;

Now Your code had been update and its rendering two components : Data and Button.

Your Updated Code will render something like this , where Number 1 is a part of the Data Component and Two Buttons are the part of Button Component

Note - I Have cleared the Global.css file so my background is clear.

Step 6 - let's Understand the useState Hook.

Functions starting with use are called Hooks. useState is a built-in Hook provided by React. You need to import the useState from the react in page.js file.

After Importing the UseState you will get two things :

1. Variable - To Remember the Data

2. Function - To Update the Variable Data or Value.

import { useState } from "react";
import Button from "./Button";
import Data from "./Data";
function App() {
 const [count,setCount] =  useState(69)
  return (
    <div>
      <Data />
      <Button />
    </div>
  );
}
export default App;

in the above code, count is the Variable that will remember the values or data that will be passed through the setCount function. Initial value of Count is 69 since we have setup 69 in useState() You can pass any data type like array,object or string. But for our project numbers are required thus initialised with number.

Step 7 - Let's write a function that will call the setCount function and update the data in count variable.

"use client";
import { useState } from "react";
import Button from "./Button";
import Data from "./Data";

function App() {
  const [count, setCount] = useState(0);
  function Increase() {
    setCount(count + 1);
  }
  return (
    <div>
      <Data />
      <Button />
    </div>
  );
}
export default App;

Note - You need to mention "use client" at the top of your code so that your function will work with the useState() Hook.

I've created a function that will call the setCount function and that will pass the next number of the count value. if count is 10 then it will update the 11 (count+1),

Step 8 - Run the function when button is clicked.

Note - Our Buttons are in the Other Files and they don't know about the increase function so we will have to deliver this information to our Button Component so that our buttons can use the Function while they are clicked.

Question - How We will Pass the Information to that file ?

We Need to pass the props through our component which is inside the div and then we will call them inside our component file. Little Bit Confusing !! Don't Worry See Below You'll understand how to do that.

Step 1 - Pass the function as props through the component.

"use client";
import { useState } from "react";
import Button from "./Button";
import Data from "./Data";

function App() {
  const [count, setCount] = useState(0);
  function Increase() {
    setCount(count + 1);
  }
  return (
    <div>
      <Data />
      <Button first={Increase} />
    </div>
  );
}
export default App;

I've passed the increase function as a prop and set the name first. You can setup any name you want but you need to call the prop with the same name inside your component file.

Step 2 - Call the props inside your Component File.

function Button({ first }) {
  return (
    <>
      <button onClick={first}>Increase</button>
      <button>Decrease</button>
    </>
  );
}
export default Button;

we've called the first prop as an argument in the Button Function and now we can use it. Like i have used that prop at the place of my function which will run when i will click on the button.

Step 9 - Updating the Data

You need to pass the count variable to Data component since data will be remembering the updating value that we want to show on the browser. Pass the prop and import the prop.

function Data({ count }) {
  return <h1>{count}</h1>;
}
export default Data;

Notice One thing that i have removed the 1 from the H1 and now i am passing the count prop inside the curly brackets {} since this is the javascript variable not the plain HTML code to write on the page.

Congratulations You have Completed 90% Project.

Step 10 - Create another function that will reduce the count value and pass inside the Button Component.

• Create a Decrease Function that will reduce the count value

• Create a Reset function that will set the count value to the 0

• Create a new Button inside the Button Component that will run the reset function

"use client";
import { useState } from "react";
import Button from "./Button";
import Data from "./Data";
function App() {
  const [count, setCount] = useState(0);
  function Increase() {
    setCount(count + 1);
  }
  function decrease() {
    setCount(count - 1);
  }
  function reset() {
    setCount(0);
  }
  return (
    <div>
      <Data count={count} />
      <Button first={Increase} second={decrease} third={reset} />
    </div>
  );
}
export default App;

function Button({ first, second, third }) {
  return (
    <>
      <button onClick={first}>Increase</button>
      <button onClick={second}>Decrease</button>
      <button onClick={third}>Reset</button>
    </>
  );
}
export default Button;