This post was originally published on https://vision-secrets.com

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 it means.

well, the single-page application is an application where all the files(HTML, CSS, JavaScript) 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 whole page.

as I said all the file(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

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 it helps the 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 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:

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 another 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 to use it.

Read more about Composition

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 same as Real DOM or we can say Lightweight copy of Real DOM. Updating Real DOM is Slower while Updating Virtual DOM is Much faster.

Read More About 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:

• state is passed to the view and to child components
• actions are triggered by the view
• actions can update the state
• the state change is passed to the view and to 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 to React Operates.

   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, that is nothing but JSX. at first it feels strange but after some time you will love this JSX syntax.

Conclusion

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

Comment Down If you have any queries.

if you like my post then Buy me a coffee.