Introduction
React is a popular Javascript library useful in creating reusable, component-driven user interfaces for web pages and apps.
How does React work?
React uses its markup language called JSX. JSX makes it easier for React to combine HTML and Javascript Functionality. One of the most powerful features of React is its ability to manage the flow of data throughout the application.
Benefits of JSX
As we have already said, with JSX, you can write Html with Javascript. This has several benefits which include:
It makes your code readable.
It lets you use the full programmatic power of Javascript within HTML.
Note: JSX is similar to the HMTL code that you have already learned. However, key differences between HTML and JSX syntax exist which you will continue to learn as we progress with our learning.
How to write Javascript in JSX?
JSX is a syntactic extension of Javascript, thus you can write Javascript within JSX. To include Javascript in JSX, you need to write your Javascript code within curly braces({}).
Example
{ 'code here is treated as Javascript'}
How is JSX compiled?
JSX is not a valid Javascript, it must be compiled into javascript. The transpiler Babel is a popular tool that is used for this process. Check How transpiler Babel works. Writing a syntactically invalid JSX will make your code fail.
How React renders your code?
Imagine that you need to draw on a piece of paper. You would have to plan and arrange where each of your drawings will go on your paper. But now, you have a magic box that will place your content on the piece of paper. You just need to tell the magic box to take your drawings and stick them on the paper.
Just like you told the magic box to stick your drawings on the paper, React calls a function ReactDOM.render(JSX, document.getElementById('root')). This function is what places the JSX code in its lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.
Conclusion
Thanks for diving into this article! By reading it, you've gained insights into how React creates stunning user interfaces. As we journey through our ongoing series about learning React, I'll be explaining more exciting things. Stay tuned for more valuable information and happy learning!
Top comments (0)