# Loving React

## What is React?
You want to be a front-end master developer? Then React as a library got you. React allows you as a  developer to build large, scalabe applications quickly and painlessly. We can thus say that React encourages declarative approach as it describes what a program should accomplish .ie what the end result should be. In other words it leaves the determination of how to get to the end result to the program.

React creates a VIRTUAL DOM in memory. Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

## What does React entail?
It has:

**Components and props**

Components are the building blocks of React app. They help separate UI into small , reusable bits of code.
Props are how data is shared between different parts of your application.
They help separate code and functionality in a logical and easy to read way, producing highly reusable, and independent chunks.
They comprise of Function components and class components.

**Function component**
```
function App() {
  return (
<div>
 <h2>Hi, I am an app!</h2>;
<Article/>
<Comment/>
</div>
)
}
```
**Class component**
 ```
class App extends React.Component {
  render() {
    return <h2>Hi, I am an app!</h2>;
  }
}
```
The naming convention of using a capital letter:
- Helps react developers to easily differentiate between JavaScript functions and React components.
- It is also a rule that we should follow for React to render our components correctly.

**Props**
```
const myElement = < brand="React" />;
function App(props) {
  return <h2>I am { props.brand }!</h2>;
}
```
The component receives the argument as a props object


**JSX  - JavaScript XML**

This is React's declarative syntax representing the DOM. JSX is an extension of vanilla JavaScript.
It looks like HTML and uses a lot of HTML syntax. Again it allows us to use JavaScript functions right along HTML and also allows us to add in components , which are separate, self-contained chunks of JSX.
```
const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
```

**State and Events**

These help make a dynamic website using React. For instance the useState hook is a state that re-renders DOM element in response to events.

**Adding Events**

React events are written in camelCase syntax - onClick instead of onclick.

React event handlers are written inside curly braces -  onClick={shoot}  instead of onClick="shoot()".

```
 <button onClick={() => shoot("Goal!")}>Take the shot!</button>
```

**Side effects and data fetching**

An instance of useEffect hook with components to perform side effects and interact with API to fetch data.
Hooks allow function components to have access to state and other React features.