```
Also, notice in vanilla JS we used **onclick** whereas in React we used **onClick** Event Attribute. In React, all DOM properties and attributes (including event handlers) should be camelCased.
## **Asynchronous JavaScript**
Asynchronous JavaScript is a programming paradigm that allows JavaScript code to run without blocking the main thread. This is useful for long-running tasks, such as making HTTP requests or reading files, as it allows the application to remain responsive while the task is running.
Let's see an example of an Async Function in React.
```javascript
import { useState } from "react";
const AsyncFunctionExample = () => {
const [data, setData] = useState([]);
const fetchData = async () => {
// We can only use await inside an async function.
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts?_limit=5"
);
const resData = await response.json();
setData(resData);
};
return (
![]()
`must become `![]()
`, and wrapping tags like `` must be written as ` oranges `.
```javascript
// Component name / Function
const ReactComponent = () => {
// All the rest of the codes/logic goes here
// ...
// Return HTML
return (
);
};
// React components should be exported so that
// we can use them in different files.
export default ReactComponent;
```
A basic React component has an extension of "**.jsx"** or "**.tsx**" for typescript. It exports a function that returns HTML. Remember component name which is also the function name should always start with a capital letter.
**Variables**
```javascript
const ReactComponent = () => {
const name = "Krishna Kumar"
return (
);
};
export default User;
```
```javascript
// App.js
import User from "./User"
const App = () => {
return (
);
}
// If user is not logged in then show this
// message.
return (
);
};
export default ReactComponent;
```
Sometimes we want to show data if it is present else some placeholder.
```javascript
const ReactComponent = ({name}) => {
return (
{data.map((item) => (
))}
);
};
export default AsyncFunctionExample;
```
In this example, we created an async function that fetches fake posts when clicked on the button and shows them on the page. we added an await before fetch so the JavaScript engine pauses execution of the async function until the awaited promise is resolved.
## **Error Handling**
Let's do some error handling in the function we just created.
```javascript
import { useState } from "react";
const AsyncFunctionExample = () => {
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const fetchData = async () => {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts?_limit=5"
);
const resData = await response.json();
setData(resData);
} catch (error) {
setError(error.message);
}
};
return (
{item.title}
{item.body}
{data.map((item) => (
))}
{error &&
);
};
export default AsyncFunctionExample;
```
By adding a simple **try-catch** block we can handle the errors. Here I used the **useState** hook to store the error message and show if any error occurs. You can also use a toast/alert to show the error message.
## **JSX**
Now that you have seen the React codes, let's deep dive into how to write **JSX** in React.
JSX stands for JavaScript XML. It is a syntax extension to JavaScript that makes it easier to write HTML-like markup in React. JSX is compiled into regular JavaScript code, so it is efficient and performant.
> Note: All JSX elements must be closed. Self-closing tags like `{item.title}
{item.body}
{error}
}React Component
This is basic HTML
// we can use variable in html directly by
// wrapping them inside {}.
);
};
export default ReactComponent;
```
**Props**
```javascript
// User.jsx
const User = (props) => {
return (
{name}
{props.name}
{props.age}
{props.phone}
// using the User Component by passing the props
// so it can fill it in the details.
);
};
export default App;
```
This is a basic example of data passing down to components. You can pass strings, numbers, objects, functions etc.
## **Conditional Rendering**
Sometimes you want a specific condition to be true like the user logged in or the user has permission to open a page for this, we use conditional rendering.
```javascript
const ReactComponent = () => {
const isLoggedIn = true;
// return if user is Logged in.
if (isLoggedIn) {
return (
Welcome
User is Logged In
Hey you are not Logged In
{ name ?
);
};
export default ReactComponent;
```
Here we destructured the props and got the **name** variable. Then in the div, we checked whether the name was present or `null/undefined`, if present then `