10 Basic React Js Confusion You Should Clear Today
React Js: Library or framework?
Most of the time at the beginning, developers used to introduce React Js as a framework or alternate option of Angular. Yes React developed like a frame work since the beginning but it is actually not a framework. Why?
A framework should have all of the features that a web application or mobile application should have. So the app do not have to use external libraries, in some cases may be two or three. But React Js has its own set up like Server Side Rendering, JSX, Virtual DOM, Hooks but most of the features you see in a React application is from an external solution.
React Router is a external library, if some one wants to use animation then Framer is an external Library.
So React Js is a library, not Framework.
Do JSX is HTML Version of Javsacript?
Haha..no. JSX is completely different thing. It is the combination of JavaScript and XML. Through this set up, you can write HTML directly into JavaScript file. Which we previously used with template string (``), document.createElement, document.innerHTML etc. But that was not so handy and it did not give us much flexibility.
XML is Extensible Markup Language which means this language is much more better to sending and receiving data. And it is not limited like HTML. This language is not predefined means you can create HTML Tags in your own way as you need. You can not create new HTML Tags, rather you can only use the <div> tag creativity everywhere which is not a good solution for Crawling and Other browsing related stuffs.
You cannot have much Dynamic experience with HTML whereas JSX will give you the best experience ever.
Why The Idea of Component is Important?
Suppose you need a burger. Will you open a shop in your house then produce the burger then grab it? No! you will go to the shop and buy only the burger and grab it. There are lots of options in the shop. Fries, Chicken, Salad, Beverages. You didn’t buy the whole shop and only grab the burger.
This is what React Js do. You can use a particular component as your need. On the other hand, if you use Angular, then you need to grab the whole framework for only a little job to complete.
Virtual DOM: The Best Solution?
Till now. Virtual DOM creates a mere or copy of the whole application where it will have the info about what the DOM had previously and what the DOM has now. So it just changes or updates the copy version or works on the copy version that’s why the main DOM no need to re-render every time. Which keeps the total idea much more flexible for the developers.
Component Names with Capital Letters?
This is very interesting thing in React Js. You have to keep the Components name start with capital letters. But why? Ok, the answer might seem different for new developers. If you are familiar with Babel and Webpack, these are compilers and module bundlers in JavaScript. Suppose, you have written a code in ES11, not every browser will support it. So will you code your application separately for every browser? Obviously no, and then you need a compiler to make your code every-browser-supported which is cross-browser-compatibility. When you use React Js, you actually use babel and webpack to compile your app for every browser under the hood. Now if the babel library see any component started with small letter, then he considers it as HTML tag and try to show it in browser. Now think, will your app run? no! The whole app will fail to represent your idea behind the app. That’s why we need to keep capital letters at the starting of the component.
What Does {{}} This Mean?
This means where you use this brackets, you can write regular JavaScript codes in it on your react application. It makes your application dynamic. You can use Data any where of your application through this simple solution. It helps much more when you use “useState”, “props” etc.
Class Component or Functional Component?
JavaScript is object oriented based and most of its methods come from prototypical structure or class constructor. This got very popular may be after the JAVA, C++ or C# involved into app development for mobile mostly android. So JavaScript also written based on that style so that it can compete the market. (maybe that’s not true) but the think is OOP structured the whole idea to make JavaScript more re-usable and more dynamic. So React Js was also structured based on OOP and collaborated it with Js. But after ES6, function expression (a variable that assigned with a function) got more popular. So React developers started to update React Js based on functional component and which is modern React Js today. Functional components are much more easier to build. If you are new to web development and do not know OOP much then go for functional component. Rather if you are hired in a company where they used to work with quite older applications then you have to know class component.
Do I Need To Learn JavaScript Before React Js?
Undoubtedly. If you don’t know alphabets, then how will you write and send love letters to your valentine? Got That? You have to learn at least the intermediate level of JavaScript to start React Js.
Hey Wait, Do You Know SPA or Single Page Application?
React is a single page application means it will output only one HTML file to the browser of whole of your project.