DEV Community

Cover image for Some Basic React Concepts!!
Sarthak
Sarthak

Posted on

Some Basic React Concepts!!

#webdev #react #development #tutorial

Lets Start with Whyyy React??
First of all React is a "LIBRARY"...as JS library to maintain frontend efficiently.

Before modern UI libraries, updating a webpage could feel messy. Even small UI changes often required manual DOM manipulation — tedious, error-prone, and hard to scale. As applications grew, keeping everything in sync became a real challenge.

Whenever any state is changed(think of state as a component's memory)...React compares the old virtual DOM and the new one and renders only the required changes...
This update process is called Reconciliation.

Lets Start from scratch...

  • Components:Reusable code segment or a function that returns JSX.Yeah just simple as that...

  • JSX:Markup Syntax Extension for Javascript that lets you write HTML like syntax inside a Javascript file.

Note:A component can't return multiple JSX tags - instead wrap them in a single

container.

  • Props:React components use props to interact with each other. Similar to passing parameters to a function just a little less stricter.

  • State:Components often need to change what's on screen as a result of interaction.To make changes to interactions it needs a memory to remember the state of a variable before interaction...Thats is...State is a component's memory.

  • Hooks:We add a state variable by
    const [index, setIndex] = useState(0);

Here, index represents the current state value, while setIndex is the function used to update that state. Both are returned by React’s useState Hook, which allows functional components to store and manage state.

Some commonly used hooks-

  1. useState()-State hook , manages states

  2. useContext()-Context hooks , use data passed through context.

  3. useRef()-Reference hooks , Used to reference objects..

You can even implement your own hooks..

  • Exports:Whenever you build a component you need to export it so that it can be imported and used in other pages/files.But exporting follows two methods-
    1)Default:Only 1 function per object can be exported by this method.
    2)Named:Multiple functions can be exported but with different names.

  • Effects:Rendering is React’s main job: state changes → UI updates. Simple.

But real apps don’t just render stuff. They fetch data, start timers, listen for events, or update the page title. These actions are called side effects — work that happens outside the UI itself.

That’s where the useEffect Hook comes in.

useEffect(() => {
console.log("Component updated!");
}, []);

The function inside useEffect runs after React finishes rendering. This keeps your UI logic clean while still letting your component do real-world work.

The dependency array controls when the effect runs:

[] → run once after the first render

[value] → run when that value changes

no array → run after every render

Think of useEffect as React saying:
“Render first… then handle everything else.”

That's some basic intro to React library...but ofcourse you need to deepdive more...
https://react.dev/learn

Refer to this and keep learning...

Top comments (0)