Hello All
Starting My React Journey: Why and How I’m Diving Into Frontend Development
I will keep writing about my learning journey like whatever I will learn which can be included
Notes
Shortcodes ( snippets )
Roadmap that i will follow
Youtube video channels.
and most important what is real use of particular features of react js
So what is ReactJS?
React is a JavaScript library created by Facebook that makes building user interfaces (UIs) for websites and apps easier.
When it comes to ReactJS there are some terminologies the words are linked to that
Babel compiler
React fiber
DOM vs Virtual DOM
I will write about what I got to know and what I understood.
1 ) Babel Compiler
Babel is a JavaScript compiler that translates modern JavaScript and JSX into browser-compatible code because browsers don’t understand JSX. Babel transforms JSX into plain JavaScript that React can interpret
2 ) React Fiber
React Fiber is the re-implementation of the core algorithm for the Reacts rendering engine. It is designed to improve how React updates the Virtual DOM and efficiently manages updates to the real DOM.
Before React Fiber, React used an older algorithm called the "Reconciliation algorithm", which was synchronous and blocked the UI from being responsive. With Fiber, React can now break rendering work into units, which can be paused and resumed, leading to smoother user interactions. make it simple but shorter
3 ) Real DOM VS VDOM
Real DOM is the actual structure represented in the User Interface
A virtual DOM object is the same as a real DOM object, except that it is a Lightweight copy.
Virtual DOM is a concept used by modern frameworks like React to optimize the rendering process
How Does the Virtual DOM Work?
The Virtual DOM creates an in-memory representation of the Real DOM, allowing developers to make changes without directly affecting the actual page. Here’s how it works:
Virtual DOM Creation: When the application state changes, the Virtual DOM creates a new virtual tree.
Diffing Algorithm: The new Virtual DOM tree is compared with the previous version, and the differences (known as “diffs”) are calculated.
Batch Updates: Instead of updating the entire Real DOM, only the nodes that have changed are updated, leading to faster rendering.
Table format difference
| Real DOM | Virtual DOM |
| Real DOM represents the actual structure of the webpage. | Virtual DOM represents the virtual/memory representation of the Webpage. |
| DOM manipulation is very expensive | DOM manipulation is very easy |
| There is too much memory wastage | No memory wastage |
| It updates Slow | It updates fast |
| It can directly update HTML | It can’t update HTML directly |
| Creates a new DOM if the element updates. | Update the JSX if the element update |
| It allows us to directly target any specific | |
| node (HTML element) | It can produce about 200,000 Virtual DOM |
| Nodes / Second. | |
| It represents the Ul of your application | It is only a virtual representation of the DOM |
When it comes to setup of react JS
first you should have NodeJS installed in your Machine.
You might be wondering why it’s needed.
Because
Node.js allows you to use npm (Node Package Manager) or yarn to manage the libraries and dependencies required for React projects.
React projects often use build tools like Webpack, Babel, or other bundlers to transpile JSX and modern JavaScript syntax into code that browsers can understand. These tools are typically written in JavaScript and run in a Node.js environment.
Node.js is essential for a smooth and modern React development experience, enabling tools and workflows that make it easier to build, test, and deploy React apps efficiently.
you can download from this link
For step-by-step installation process you can go throgh this Youtube VIdeo
When it comes to styling you can go With Vanila css also but Tailwindcss is better choice for CSS
You can use vanilla CSS for styling, which gives you complete control over your styles. However, Tailwind CSS is often considered a better choice for modern development due to its efficiency and utility-first approach.
| Aspect | Vanilla CSS | Tailwind CSS |
| Customization | Full control over styles from scratch. | Predefined utility classes, customizable via configuration. |
| Efficiency | Writing styles can be repetitive and time-consuming. | Faster styling with reusable, pre-built utility classes. |
| Scalability | Managing large stylesheets becomes challenging in big projects. | Ensures consistency and scalability with utility-first design. |
- A step-by-step process for installation of ReactJS with the help of Tailwindcss Documentation
- or else you can refer this video as well