What is React.js?
React.js is a powerful open source JavaScript library used for building interactive UIs and single page applications.
React focuses on the "View" in the Model-View-Controller (MVC) architecture. It provides a declarative and component-based approach to building UIs, making the code more predictable, easier to debug, and maintainable.
Features That Make React Outstanding
1. Component-Based Architecture
- React divides the UI into small, reusable components, allowing developers to build modular applications. Each component has its own logic, state, and styling, which enhances code reusability and scalability.
2. Virtual DOM
- React uses a Virtual DOM to enhance performance. Instead of updating the real DOM directly (which can be slow), React creates a lightweight copy of the DOM, identifies the changes, and updates only the necessary parts of the real DOM. This makes React applications highly efficient.
3. Declarative Syntax
- React's declarative nature allows developers to describe what the UI should look like instead of specifying how to achieve it. React automatically handles the updates to reflect changes in the state or props.
4. JSX (JavaScript XML)
- React uses JSX, a syntax extension that allows developers to write HTML-like code directly in JavaScript. This improves readability and makes it easier to understand the structure of the UI.
5. Unidirectional Data Flow
- React follows a one-way data binding model, meaning data flows from parent components to child components through props. This predictable structure makes debugging and state management straightforward.
6. State Management
- React has a robust state management system. For larger applications, tools like React Context API or external libraries like Redux, MobX, and Zustand can be integrated to manage global states effectively.
7. React Hooks
- Introduced in React 16.8, hooks like
useState,useEffect,useContext, etc., allow developers to use state and lifecycle methods in functional components, making code cleaner and more concise.
8. Cross-Platform Development
- React's ecosystem includes React Native, which allows developers to build cross-platform mobile applications using the same React principles, creating a unified development experience.
9. Extensive Ecosystem
- React has a vast ecosystem, with libraries and tools for routing (React Router), state management, testing, and animation. Its large community ensures regular updates and a wealth of resources.
10. Performance Optimization
- Features like lazy loading, code splitting, and memoization (using
React.memo) help optimize performance for large-scale applications.
11. Community Support
- With React being one of the most popular front-end libraries, it has extensive documentation, numerous tutorials, and active community support, making it beginner-friendly.
12. Backward Compatibility
- React is built with backward compatibility in mind, which minimizes breaking changes and ensures smoother upgrades in projects.
Basics
Create React App
npx create-react-app my-app
cd my-app
npm start
JSX Syntax
const element = <h1>Hello, world!<h1>;
Components
Functional components
function Greeting() {
return <h1>Hello, world!<h1>;
}
//Arrow functions
const Greeting = () => {
return <h1>Hello, world!<h1>;
}
Class components
class Greeting extends React.Component {
render() {
return <h1>Hello, world!<h1>;
}
}
Props (Properties)
Pass data to child components
Immutable in child components
<Greeting name = "John" />
const Greeting = (props) => {
return <h1>Hello, {props.name}<h1>;
}
State
Manages dynamic data within a component
Use useState in functional components
const [count, setCount] = useState(0);
Lifecycle methods
componentDidMount(); Called after the component mounts
componentDidUpdate(): Called after updates
componentWillUnmount(): Called before unmounting
React hooks
useState: State management
useEffect: Side effects (e.g API calls)
useContext: Global state management.
useEffect(() => {
//Fetch data or other side effects i.e subscribtions
}, []);
Conditional Rendering
Render based on conditions using if ternary operators
{ isLoggedIn ? <Dashboard /> : <Login /> }
Event Handling
Handle user inputs like clicks
const handleClick = () => {
//handle button licks here
}
<button onClick={ handleClick }> ClickMe </button>