When it comes to learning React, you will come across at least one article or a talk on YouTube by Kent C Dodds. I am a huge fan of this guy. His blogs and videos are simply awesome. I will highly recommend you to go and read his blogs and listen to his talks on YouTube. I got an inspiration to write this article by one of his talks on YouTube.
You will find a lot of tutorials online about 'Writing your first program in React' or describing various features offered by React but you will hardly find any posts or videos that will explain you what happens behind the scenes.
Background
To understand how React works behind the scenes, it’s really important to have basic understanding of how to work with DOM elements using JavaScript. The program below shows how to display 'Hello World' text in the webpage.
React offers component based approach which means you can divide your page into components. In order to write react components we need two JS files.
- React: which offers functions for creating react elements (similar to createElement())
- ReactDOM: which offers functions for rendering react elements to the DOM (similar to append())
Once included, these JS files will give you access to two global objects namely React and ReactDOM. In order to create React elements, React object provides a function named createElement. This function takes following arguments.
In above function definition, the parameter children can be an array which can have child elements created using the same createElement command. Now, we have React elements but there has to be a way to render these elements to the DOM and ReactDOM does that for you. It provides a method called render that helps you to render elements into the DOM.
Now, let's say we want to create a DOM structure like this.
React code for this will be as shown below.
In real life projects, it is not possible to write code using the syntax mentioned above. This is where JSX comes into picture.
What is JSX?
JSX is a syntactic sugar on top of raw React APIs. It looks a lot like HTML but it is not. Your browser does not understand JSX so it needs something which will compile JSX into browser readable format. Most of the modern day apps use babel for this. In the image shown below, on left you can see the JSX syntax for displaying Hello World and on the right you will see how babel compiles the code using React library functions.
If you’d like to see how JSX gets compiled to JavaScript, check out the online babel REPL here.
To display 'Hello World' using JSX, you have to include babel script in your code. Now your code will look like this.
So, basically we tell babel to compile our JSX code on the fly. You can see the compiled version in the browser as shown below.
If you have object of props, you can pass it to element tag as shown below.
Final Thoughts
So as far as the basics are concerned, this is all what you need. Frankly speaking this is not at all required to get you started. You can start React without this but it's always good to learn about the basics. It gives you a kind of confidence to learn more about the language otherwise you keep on having that feeling of missing the first step. And I strongly believe whenever you are learning something new, it should always start with your first step. Good luck :)
Thank you for reading this article. Let me know your thoughts in comments section.
References:
I would really recommend you to follow this reference material for more information.
- Excellent talk by Kent C Dodds https://www.youtube.com/watch?v=SAIdyBFHfVU
- Introducing JSX https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx
Top comments (0)