ReactJS, is an open-source JavaScript library used for building user interfaces (UIs) and user interface components.
It was developed by Facebook and released in 2013. React is particularly popular for building single-page applications.
A Single Page Application (SPA) is a type of web application that operates within a single web page. Unlike traditional multi-page applications
- Reusability
- By using Virtual DOM efficiently updating only the necessary parts of the page.
- Component-Based Architecture
- Complexity in Larger Apps - disadvantage
State and Props:
React components can have both state and props.
State is used for managing dynamic data that can change over time within a component,
while props (short for properties) are used to pass data from a parent component to a child component
Props are read-only.
The state is both read and write.
In conclusion, the main significant difference between states and props is that props are used to transfer data from a parent component to a child whereas states are used to manage the data inside a component itself
DOM - document object model
It is a programming interface that allows us to create, change, or remove elements from the document.
Let's take a look at this HTML code to better understand the DOM tree structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html>
Our
document is called the root node and contains one child node which is the <html> element. The <html> element contains two children which are the <head> and <body> elements
Virtual DOM is a concept used by libraries like React to optimize the process of updating the real DOM.
Performance: Direct manipulation of the DOM can be slow and impact performance, especially with frequent updates. The Virtual DOM minimizes actual DOM manipulations, leading to better performance in React applications.
Efficiency: Virtual DOM updates are optimized to reduce the number of changes needed in the real DOM, resulting in faster and more efficient updates.
Functional Components: Also known as stateless components and they are used for simple components that don't require their own internal state or lifecycle methods.
Hooks (Functional Components): Hooks are functions that allow you to "hook into" React state and lifecycle features from functional components.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Class Components: Class components, also known as stateful components.
Lifecycle Methods (Class Components): Class components have lifecycle methods that allow you to control the behavior of components during different stages of their lifecycle, such as mounting, updating, and unmounting
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
How to setup react project?
npx create-react-app my-react-app
cd my-react-app
npm start
The public folder in a React project serves as the location for static assets that are not processed by the build system. These assets are typically available as-is in the final build and are directly accessible from the root of your application's URL
Favicon , images logo
The src (source) folder in a React project is a central directory where you place the source code of your application. It contains the main codebase that defines the behavior, logic, and user interface of your React application and inside source index.js is entry point.
What is the role of index.html page in React?
In a React application, the index.html file serves as the main HTML template that acts as the entry point for your application and <script src="index.js"></script>
In a React application, the App.js (or sometimes App.jsx) file typically plays a central role as the main component that represents the core of your application's user interface
JSX stands for "JavaScript XML."
It's a syntax extension used in React to describe the structure and content of user interfaces.
JSX allows you to write HTML-like code within your JavaScript code, making it easier to create and visualize component
import React from 'react';
function App() {
const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;
return (
<div>
{greeting}
<p>Welcome to my React app.</p>
</div>
);
}
export default App;
making the process of creating and managing user interfaces more efficient and readable
const elementWithJSX = <h1 className="greeting">Hello, world!</h1>; (Readability
)Is it possible to use JSX without React?
Yes, it is possible to use JSX without React. JSX is a syntax extension that transforms XML-like syntax into JavaScript
Babel: Babel is a popular JavaScript compiler that can transpile modern JavaScript (including JSX) into older versions of JavaScript that are widely supported by browsers. You can set up Babel to transform JSX by configuring it to use the @babel/preset-react preset
FRAGMENT
In React, a fragment is a way to group multiple elements without introducing an extra wrapping element in the DOM
function MyComponent() {
return (
<>
<h1>Title</h1>
<p>Paragraph</p>
</>
);
}
The spread operator (...) is a feature in JavaScript that allows you perform clone ,merge,copy arrary and objects
It's commonly used for copying or combining arrays, objects, or function arguments
Conditional rendering - This is a fundamental concept in React that allows you to control what is displayed to the user based on the current state or props of your components.
- IF Statements
- Conditional Operator (Ternary Operator)
- Logical && Operator
HOC:-
In React, a higher-order component is a function that takes a component as an argument and returns a new component that wraps the original component.
HOCs allow you to add additional functionality to a component without modifying the component's code
import React, { Component } from 'react';
// Higher-Order Component
const withLogger = (WrappedComponent) => {
return class extends Component {
componentDidMount() {
console.log(`Component ${WrappedComponent.name} is mounted.`);
}
render() {
// Pass all props to the wrapped component
return <WrappedComponent {...this.props} />;
}
};
};
// Component to be enhanced with the HOC
class MyComponent extends Component {
render() {
return <div>My Component</div>;
}
}
// Enhance MyComponent with the HOC
const EnhancedComponent = withLogger(MyComponent);
// Usage
function App() {
return (
<div>
<EnhancedComponent />
</div>
);
}
export default App;
