We will be building this counter app & will be understanding the concepts simultaneously.
`import React,{useState} from "react"
import "./App.css"
function App() {
const[count,setCount]=useState(0);
const[age,setage] = useState(0);
const decreament = () => {
setCount(count - 1)
};
const increament = () => {
setCount(count + 1)
};
return (
welcome to counter app
The count is : {count}
+
-
);
}
export default App;`
currently i will be focusing on important react concepts if u want a full code explanation scroll down the page
import React,{useState} from "react"`
{useState} - it is an # hook
Hooks:
Hooks are like magic spells that help you use special powers with your box (state). With hooks, you can do cool things like adding more candies to your box, counting how many candies you have, or even changing the color of your toy house! The most popular hook in React is called "useState," and it lets you create and use that special box (state) in your app.
enitre code explanation
`Imagine you have a whiteboard. On this whiteboard, you have two boxes. The first box is called "count," and the second box is called "age." These boxes represent the variables that hold some information in your app.
Now, let's go through the code step by step:
Import statements: In computer science, when you want to use some special tools or functions that are already created, you need to import them. It's like borrowing a specific tool from a toolbox. In this case, we are importing two things from the "react" library: "React" itself (which helps us create components) and "useState" (which is a special tool called a hook that allows us to manage state, as we'll see later).
Function declaration: The code defines a function called "App." Functions are like sets of instructions that can be used whenever you need them. The "App" function is the starting point of our application.
State and Hooks: In React, "state" is like a memory space where you can keep track of important information. Imagine you have a small drawer where you store something important. "useState" is a hook provided by React that gives you a way to create and manage state. Hooks are like special instructions to handle specific tasks in React.
useState: The first "useState" hook is used to create a state variable called "count." It is initialized to 0 (the initial count value). The second "useState" hook is used to create a state variable called "age," which is also initialized to 0.
Counting buttons: The code defines two functions: "decreament" and "increament." When you click the "-" button, the "decreament" function decreases the value of "count" by 1. When you click the "+" button, the "increament" function increases the value of "count" by 1.
Rendering: React components are like instruction sheets for what should be shown on the screen. The "return" statement in the "App" function tells React what to display. In this case, it renders a div containing a header, a paragraph showing the current value of "count," and two buttons.
Button Clicks: The buttons have "onClick" attributes that specify which function to call when they are clicked. So, when you click the "+" button, it calls the "increament" function, and when you click the "-" button, it calls the "decreament" function.
Displaying count: The current value of "count" is displayed in the paragraph using curly braces and the "count" variable, like this: {count}. It's like showing the current value of the "count" box on the whiteboard.
Overall, this React app is a simple counter that displays a number on the screen, and you can increase or decrease that number by clicking the buttons.
Remember, React helps you build user interfaces in a structured and efficient way, and "state" and "hooks" are tools to manage data and make your app interactive.
Top comments (0)