Learning Some Important Concepts of React Js (part-1)
Tags: react, javascript, html, css
Published: 2020-11-12 06:55:30

In this post, we'll discuss some important concepts of React Js. Some Concepts are not just related to React js instead they are universal.

List of things that we'll discuss in this post.

- SPA (Single Page Application)
- Declarative
- Composition
- The Virtual DOM
- Unidirectional Data Flow
- JSX

## What is the SPA or Single page application?
when we started learning Javascript Framework / Library many of us heard this term before but what exactly does it mean.

well, the single-page application is an application where all the files(HTML, CSS, JavaScript) are loaded when we make the first request to the webserver. and after when we make the second request to the server the page changes dynamically rather than loading and refreshing the whole page.

as I said all the files (HTML, CSS, JavaScript) loaded on the first load. but not all the things are directly shown to the users. things are shown based on user actions. and that makes the SPA much much faster than a traditional application.

The key takeaway is SPA loads all the files on the first load and changes the page dynamically based on user actions.

[Read more About SPA](https://en.wikipedia.org/wiki/Single-page_application)

## Declarative

while Learning React you heard this term often that React follows the declarative Approach rather than iterative. but what is the declarative approach and how does it help React?

In vanilla javascript, we use DOM to tell what we need. but in react we directly tell the browser what to do. In react we just define the `component` to be rendered in a specific way rather than referencing the `DOM`.

Because of React Declarative Approach, we can only focus on what things need to be done not on how things to be done.

## Composition

The term is self-explanatory; In programming, composition allows you to build more complex functionality by combining
small and focused functions.

In React we define components in a way so that they can be used to compose more functionality on top of them.

### Let's take an example:

```react
const Button = props => {
  return <button>{props.text}</button>
   }

const SubmitButton = () => {
  return <Button text="Submit" />
   }

const LoginButton = () => {
  return <Button text="Login" />
   }

```
In the above example, I have created the `Button` component which receives the `props`.

Then using the `Button` Component I have Created Two other Component `SubmitButton` and `LoginButton`. you can see that I have passed `text` as props to button component in both places.

**NOTE:** You can pass methods also as a prop.

The takeaway is that Composition makes our life easier so why not use it.

[Read more about Composition](https://reactjs.org/docs/composition-vs-inheritance.html)

## The Virtual DOM
The Virtual DOM is where Objects are stored in memory and later sync with Real DOM by some Libraries like ReactDOM.

This is much the same as Real DOM or we can say a Lightweight copy of Real DOM. Updating Real DOM is Slower while Updating Virtual DOM is Much faster.

[Read More About Virtual DOM](https://www.codecademy.com/articles/react-virtual-dom)

## Unidirectional Data Flow

While Learning React you will be going to hear this term frequently.
Unidirectional Data Flow is not a concept unique to React but as a JavaScript developer, this might be the first time you hear it.

In general, this concept means that **data has one, and only one, way to be transferred to other parts of the application.**

In React this means that:

- the state is passed to the view and child components
- actions are triggered by the view
- actions can update the state
- the state change is passed to the view and child components.

## JSX

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML to React.

At first, this may look strange but this is how React Operates.

```react 
   const name= "Sachin Chaurasiya"
   
   const hello=props=>{
    return(
        <h1>Hello,{name}</h1>
         )
    }
```
In the above example, as you can see I have used javascript inside HTML, which is nothing but JSX. at first it feels strange but after some time you will love this JSX syntax.

## Conclusion

These are Some important concepts of React js and there are more that will cover in the next part of this post.

And that’s it for this topic. Thank you for reading.

## Connect with me
[LinkedIn](https://www.linkedin.com/in/sachin-chaurasiya) | [Twitter](https://twitter.com/sachindotcom)

<a href="https://www.buymeacoffee.com/sachin87" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>