## Introduction

React is developed on the fact that **rendering logic** should be coupled with other **UI logic(events, state management)** and should be **managed together**. 

For this reason, instead of separating technologies(separate files for HTML and javascript), react uses a syntax extension of javascript, **JSX - Javascript XML**. Using JSX, you can write markup inside Javascript, providing you with a superpower to write logic and markup of a component inside a single .jsx file.

```js
function greeting(user) {
  //warning: JSX in next line...
  return <h1>{user}, How are you!!!</h1>;
}
```

In the above example, 

```js
    return <h1>{user}, How are you!!!</h1>;
```

**"<h1>{user}, How are you!!!</h1>"** looks like HTML but is actually JSX.  

> All JSX returns a react element which will be rendered as a DOM node by virtual DOM. 

You can write/embed a javascript expression inside JSX using **"{}"** curly brackets. In the above example, **{user}** will be evaluated before returning the react element. 

JSX are also **javascript expressions**, which compiles to **React.createElement()** function calls. And these functions(React.createElement()) return javascript objects. The returned objects describe what will be rendered on the screen and are called **react elements**. 

Here is the three-step process from JSX to react element.

1. Let's consider the following code written in JSX:
```js
<div className="greeting">Hello, how are you?</div>
```

2. JSX compiles to React.createElement() function calls:

```js
React.createElement(
  "div", 
    {
      className: "greeting"
    }, 
    "Hello, how are you?"
);
```

*We will get into the details of the React.createElement() in another article.*

3. React.createElement function calls returns react element: 

```js	
{ 
  type: 'div',
  props: {
    children: 'Hello, how are you?', 
    id: 'greeting' 
  }
}
```

> A **react element** is a javascript object representing a piece of UI on the screen.

When the above react element is rendered by the virtual DOM to the DOM, the following node will be created and attached to the DOM:

```js
<div class="greeting">Hello, how are you?</div>
```

React virtual dom uses react elements to decide what will be rendered on the screen and thus manipulate the real dom. 

*Remember, JSX is not required for writing a react application but is recommended by the official documentation.* 

## Summary

In this article we learned:

- What is JSX?
- Why React use JSX?
- What is React Element?
- What are the steps involved from writing JSX to creating a node on the DOM?



----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**


JSX - Javascript XML in React

## Introduction

In this series, we will look into some of the notable features of React from which React gets its power and simplicity. This article is a formal introduction to all of them, diving more into the concept rather than the code. We will discuss all of them in detail with lots of examples later in this series. 

## Key Features of React
- JSX
- Composition of Components
- Virtual DOM
- One way data-binding
- Lifecycle Methods

## JSX (Javascript XML Notation)

React is developed on the fact that rendering logic should be coupled with other UI logic(events, state management) and should be managed together. For this reason, instead of separating technologies(HTML and javascript into separate files), react manages complexity by dividing concerns into loosely coupled units called components.

**"Javascript XML"** is a syntax extension of Javascript. Using JSX, you can **write markup inside Javascript**, providing you with a superpower to write logic and markup of a component inside a single .jsx file. 

```javascript
function greeting(user) {
//warning: JSX in next line...
  return <h1>{user}, How are you!!!</h1>;
}
```

## Composition of Components

Know what! React has yet another superpower, which allows you to reuse your code in a very subtle way. This superpower allows you to compose small components to form a complex component.

For example, you can create separate components for like, share and comment encapsulating their logic. Later, you can combine them to form a complex component like cards.

![Component Composition](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react_3.png?alt=media&token=bf498655-9216-45eb-9252-d955b9cb6190)

## Virtual DOM

React is very performant. To achieve it, react **creates a  virtual representation of UI in the memory** known as **Virtual DOM**. Instead of updating DOM directly, React sync the Virtual DOM with the real DOM. Virtual DOM updates only those components in real DOM for which the state has changed and thus needs a re-render to show the updated data on the screen.

![Virtual DOM](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react2.js.png?alt=media&token=bd69b0c6-8c57-43ee-b9fc-e6dc1c8de78f)

## One-way data binding

In React, **data flows from parent to child unidirectionally**. The parent component passes its state to the child component using props. Child, in turn, can communicate to parents for updating the state using callbacks. This one-way communication between parent and child makes developing complex applications easier. It also helps in making debugging a lot less painful.

![one-way data binding](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react2.png?alt=media&token=bbaf1ece-e29d-449a-b116-952d8df23b1c) 

## Lifecycle Methods

Lifecycle methods are hooks which let you run different code at different point of a component's life. Thus, making it easy for you to manage components in React application during their lifetime.

## Different phases of react components are:

### Mounting

When the react component is added to the DOM Tree, it is said to be mounted. After mounting, the component becomes visible on the screen.

**Methods**
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()


### Updating

When a component receives a new state or props, the component is re-rendered.  React provides different lifecycle methods to hook into the update event. 

**Methods**

- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()

### Unmounting

When a component is removed from the DOM tree, it is said to be unmounted. 

**Methods** 

- componentWillUnmount()

We will discuss lifecycle methods in detail in later articles. 

----

**If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 



Key Features of React JS

React is a Javascript library used for building fast and interactive user interfaces. It is developed by Facebook in 2011. Today, React is very popular with **144k** stars on [Github](https://github.com/facebook/react).

> **React** is a Javascript library used for building fast and interactive user interfaces.

React is used to build single-page applications or mobile applications. You can create complex user interfaces using small isolated pieces of code called components.

## Components in React

Components are building blocks of a React App. A component represents a piece of User Interface like buttons, textbox, etc. It is a javascript function or class which accepts properties(props) and returns a react element that describes how a section of UI should appear.

![React Component](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react.png?alt=media&token=381453c0-293b-4e14-ab83-a3c43c52af03)

> A Component is a javascript function or class which accepts properties(props) and returns a react element that describes how a section of UI should appear.

## Props and State

There are two types of "**modal**" data in React:
- props and,
- state

**Props:** Props are used to send data to the component, it is equivalent to the arguments of the javascript function. Parent component can pass data to the child component using props.

**State:** State is a javascript object that is initialized and managed by the component. It is like a data store for the react component.

# Virtual DOM

When the state or props of a component change, react renders the component using new data(props and state). However, react does not work on the DOM directly. Instead, it creates a virtual DOM in the memory and compares it with the original DOM. If there is a difference, react updates the real DOM to sync with the virtual DOM.

![Real and Virtual DOM](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/react2.js.png?alt=media&token=bd69b0c6-8c57-43ee-b9fc-e6dc1c8de78f)

React updates only the part of DOM which is modified instead of rendering the whole page again.

In the next article, we will discuss some of the core features of React JS.

## Additional Resources
- [**React Hiring Guide (Toptal)**](https://www.toptal.com/react#hiring-guide)
- [**Intro To React (reactjs.org)**](https://reactjs.org/tutorial/tutorial.html)


----

**If you liked this article, please upvote and recommend it. Feel free to ask any questions in the comments below.** 

----

**We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels ([twitter](https://twitter.com/hackinbits), [Facebook](https://www.facebook.com/hackinbits/), [LinkedIn](https://www.linkedin.com/company/hackinbits)).**
 