Thinking in React

• 1. What is React?
• 2. What is Jsx?
• 3. What is a state?

---

1. What is React?

React is a js library for building UI (Frontend).
The main feature of React is that it lets us build a separte, reusable piece of code called components.

export default function App() {
  return (
    <>
      <MyButton/>
      <MyButton/>
    </>
  )
}

function MyButton() {
  return <button>Click me</button>
}

Here "Click me" button is a component, reusable piece of code.
As you can see in the code above, we created a separate function/component called MyButton and used the component twice in the App function which gets rendered.

So yes, React lets us write this type of reusable piece of code called components.

---

2. What is Jsx?

Jsx is a Markup used in React.

In the code shown above, in the App component the return value looks like Html, but it's not Html, it's Jsx.
Jsx is a better, upgraded version of Html.

Jsx lets us use components like MyButton, use Js code directly inside the return value unlike creating a separate .js file or js div in standard Html, also it has small differences in naming things.

Jsx lets us

1. Use components
2. Js code together with html

const users = [
  {name: 'Erlan'},
  {name: 'Erlan2'},
  {name: 'Erlan3'}
]

const listUsers = users.map(user =>
  <h1>
    {user.name}
  </h1>
)

export default function App() {
  return (
    <>
      {listUsers}
    </>
  )
}

---

3. What is a state?