What is React | Lecture 09 | React.JS 🔥

Summary

React, a popular JavaScript library created by Facebook, is known for building user interfaces through a component-based design. It utilizes JSX, a declarative syntax, to describe components and keep the UI in sync with state changes. React's state-driven nature allows it to automatically re-render the UI, reflecting the latest state. Despite being a library, not a full framework, it has spawned frameworks like Next.js and Remix. Its widespread adoption by major companies and a thriving community make React a sought-after skill in the job market, with a rich ecosystem of third-party libraries and tools.

Takeaways

• 📚 React is a JavaScript library for building user interfaces, originally created by Facebook.
• 🧱 It is a component-based design system, where components like buttons and input fields are the building blocks of UIs.
• 🔄 Components can be reused and combined, similar to LEGO pieces, to construct complex user interfaces.
• 📈 React utilizes JSX, a declarative syntax that combines HTML, CSS, and JavaScript, to describe components and UIs.
• 🌐 React abstracts the DOM, allowing developers to focus on what should happen rather than how to implement it.
• 🔄 State-driven: React keeps the UI in sync with the current state, re-rendering the UI when state changes.
• 📊 React is extremely popular, with the highest weekly download numbers among similar frameworks, indicating a strong job market for React developers.
• 🌐 A large and active React developer community provides extensive support, tutorials, and a wealth of third-party libraries.
• 🛠️ React is not a full-fledged framework but a library; complete applications often use additional libraries like Next.js or Remix.
• 🏢 Created by Facebook in 2011 and open-sourced in 2013, React has been adopted by many large companies and has influenced the development of other modern frameworks.

Q & A

What is React according to the official documentation?

According to the official documentation, React is a JavaScript library for building user interfaces.

How can the definition of React be extended to be more helpful?

React can be described as an extremely popular, declarative, component-based, state-driven JavaScript library for building user interfaces, created by Facebook.

What does component-based design mean in React?

Component-based design in React means that the user interface is built using components such as buttons, input fields, and search bars, which are the building blocks and can be combined like LEGO pieces to create complex UIs.

How does React facilitate the reusability of components?

React allows components to be reused by creating them once and then using them multiple times with slightly adjusted data, as seen in the example of a listing component reused in a results panel.

What is JSX and how is it used in React?

JSX is a special declarative syntax used in React that combines parts of HTML, CSS, and JavaScript. It allows developers to describe what components should look like and how they work based on the current state.

How does React differ from working directly with the DOM in vanilla JavaScript?

React abstracts the DOM, so developers never have to work with the DOM directly. Instead, they tell React what they want to happen when data changes, without specifying how to do it.

What is the role of state in updating the UI in React?

State in React is the data that keeps the UI in sync. When the state changes, React automatically re-renders the user interface to reflect the latest state, effectively reacting to state changes.

Is React a framework or just a library?

React is actually just a library, not a full-fledged framework. It represents the view layer, and to build a complete application, developers need to integrate multiple external libraries for functionalities like routing and data fetching.

Why is React so popular among developers and companies?

React is popular because it is backed by Facebook (now Meta), has a large and active developer community, offers high demand for qualified developers in the job market, and has a vast third-party library ecosystem.

Who created React and when was it first used?

React was created in 2011 by Jordan Walke, an engineer at Facebook. It was first used on Facebook's newsfeed and chat app, and later open-sourced in 2013.

What are some of the techniques employed by React to keep the UI in sync with state?

React uses techniques such as a virtual DOM, a Fiber tree, and one-way data flow to efficiently update the UI in response to state changes.