Introduction

React Props

Rendering a List

Children Prop

Handling Events

Managing State

About Side Effects

Creating Forms

Using CSS

Working with Data

Notes on Reusability

What Next?

Just React

Learn just enough React to get things Done 🚀.

Okay. Let's look at this function:

```jsx
function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <p>This is a paragraph</p>
        </div>
    )
}
```

Everything looks familiar, but the problem is what we are returning from it. 

With React, we can use HTML (or sort of) inside JavaScript. It's possible because we usually use React with a transpiler, which converts this code block into JavaScript. This dialect of JavaScript is known as [JSX](https://reactjs.org/docs/introducing-jsx.html).

<Note>
🤔 Okay. What is a transpiler?
</Note>

Just don't overthink this; it's just like a compiler or a converter. You will use React with a framework like [Create React App](https://reactjs.org/docs/create-a-new-react-app.html), [Next.js](https://nextjs.org/) or [Gatsby](https://www.gatsbyjs.com/). They will take care of transpiling & many other things for you.

[Try to play with](https://jsbin.com/rubobifofi/1/edit?js,output) the HTML content inside the following function. Maybe add another paragraph. Or a list.

HTML inside JavaScript

Now, have a look at this code block. 

<Note>
👋 I didn't include the `ReactDOM.render` code here to make things simple.
<br/>
(I won't include that in the rest of the course too.)
</Note>

```jsx
function Welcome() {
    return (
        <div>
            <hr/>
            <p>Welcome to React</p>
        </div>
    )
}

function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <Welcome />
        </div>
    )
}
```

Here we have another React component called `Welcome`. We can render it inside our "Page" component using this syntax: `<Welcome />` Basically, you can render it like any other HTML element.

Now try to rename our component into `welcome` and render it again.<br/>
(Use [this live React editor](https://jsbin.com/waroqaqafe/1/edit?js,output) to try it out.)


<Question
    id="just-react-introduction::2::1"
    title="What has happened?"
    answers={[
        "It worked like the same",
        "It didn't render the `welcome` component",
        "It throws an error saying, `welcome` is not a component",
        "It didn't render anything"
    ]}
    points={30}
    correctAnswer={1}
    explain={
        As you can see, you need to start your component name with a Capital letter. That's it. 
    }
/>


Components

Amazing. You are still here. 🎉

I think you might wonder, why we create a component to just render a welcome message like. We can easily, write it like this:

```jsx
function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <div>
                <hr/>
                <p>Welcome to React</p>
            </div>
        </div>
    )
}
```

Of course, yes. 

But a "Component" is a way to reuse code/UI in React.  We can do a lot, including passing values, manage states, and even fetch data. We will look at most of these in upcoming lessons.

Stay safe 😷 & follow me.

Finally

Just React

Introduction

Components

🙏 We need your help