# 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`)
    
* ```javascript
      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](https://www.geeksforgeeks.org/functions-in-javascript/) , [Variable](https://www.geeksforgeeks.org/variables-datatypes-javascript/) and [Object](http://geeksforgeeks.org/objects-in-javascript/) in JS .

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748066576523/16be892c-d2d5-4c10-81ee-d0978e9586ba.png align="center")

### Output :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748066606598/f2606eec-ea8c-447a-9367-e72d6afe106f.png align="center")

---

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

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

---

### Code Time

`App.jsx`

```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`

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

`components/Hero.jsx`

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

`components/Footer.jsx`

```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** :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748073775393/723fad10-8e82-47b6-bdd3-3bb8cecc6ef6.png align="center")

---

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**

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

**Code :**

`component/Welcome.jsx`

```javascript
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`

```javascript
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
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748078171708/9bfd0102-495a-47f5-9f77-e22c3154df33.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748078173000/48f22ac7-2549-4062-9d53-d6af27a17113.png align="center")

**Here is the UI output:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748078876400/c55ebd16-8e58-48de-a349-b3e4f6bf6fd3.png align="center")

---

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](https://www.geeksforgeeks.org/javascript-ternary-operator/) . In short ? means If block and : means Else part.
    

```javascript
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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748080517984/3dda3de2-dfe7-4597-b490-f14b13a0abf0.png align="center")

---

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](https://www.geeksforgeeks.org/javascript-array-map-method/) function.

If you understand that this is very Easy for you.

```javascript
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 :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748086387452/5a97ee6d-4640-48c7-8a67-77ca2c2688cf.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748086682535/bd3fe7fc-d241-4780-86d6-a921e7a3d1e8.png align="center")

---

### 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).

---