# Day 1 - React JS - Getting Started

## Components

React apps are made out of *components.* A component is a piece of UI that has its own logic and appearance. A component can be as small as a button or an entire page.

React components are JavaScript functions that return markup:

```javascript
function MyButton(){
    return (
        <button> I'm a button </button>
    );
}
```

Components can also be nested in other components :

```javascript
export default function MyApp (){
    return(
        <div>
            <h1> Welcome to my app </h1>
            <MyButton />
        </div>
    );
}
```

### Writing markup in JSX

The markup syntax above is JSX

* JSX is stricter than HTML. We need to close each opening tag like &lt;br /&gt;
    
* A component cannot return multiple JSX tags. So we need to wrap them into a parent, like.. &lt;div&gt;...&lt;/div&gt; or &lt;&gt;....&lt;/&gt; wrapper.
    
* To use JavaScript in JSX, we need to enclose it between curly braces {}.
    

## Adding Styles

* In React, we specify a CSS class with className. It works the same as class attribute in HTML.
    
* Then write CSS in a separate file just like HTML.
    

## Conditional Rendering

In React, there is no special syntax for conditions. So we use normal JS conditions to do so.

```javascript
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);
```

To keep the lines short and code clean, we can also use the "?" operator.

```javascript
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
```

## Rendering Lists

We rely on JS functions like "for loop" and "map()" function to render lists of components. Example:

```javascript
const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);
```

> Note how &lt;li&gt; has a key attribute. For each element in list, a unique key is required.
> 
> React needs these keys to know what happened if you later insert, delete or reorder the items.

## Responding to Events

We can respond to events in React just like HTML inside your components.

```javascript
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
```

> Notice how `onClick={handleClick}` has no parentheses at the end! Do not *call* the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button.