Code Journey
React JS

React JS.

React Js is a javascript library open source. Used to build Single Page Applications. It is developed by meta and is used extensively by developers and companies worldwide to create dynamic single page applications (SPAs).

React is built around a component-based architecture. This enables developers to create reusable UI components, making applications easier to develop, maintain and scale.

React uses a Virtual DOM, which allows it to update only the parts of the user interface that have changed, instead of updating the entire webpage. This leads to improved performance and a more seamless user experience.

Core Concepts & JSX

2 Topics

Core Concepts & JSX

// JSX — what you write
const element = (
  <div className="card">
    <h1>Hello, {name}!</h1>
    <p style={{ color: 'teal' }}>Welcome</p>
  </div>
);

// Transpiled — what the browser sees
const element = React.createElement(
  'div', { className: 'card' },
  React.createElement('h1', null, `Hello, ${name}!`),
  React.createElement('p', { style: { color: 'teal' } }, 'Welcome')
);

React Fragment

// Long syntax

return (
<React.Fragment>
    <h1>Title</h1>
    <p>Paragraph</p>
</React.Fragment>
);

// Short syntax (no key prop support)
return (
<>
    <h1>Title</h1>
    <p>Paragraph</p>
</>
);

Components — Functional & Class

2 Topics

Functional Component (Modern Standard)

function Welcome() {
  return <h1>Hello World</h1>;
}

export default Welcome;

Class Component (Legacy — still valid)

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

export default Welcome;

Props & PropTypes

State Management

Essential Hooks

Advanced Hooks

Event Handling

Lists, Keys & Conditional Rendering

Forms & Controlled Components

React Router (v6)

Context API

useReducer & Complex State

Performance Optimization

Error Boundaries

Refs & the DOM

Higher-Order Components & Render Props

Custom Hooks

Code Splitting & Lazy Loading

Portals

Testing React Components