Lesson 3 - What is ReactJS - How it Works
PreviousLesson 2 - Motivation for Using React as the Solution to Vanilla JSNextReact Code Along from Scratch
Last updated
Last updated
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.
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.
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.
Components: You define components as JavaScript functions that return JSX elements. These components can be nested and combined to create the entire UI.
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.
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: 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.
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.
