Index

• What is React?

• Why use React?

• Useful in 2024?

• How can you get started?

• Imperative vs declarative

• What is reconciliation in React?

• What is JSX?

---

What is react? 🤨

React is a javascript library that allows you to build user interfaces for the web. They also have React Native which is dedicated to make Mobile UI using the same technology concepts and language. In react you can write your components which form a very small part of the web application which can grow as you add more components to it. So one component can have many other components. For example: You can have many small box which are placed inside another big box. But its all boxes which will hold something. But what do they hold? In this case React components hold other React components which have a certain individual feature.

Why use react? 🧐

Earlier if you wanted to build a website you had to write your html markup, css and Js in separate files, so if you has to look up any piece of code you had to spent a lot of time looking up code and matching snippets. Match html to css classes and then to the javascript functions and this took a lot of time.

Then some really smart people at facebook decided to do something else. They thought wouldnt it be great if you just write a specific piece of html and write all the javascript code in the same file. That you wont have to play matchup every time you come back to your code after a break.

Useful in 2024?

React is the easily one of the most common library if not the most common. But does that mean, it means if more code is written is React then there will be more demand of developers who know how to code in React, why? cause they need to maintain existing projects and to build new features as well. React is used in companies like Netflix, Instagram and Facebook. Also React is the starting point if you want to learn new technology like Nextjs which is the Framework for React.

According to Stackoverflow survey:
Node.js and React.js are the two most common web technologies used by all respondents.

Link to survey results.

How can you get started in react?

Create-react-app is one of the most used ways to get started with react development. Other than getting started guide it has many useful guides that will help you with development, deployment and good practices.

Alternatively you can also you use tooling like Vite which is a frontend tool that will help you get started with React faster. My personal tip would be to learn about react development from create-react-app and then use Vite tool for faster builds and development. Lets look at some of the concepts of React.

Imperative vs declarative

Imperative means giving a command. So imperative coding is when you give straight out commands like do this and then do that. Declarative is another word which means to state facts like: I like ice-cream or The colour of your shirt is red.

In context of react, you used to write imperative code in Javascript and tell the browser do this when some condition is met. But when writing react code you take a more declarative approach like instead of writing exactly what the code should be doing you what should the User interface look like based on a certain state. You can learn more about react declarative programming here.

What is reconciliation in react?

Reconciliation is a fancy term to say that the Document Object Model or DOM and the virtual DOM will check if all the changes made in the virtual DOM are implemented. So when the DOM is updated it is said that react has done reconciliation. The virtual DOM is made by the React library and the actual DOM holds all the HTML nodes. What to know more ? Check this out.

What is JSX?

JSX is a syntax extension in Javascript that enables you to write HTML in Javascript. It gives the ability to write HTML-like syntax and one of key feature to make development in React so better by bringing this two technologies together in one place.

Summary

React is a JavaScript library for building web and mobile user interfaces, offering a more efficient way to write code compared to traditional methods. It is widely used in the industry and essential for developers looking to stay current. Key concepts include imperative vs declarative coding, reconciliation in the virtual DOM, and JSX syntax for combining HTML and JavaScript. Recommended resources for learning React include official documentation, tutorial videos, and additional reading material.

That is all for this blog see you in the next. DO COMMENT and let me know if you would like a detailed blog on any topic. 🥳

---

Some great resources for Learning React would be:

React official Docs.

Videos : Web Dev simplified, Traversy Media

Extra reading:

https://www.linkedin.com/pulse/reactjs-2023-predictions-2024-react-poland-gthef/