# Lesson 3 - What is ReactJS - How it Works
## **What is React JS?**
* **Open-source JavaScript Library:** React is a powerful open-source JavaScript library developed by Facebook. It's designed for building user interfaces, particularly for single-page applications (SPAs) that require fast and interactive user experiences.
### **Core Concepts**
* **Declarative:** React emphasizes a declarative approach to UI development. You describe what the UI should look like, and React takes care of how to efficiently render and update it.
* **Component-Based:** React encourages breaking down the UI into reusable components. Each component is like a self-contained unit with its own state and logic, making it easier to manage and maintain complex UIs.
### **Building with React JS**
1. **JSX:** React uses JSX, a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files. This makes it easier to structure and visualize the UI.
2. **Components:** You define components as JavaScript functions that return JSX elements. These components can be nested and combined to create the entire UI.
3. **State and Props****:**
* **State:** Manages the internal data of a component. When state changes, React re-renders the component to reflect the updates.
* **Props:** Allow you to pass data from parent components to child components.
4. **Virtual DOM:** React maintains a virtual representation of the actual DOM. When data changes, React compares the virtual DOM with the actual DOM and efficiently updates only the necessary parts.
### **Framework and Reusability**
* **Framework:** React is often described as a library rather than a full-fledged framework. However, it provides a foundation for building complex applications. You can use it with other libraries and tools to create a complete framework-like experience.
* **Reusability:** Components are highly reusable. You can create **custom components** and reuse them throughout your application or even share them across projects. This promotes code organization and reduces redundancy.
**Web Structure and Component-Based Design**
* **Modular Structure:** React's component-based approach encourages breaking down the UI into small, manageable pieces. This modular structure makes it easier to understand, test, and maintain the application.
* **Structuring and Destructuring:** You can use JavaScript's *destructuring* assignment to extract properties from objects or arrays, making your component code more concise and readable.
### **In Summary**
React provides a powerful and flexible foundation for building dynamic state changes and interactive user interfaces(UI) and good at keeping Data ,UI, and sync. Its declarative nature, component-based architecture, and efficient rendering (i.e., re-rendering is done only what needs to be re-rendered) make it a popular choice for modern web development.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://reactjs.koida.tech/react-fundamentals/lesson-3-what-is-reactjs-how-it-works.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.