React JS Tutorial

React JS

React JS also known as React is an open source JavaScript library used for building user interfaces. React was developed by Facebook (now Meta) in 2013. Since then, React is one of the most popular JavaScript Library. React simplifies DOM manipulation by dividing code into reusable components and also to make a Single Page Application.

React is not a full fledge framework like Angular or Vue JS. It simply focus on the UI Layer. This makes React lightweight, flexible and easy to use with others libraries or frameworks.

React is also among the top web frameworks and technologies on Stack Overflow Surveys. Node JS, React, jQuery, Next.js, Express, and Angular are among the top web frameworks and technologies in 2024 Surveys.

React can also be used to build mobile application by using React native.

Why to learn React JS?

React JS is mainly used to build Single Page Application. In a Single Page Application, the website loads data from the server without refreshing the entire page and updating the DOM. React makes it very easy.

React use Components to build user interface. Components are self-contained, logical pieces of code that describe a part of the user interface, like header, footer, nav, card etc. We can combine components to create full User Interface.

Also React use Virtual DOM. Virtual DOM is quite efficient as compared to Real DOM. It checks the required changes and applies them efficiently.

React Use JSX (JavaScript + XML), an HTML like code written inside javascript.

Prerequisite for React JS

Before starting React JS, you should be proficient in following technologies. Remember, React is a UI library for frontend development. You cannot start React directly without core fundamentals.

HTML & CSS

React JS is UI library, so to build UI, a candidate must knows HTML and CSS in depth. All advanced topics like Semantic HTML, HTML5, Web Accessibility, and advanced CSS including Grids, Flexbox must be known to the candidate before starting React JS.

JavaScript with ES6

React is a JavaScript library, so to learn React JS, strong knowledge of JavaScript is must.

1. variables, data types, operators
2. Function, Scope, Closure, callback
3. Conditions and Loops
4. Arrays, Objects, Map and Sets
5. DOM and Events
6. Classes
7. Promises
8. Async Await
9. Modules
10. Other ES6 Features

Code Editor Setup, VS Code

VS Code is the recommended Code Editor for React. It is open source and cross platform. It also comes with features like intellisense, terminal, git integration, AI Tools required for development.

Here are some VS Code Extensions required for React.

1. Prettier (format on save)
2. ES Lint
3. React Developer Tools (Browser extension)

Whats new in React 19

The latest version of React is React 19. It includes latest features and updates.

1. React Server Components
2. Async Script and API
3. Actions API (forms, async)
4. Improved Strict Mode
5. Ref handling
6. Metadata (title, meta tags)
7. Performance & hydration

React VS Angular Vs Vue

React JS is the most popular library of javascript. In fact, React has gained popularity since 2019, surpassing Angular and Vue.

Here is a comparative analysis of React Angular and Vue.