React > My Braincells

1. Context :

So you’re jumping into React — welcome to a world of curly braces, weird JSX, and the classic “Why isn’t my state updating?” mystery.

This post covers the React basics you need before freaking out over hooks: JSX, components, props, state, lists, and forms — all the essentials to get you started.

Whether it’s for your portfolio, a job, or just curiosity, buckle up and dive into:

"React: Where UI Dreams Begin... and Sanity Ends."

---

2. content :

   A short overview of what the post covers:

   • JSX

   • Components

   • Props

   • Conditional Rendering

   • Lists & Keys

---

3. JSX :

Full form of JSX is : JavaScript XML → I know it’s not that easy to digest.

• JSX must return one parent element (<div> or <> </>)

• class becomes className (JSX ≠ HTML)

• Inline styles use camelCase (e.g., style={{ backgroundColor: "red" }})

• You can run any valid JS inside {} (e.g., expressions, function calls)

• JSX is compiled by Babel into regular JS (React.createElement)

•     import React from 'react'
  
      const topic = "JSX"
      const identity = {
        name: "Ayush",
        age: 19,
        isDeveloper: true
      }
      // js code
  
      export default function App() {
        return (
          <div>
            <h1>hello {topic}</h1> 
            <h3>
              {identity.name} 
              {identity.age}
              {identity.isDeveloper}
            </h3>
          </div>
        )
      }
  

If you don’t understand see this Function , Variable and Object in JS .

Output :

---

2. Components

React components = functions that return UI. That’s it.
You write one, reuse everywhere — like your favorite pair of socks (but cleaner).

• Name of the component must be in capital letter.

• JSX must return one fragment <></> in which we right the UI staff.

---

Folder Structure

/src
  ├── App.jsx
  └── components/
        ├── Header.jsx
        ├── Hero.jsx
        └── Footer.jsx

---

Code Time

App.jsx

import React from 'react'
import Header from './components/Header.jsx'
import Hero from './components/Hero.jsx'
import Footer from './components/Footer.jsx'
// importing component

export default function App() {
  return (
    <div>
      <Header />   
      <Hero />
      <Footer />
    </div>
  )
}

---

components/Header.jsx

export default function Header() {
  return <h2> Welcome to React World</h2>;
}

components/Hero.jsx

export default function Hero() {
  return <p>This is the main content area.</p>;
}

components/Footer.jsx

export default function Footer() {
  return <small>© 2025 Ayush Inc.</small>;
}

---

• 1 folder for components

• 1 file per component

• 3 tags in App.jsx = whole UI

That’s component composition. Short, clean, scalable.
Like React intended.

Output :

---

3. Props

What is Prop ?

• The full form of Props is properties and We pass it in the Function as Arguments.

• Props is a object.

• We pass Props in the function after doing Object destructing.

• We will understand it better while coding.

Folder structure

/src
  ├── App.jsx
  └── components/
        ├── Welcome.jsx

Code :

component/Welcome.jsx

import React from 'react'

export default function Welcome({name,age}) {
  return (
    <>
      Welcom {name} to Props part
      <div>You are {age} years old</div>
      <hr />
    </>
  )
}

APP.jsx

import React from 'react'
import Welcome from './components/Welcome.jsx'

export default function App() {
  return (
    <>
      <Welcome name="Ayush" age={19} />      
      <Welcome name="abcd" age={20} />
    </>
  )
}

Deeper Explanation:

• in this pictorial representation we can see Prop is just a Object mapper.

• It means when In the actual functional component function we pass ({ name , age}) . This will make a object named “Props”.

• It’s has two property i.e. name and age. But both the object field is empty. Here is name key but it’s has no value.

• I hope you know object is just a key: value pair.

• When we pass <Welcome name=”Ayush” age ={18}/> the key value pair is completed and showed in the UI part.

• This help to make the UI dynamic

Here is the UI output:

---

4. Conditional Rendering :

When we render UI depending on the condition. Then It is named as Conditional Rendering.

• Here We have used ternary operator in React with the condition. Upon the situation.

• We will see more on the project section. if you don't understand this please read about . In short ? means If block and : means Else part.

import React from 'react'

const isDeveloper = false;
const ifDeveloper = <h1>he is developper</h1>
const ifNotDeveloper = <h1>he is not developer</h1>
export default function App() {
  return (
    <div>
      {isDeveloper ? ifDeveloper : ifNotDeveloper}
    </div>
  )
}

Output

---

5. Lists & Keys :

Sometime In Website We need to render List. Then We need to use Some JavaScript loops like map. Click on the link to understand Map function.

If you understand that this is very Easy for you.

import React from 'react'

const Fruits=["mangoo","apple","guava","linchi"]

export default function App() {
  return (
    <div>
      <h1>The fruits I love</h1>
      <ul>
        {
          Fruits.map((value, index) => (
            <li key={index}>{ value}</li>
          ))
        }
      </ul>
    </div>
  )
}

Output Ui :

We provide key is used for It’s tells the react when the DOM should render means when key is changed Dom is re-rendered.

If We don't provide the key then In background It will give error in console.

---

Conclusion: I’ve completed the basics of React!

From components to props, conditional rendering to list rendering — I’ve got the fundamentals down.
Excited to dive deeper into forms, routing, and state management next!

Let me know if you'd like a checklist or roadmap for what's next (like Hooks, State ,Redux, Context API, or advanced patterns).

---