React JS is one of the most (if not the most) popular buzzword in the frontend development world today. With major companies and many startups using react in their products, it’s demand has risen many folds amongst developers and job seekers. Here are some of the facts about React a beginner show know when they decide to learn React JS.
1. React was created with an idea of writing whole of HTML within JavaScript File.
With initial React.createElement() method and eventual JSX, the aim of React is for developer to write whole of Frontend code within the JavaScript file, where dynamically props and variables can be passed.
2. React JS is a Library not a framework
React is a JavaScript library meaning it can be imported like other libraries within existing projects as well. Like other libraries it can also be used just in a specific part or module of a project. Unlike a framework where whole of file structure is defined by the framework, ReactJS is a library which can be used with other frameworks.
2. React JS libraries are imported as 2 files one as React.js and other as React-DOM.js
As React is used across platforms for development like React Native for mobile devices, React3d for rendering etc., the React.js file provides common functionalities across these platforms. While, as the name suggests, React-DOM.js file provides functionalities exclusively for the web browser like providing console tools, render tools etc.
You can read more about DOM in this article.
3. React Element is just a JavaScript Object
Any react element created by React.createElement() or via JSX is at the end of the a JavaScript object.
4. React Component is a JavaScript Function
Like an element is just an object, React component is just a JavaScript Function that return the code for that component and takes props (or properties) as input.
5. We create a root using ReactDOM.createRoot() method
The root created here takes a react element using .render() method and is parsed inside the DOM object/node passed inside of .createRoot() method.
6. We can have multiple roots.
But, even in large projects there is usually no need of more than one roots. So, almost every time you shall encounter single root per project, where we inject React using .render() method.
7. React root can only contain rendered content
Any hard coded code within the root element will not be rendered on DOM. Only JavaScript rendered code is visible in the root.
It is a common practice to write “Not Rendered” within the root, so as to know about problem with rendering on final screen during development.
