Sachin ChaurasiyaIn 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.
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:
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.
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.
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.
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
