This course is designed to introduce you to the core concepts of React.js, one of the most popular JavaScript libraries for building user interfaces. You’ll learn step by step how to create dynamic web applications with components, manage state, and build modern, fast, and responsive web apps.

Task Management App

E-commerce Storefront

Weather App

Recipe Finder

Blog Platform

Social Media Dashboard

Expense Tracker

Chat Application

Portfolio Website

Quiz Application

Movie Search App

Fitness Tracker

Notes App

Job Board

Music Player

Travel Blog

E-learning Platform

Photo Gallery

Personal Budget App

Language Learning App

<h1>Introduction to React.js</h1><p>React.js is a JavaScript library used for building user interfaces, primarily for single-page applications. It enables developers to create reusable components that can efficiently update and render the UI. React was developed by Facebook and has become one of the most popular front-end libraries.</p><h2>Why Use React?</h2><p>React makes it easier to manage complex UIs, offers excellent performance, and integrates well with other libraries and frameworks. Some reasons to use React include:</p><ul><li>Component-Based Architecture: Breaks the UI into smaller, reusable pieces.</li><li>Virtual DOM: Efficiently updates only the parts of the page that have changed.</li><li>JSX: A syntax extension for JavaScript that allows HTML-like code within JavaScript.</li><li>Strong Community and Ecosystem: With a large developer base and rich tooling support.</li></ul><h2>Setting Up React</h2><p>You can set up a new React project using <code>create-react-app</code> or <code>Vite</code>. This will install the necessary tools and set up your project structure.</p><pre><code class='language-bash'>npx create-react-app my-app
cd my-app
npm start</code></pre>

Introduction to React.js

<h1>JSX and Rendering Elements</h1><p>JSX (JavaScript XML) is a syntax extension for JavaScript, allowing you to write HTML-like code directly within JavaScript files. While JSX looks like HTML, it is compiled into regular JavaScript at runtime. React uses JSX to render UI components.</p><h2>Basic JSX Example:</h2><pre><code class='language-jsx'>const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;;
ReactDOM.render(element, document.getElementById('root'));</code></pre><p>This JSX code is converted into:</p><pre><code class='language-javascript'>const element = React.createElement('h1', null, 'Hello, world!');</code></pre><h2>Embedding Expressions in JSX:</h2><p>JSX allows embedding any JavaScript expression inside curly braces. You can use variables, function calls, or even JSX inside expressions.</p><pre><code class='language-jsx'>const name = 'John';
const element = &lt;h1&gt;Hello, {name}!&lt;/h1&gt;;</code></pre><h2>Rendering Multiple Elements:</h2><p>In React, multiple elements can be rendered by wrapping them inside a parent element or React.Fragment:</p><pre><code class='language-jsx'>&lt;div&gt;
  &lt;h1&gt;Hello&lt;/h1&gt;
  &lt;h2&gt;Welcome to React&lt;/h2&gt;
&lt;/div&gt;</code></pre>

JSX and Rendering Elements

<h1>Components and Props</h1><p>Components are the building blocks of a React application. They allow you to break down complex UIs into smaller, reusable pieces. There are two types of components in React: Functional Components and Class Components.</p><h2>Functional Components</h2><p>Functional components are simple functions that return JSX. They are the recommended way to create components in modern React.</p><pre><code class='language-jsx'>function Welcome(props) {
  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
}</code></pre><h2>Class Components</h2><p>Class components were commonly used before React hooks were introduced. These components extend from the <code>React.Component</code> class and have access to lifecycle methods.</p><pre><code class='language-jsx'>class Welcome extends React.Component {
  render() {
    return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt;;
  }
}</code></pre><h2>Using Props</h2><p>Props are inputs to components that allow data to be passed from parent to child components. They are read-only and cannot be modified by the component itself.</p><pre><code class='language-jsx'>&lt;Welcome name='John' /&gt;</code></pre>

Components and Props

<h1>State and Lifecycle</h1><p>State is an object managed within a component that stores dynamic data. Unlike props, which are passed down from parent components, state is managed locally and can be changed over time. React components re-render whenever state changes.</p><h2>Using State in Functional Components:</h2><p>React provides the <code>useState</code> hook to manage state in functional components.</p><pre><code class='language-jsx'>import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count + 1)}>Increment</button>
 </div>
 );
}</code></pre><h2>Class Components and State:</h2><p>In class components, state is managed using the <code>this.state</code> object, and updated using <code>this.setState()</code>.</p><pre><code class='language-jsx'>class Clock extends React.Component {
 constructor(props) {
 super(props);
 this.state = { date: new Date() };
 }

 componentDidMount() {
 this.timerID = setInterval(
 () => this.tick(),
 1000
 );
 }

 componentWillUnmount() {
 clearInterval(this.timerID);
 }

 tick() {
 this.setState({ date: new Date() });
 }

 render() {
 return (
 <div>
 <h2>It is {this.state.date.toLocaleTimeString()}</h2>
 </div>
 );
 }
}</code></pre><h2>Lifecycle Methods:</h2><p>Class components in React have several lifecycle methods, such as:</p><ul><li><code>componentDidMount()</code>: Invoked after the component is rendered for the first time.</li><li><code>componentDidUpdate()</code>: Called when the component updates due to state or prop changes.</li><li><code>componentWillUnmount()</code>: Called before the component is removed from the DOM.</li></ul>

State and Lifecycle

<h1>Handling Events in React</h1><p>Handling events in React is similar to handling events in plain JavaScript. However, React uses camelCase for event names (e.g., <code>onClick</code> instead of <code>onclick</code>), and you pass a function as the event handler rather than a string.</p><h2>Example of Handling Events:</h2><pre><code class='language-jsx'>function Button() {
 function handleClick() {
 alert('Button was clicked!');
 }

 return (
 <button onClick={handleClick}>
 Click me
 </button>
 );
}</code></pre><h2>Passing Arguments to Event Handlers:</h2><p>If you need to pass an argument to the event handler, you can do so by wrapping the function in an arrow function.</p><pre><code class='language-jsx'>function Button() {
 function handleClick(id) {
 alert('Button ' + id + ' was clicked!');
 }

 return (
 <button onClick={() => handleClick(1)}>
 Click me
 </button>
 );
}</code></pre>

Handling Events in React

<h1>Conditional Rendering in React</h1><p>Conditional rendering in React works similarly to conditional statements in JavaScript. It allows you to create different UI outputs based on certain conditions.</p><h2>Using <code>if</code> Statements:</h2><p>React can render different components depending on the value of a condition using <code>if</code> statements.</p><pre><code class='language-jsx'>function UserGreeting(props) {
  return &lt;h1&gt;Welcome back!&lt;/h1&gt;;
}

function GuestGreeting(props) {
  return &lt;h1&gt;Please sign up.&lt;/h1&gt;;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return &lt;UserGreeting /&gt;;
  }
  return &lt;GuestGreeting /&gt;;
}</code></pre><h2>Using Ternary Operators:</h2><p>For simpler conditions, you can use the ternary operator for inline conditional rendering.</p><pre><code class='language-jsx'>const isLoggedIn = true;
const button = isLoggedIn ? &lt;LogoutButton /&gt; : &lt;LoginButton /&gt;;</code></pre><h2>Rendering Null:</h2><p>If you want to prevent a component from rendering at all, you can return <code>null</code> instead of JSX.</p><pre><code class='language-jsx'>function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return &lt;div className='warning'&gt;
    Warning!
  &lt;/div&gt;;
}</code></pre>

Conditional Rendering in React

<h1>Lists and Keys in React</h1><p>Rendering lists of data is a common task in React applications. React uses JavaScript’s <code>map()</code> function to loop through arrays and render elements.</p><h2>Rendering a List:</h2><pre><code class='language-jsx'>const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  &lt;li key={number.toString()}&gt;{number}&lt;/li&gt;
);
return &lt;ul&gt;{listItems}&lt;/ul&gt;;</code></pre><h2>Why Keys are Important:</h2><p>Keys help React identify which items have changed, been added, or removed. They should be unique among siblings but don’t need to be globally unique.</p><h2>Using Keys in Lists:</h2><pre><code class='language-jsx'>const todoItems = todos.map((todo) =&gt;
  &lt;li key={todo.id}&gt;{todo.text}&lt;/li&gt;
);</code></pre><p>Always use a stable and unique key such as an ID rather than an index, to avoid issues when reordering items.</p>

Lists and Keys in React

<h1>Forms in React</h1><p>Handling forms in React involves managing form inputs with controlled components, which means React controls the form data rather than the DOM.</p><h2>Controlled Components:</h2><p>A controlled component is a form element whose value is controlled by React state. This requires setting up event handlers to update the state as the user interacts with the form.</p><pre><code class='language-jsx'>class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;label&gt;
          Name:
          &lt;input type='text' value={this.state.value} onChange={this.handleChange} /&gt;
        &lt;/label&gt;
        &lt;button type='submit'&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    );
  }
}</code></pre><h2>Handling Multiple Inputs:</h2><p>When dealing with multiple inputs, you can add a <code>name</code> attribute to each input element, allowing you to use the same event handler for all inputs.</p><pre><code class='language-jsx'>handleChange(event) {
  const name = event.target.name;
  const value = event.target.value;
  this.setState({ [name]: value });
}</code></pre><h2>Uncontrolled Components:</h2><p>Uncontrolled components allow the DOM to control the form data. In these cases, React is used only to retrieve the input value when needed via refs.</p><pre><code class='language-jsx'>const nameRef = React.createRef();

function handleSubmit(event) {
  alert('Name: ' + nameRef.current.value);
  event.preventDefault();
}

&lt;form onSubmit={handleSubmit}&gt;
  &lt;input type='text' ref={nameRef} /&gt;
  &lt;button type='submit'&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre>

Forms in React

<h4><strong>Description:</strong></h4>
<p>In this project, you will build a simple <strong>To-Do List application</strong> where users can add tasks, mark them as complete, and remove them. This project will help solidify your understanding of <strong>state</strong>, <strong>forms</strong>, <strong>event handling</strong>, and <strong>conditional rendering</strong> in React.</p>
<hr>
<h4><strong>Part 1: Set Up the Application</strong></h4>
<ul>
    <li><strong>Exercise:</strong>
        <ul>
            <li>Create a new React app using <code>create-react-app</code> and set up the basic structure for a To-Do List application.</li>
            <li>You will need a simple input form where users can type a task and a button to submit the task.</li>
        </ul>
    </li>
</ul>
<pre><div><div>
</div><div><div>
</div></div><div><code>npx create-react-app todo-list
cd todo-list
npm start
</code></div></div></pre>
<ul>
    <li><strong>Hints:</strong>
        <ul>
            <li>Use the <code>&lt;input&gt;</code> element for task input and a <code>&lt;button&gt;</code> to add tasks.</li>
            <li>Manage the task input using the <code>useState</code> hook.</li>
        </ul>
    </li>
    <li><strong>Solution:</strong></li>
</ul>
<pre><div><div>
</div><div><div>
</div></div><div><code>import React, { useState } from &apos;react&apos;;

function TodoApp() {
  const [task, setTask] = useState(&apos;&apos;);

  const handleInputChange = (event) =&gt; {
    setTask(event.target.value);
  };

  return (
    &lt;div&gt;
      &lt;h1&gt;To-Do List&lt;/h1&gt;
      &lt;input 
        type=&quot;text&quot; 
        value={task} 
        onChange={handleInputChange} 
        placeholder=&quot;Enter a task&quot;
      /&gt;
      &lt;button&gt;Add Task&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default TodoApp;
</code></div></div></pre>
<hr>
<h4><strong>Part 2: Add Tasks to the List</strong></h4>
<ul>
    <li>
        <p><strong>Exercise:</strong></p>
        <ul>
            <li>Create functionality to add tasks to a list. When the user enters a task and clicks &quot;Add Task,&quot; the task should appear below the input form in a list.</li>
        </ul>
    </li>
    <li>
        <p><strong>Hints:</strong></p>
        <ul>
            <li>Use an array to store the tasks in the state.</li>
            <li>Map through the array to render the list of tasks in the UI.</li>
        </ul>
    </li>
    <li>
        <p><strong>Solution:</strong></p>
    </li>
</ul>
<pre><div><div>
</div><div><div>
</div></div><div><code>function TodoApp() {
  const [task, setTask] = useState(&apos;&apos;);
  const [tasks, setTasks] = useState([]);

  const handleInputChange = (event) =&gt; {
    setTask(event.target.value);
  };

  const addTask = () =&gt; {
    if (task) {
      setTasks([...tasks, task]);
      setTask(&apos;&apos;); // clear input field
    }
  };

  return (
    &lt;div&gt;
      &lt;h1&gt;To-Do List&lt;/h1&gt;
      &lt;input 
        type=&quot;text&quot; 
        value={task} 
        onChange={handleInputChange} 
        placeholder=&quot;Enter a task&quot;
      /&gt;
      &lt;button onClick={addTask}&gt;Add Task&lt;/button&gt;

      &lt;ul&gt;
        {tasks.map((item, index) =&gt; (
          &lt;li key={index}&gt;{item}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}
</code></div></div></pre>
<hr>
<h4><strong>Part 3: Mark Tasks as Complete</strong></h4>
<ul>
    <li>
        <p><strong>Exercise:</strong></p>
        <ul>
            <li>Add functionality to mark tasks as complete or incomplete when clicked. Use <strong>conditional rendering</strong> to strike through completed tasks.</li>
        </ul>
    </li>
    <li>
        <p><strong>Hints:</strong></p>
        <ul>
            <li>You can store an additional boolean flag in each task object (e.g., <code>completed: false</code>) to track the completion status.</li>
        </ul>
    </li>
    <li>
        <p><strong>Solution:</strong></p>
    </li>
</ul>
<pre><div><div>jsx</div><div><div></div></div><div><code>function TodoApp() {
  const [task, setTask] = useState(&apos;&apos;);
  const [tasks, setTasks] = useState([]);

  const addTask = () =&gt; {
    if (task) {
      setTasks([...tasks, { text: task, completed: false }]);
      setTask(&apos;&apos;);
    }
  };

  const toggleTaskCompletion = (index) =&gt; {
    const newTasks = tasks.map((item, idx) =&gt;
      idx === index ? { ...item, completed: !item.completed } : item
    );
    setTasks(newTasks);
  };

  return (
    &lt;div&gt;
      &lt;h1&gt;To-Do List&lt;/h1&gt;
      &lt;input
        type=&quot;text&quot;
        value={task}
        onChange={(e) =&gt; setTask(e.target.value)}
        placeholder=&quot;Enter a task&quot;
      /&gt;
      &lt;button onClick={addTask}&gt;Add Task&lt;/button&gt;

      &lt;ul&gt;
        {tasks.map((item, index) =&gt; (
          &lt;li
            key={index}
            onClick={() =&gt; toggleTaskCompletion(index)}
            style={{
              textDecoration: item.completed ? &apos;line-through&apos; : &apos;none&apos;,
              cursor: &apos;pointer&apos;,
            }}
          &gt;
            {item.text}
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}</code></div></div></pre>

To-Do List Project

<p>React Router is a powerful library that enables routing in React applications, allowing you to navigate between different components and pages without reloading the entire application. It is particularly useful for single-page applications (SPAs) where you want to maintain the app&apos;s state and user experience.</p>
<h3>Key Features of React Router</h3>
<ol>
    <li><strong>Declarative Routing</strong>: Define routes in your components, making it easy to manage and understand.</li>
    <li><strong>Nested Routing</strong>: Allows you to nest routes for more complex layouts.</li>
    <li><strong>Dynamic Routing</strong>: Routes can change based on the application state or user input.</li>
    <li><strong>Route Parameters</strong>: Capture and use dynamic values in the URL.</li>
</ol>
<h3>Basic Setup</h3>
<p>To use React Router, you first need to install it:</p>
<pre><div><div>
</div><div><code>npm install react-router-dom
</code></div></div></pre>
<h3>Example of React Router</h3>
<p>Here&apos;s a simple example of using React Router in a React application.</p>
<h4>1. Setting Up Routes</h4>
<p>In your main application file (usually <code>App.js</code>), import the necessary components from <code>react-router-dom</code> and define your routes.</p>
<pre><div><div></div><div><code>import React from &apos;react&apos;;
import { BrowserRouter as Router, Route, Switch, Link } from &apos;react-router-dom&apos;;

const Home = () =&gt; &lt;h2&gt;Home Page&lt;/h2&gt;;
const About = () =&gt; &lt;h2&gt;About Page&lt;/h2&gt;;
const Contact = () =&gt; &lt;h2&gt;Contact Page&lt;/h2&gt;;

const App = () =&gt; {
  return (
    &lt;Router&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/contact&quot;&gt;Contact&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;

      &lt;Switch&gt;
        &lt;Route path=&quot;/about&quot;&gt;
          &lt;About /&gt;
        &lt;/Route&gt;
        &lt;Route path=&quot;/contact&quot;&gt;
          &lt;Contact /&gt;
        &lt;/Route&gt;
        &lt;Route path=&quot;/&quot;&gt;
          &lt;Home /&gt;
        &lt;/Route&gt;
      &lt;/Switch&gt;
    &lt;/Router&gt;
  );
};

export default App;
</code></div></div></pre>
<h4>2. Explanation of Code</h4>
<ul>
    <li><strong>Router</strong>: Wraps your application and provides the routing functionality.</li>
    <li><strong>Link</strong>: Used to create navigation links that update the URL without refreshing the page.</li>
    <li><strong>Route</strong>: Defines a path and the component to render when the path matches the current URL.</li>
    <li><strong>Switch</strong>: Renders the first <code>&lt;Route&gt;</code> that matches the current URL. This is useful for ensuring only one route is rendered at a time.</li>
</ul>
<h3>3. Nested Routes Example</h3>
<p>You can also create nested routes for more complex applications. Here&rsquo;s how you can implement it:</p>
<pre><div><div>
</div><div><code>const User = ({ match }) =&gt; (
  &lt;div&gt;
    &lt;h2&gt;User {match.params.id}&lt;/h2&gt;
    &lt;Switch&gt;
      &lt;Route path={`${match.path}/profile`} component={UserProfile} /&gt;
      &lt;Route path={`${match.path}/settings`} component={UserSettings} /&gt;
    &lt;/Switch&gt;
  &lt;/div&gt;
);

const App = () =&gt; {
  return (
    &lt;Router&gt;
      &lt;nav&gt;
        &lt;Link to=&quot;/user/1/profile&quot;&gt;Profile&lt;/Link&gt;
        &lt;Link to=&quot;/user/1/settings&quot;&gt;Settings&lt;/Link&gt;
      &lt;/nav&gt;

      &lt;Route path=&quot;/user/:id&quot; component={User} /&gt;
    &lt;/Router&gt;
  );
};
</code></div></div></pre>
<h3>4. Dynamic Routing Example</h3>
<p>Dynamic routing allows you to pass parameters in the URL. Here&apos;s a quick example:</p>
<pre><div><div>
</div><div><code>const User = ({ match }) =&gt; {
  return &lt;h2&gt;User ID: {match.params.id}&lt;/h2&gt;;
};

const App = () =&gt; {
  return (
    &lt;Router&gt;
      &lt;Route path=&quot;/user/:id&quot; component={User} /&gt;
    &lt;/Router&gt;
  );
};
</code></div></div></pre>
<p>In this example, when you navigate to <code>/user/123</code>, the <code>User</code> component will display &quot;User ID: 123&quot;.</p>
<h3>Conclusion</h3>
<p>React Router is an essential library for any React application that requires navigation between different views. With its declarative approach, dynamic routing capabilities, and support for nested routes, it allows developers to create complex single-page applications with ease.</p>

React Router Basics

<h1>useState Hook</h1><p>The <code>useState</code> hook is a fundamental hook in React that lets you add state to functional components. It returns an array with two elements: the current state and a function to update that state.</p><h2>Using useState:</h2><pre><code class='language-jsx'>import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() => setCount(count + 1)}&gt;
        Click me
      &lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><h2>Initial State:</h2><p>The initial state value passed to <code>useState</code> is only used during the first render. In subsequent renders, the state remains persistent.</p><pre><code class='language-jsx'>const [count, setCount] = useState(0);</code></pre><h2>Updating State:</h2><p>You can update the state using the function returned by <code>useState</code>, which re-renders the component.</p><pre><code class='language-jsx'>setCount(count + 1);</code></pre>

useState Hook

<h1>useEffect Hook</h1><p>The <code>useEffect</code> hook allows you to perform side effects in function components. This can include tasks such as data fetching, manually updating the DOM, or setting up timers.</p><h2>Basic Usage of useEffect:</h2><pre><code class='language-jsx'>import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    &lt;div&gt;
      &lt;p&gt;You clicked {count} times&lt;/p&gt;
      &lt;button onClick={() => setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><h2>Cleaning Up Effects:</h2><p>If your effect requires cleanup (such as removing event listeners or canceling a network request), you can return a cleanup function from the effect:</p><pre><code class='language-jsx'>useEffect(() => {
  const handleResize = () => {
    console.log(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);</code></pre><h2>Dependency Array:</h2><p>The second argument to <code>useEffect</code> is the dependency array, which tells React to only re-run the effect when one of the dependencies has changed.</p><pre><code class='language-jsx'>useEffect(() => {
  // effect logic
}, [count]);</code></pre>

useEffect Hook

<h1>React Context API</h1><p>The React Context API is used to pass data through the component tree without having to pass props manually at every level. This is useful for managing global state like themes, user authentication, or language settings.</p><h2>Creating a Context:</h2><p>To use Context, first, create a context using <code>React.createContext()</code>. This will return a provider and consumer that can be used to share state between components.</p><pre><code class='language-jsx'>const ThemeContext = React.createContext('light');</code></pre><h2>Using Context Provider:</h2><p>The provider component is used to pass the current context value to its descendants. Any child components can subscribe to the context value.</p><pre><code class='language-jsx'>&lt;ThemeContext.Provider value='dark'&gt;
  &lt;Toolbar /&gt;
&lt;/ThemeContext.Provider&gt;</code></pre><h2>Using Context Consumer:</h2><p>A context consumer can access the context value and react to changes in the provider.</p><pre><code class='language-jsx'>&lt;ThemeContext.Consumer&gt;
  {value =&gt; &lt;div&gt;Current theme: {value}&lt;/div&gt;}
&lt;/ThemeContext.Consumer&gt;</code></pre><h2>Using <code>useContext</code> Hook:</h2><p>In functional components, the <code>useContext</code> hook provides a simpler way to consume context.</p><pre><code class='language-jsx'>const theme = useContext(ThemeContext);
return &lt;div&gt;Current theme: {theme}&lt;/div&gt;;</code></pre>

React Context API

<h1>useContext Hook</h1><p>The <code>useContext</code> hook lets you subscribe to React context without introducing nesting in your component tree. It's a simpler way to consume context in functional components compared to using the <code>Context.Consumer</code> API.</p><h2>Creating a Context:</h2><pre><code class='language-jsx'>const ThemeContext = React.createContext('light');</code></pre><h2>Using useContext:</h2><p>Inside a functional component, you can use <code>useContext</code> to access the context value:</p><pre><code class='language-jsx'>import React, { useContext } from 'react';

const theme = useContext(ThemeContext);

return &lt;div&gt;Current theme: {theme}&lt;/div&gt;;</code></pre><p>Context is useful for passing global data like themes, language settings, or user authentication through the component tree without having to pass props down manually.</p>

useContext Hook

<h1>useReducer Hook</h1><p>The <code>useReducer</code> hook is an alternative to <code>useState</code> when you need more complex state logic, such as handling multiple state transitions or optimizing performance in deeply nested components.</p><h2>Basic Usage:</h2><p>It accepts a reducer function and an initial state. The reducer function contains the logic to handle state transitions based on actions.</p><pre><code class='language-jsx'>function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    &lt;div&gt;
      &lt;p&gt;Count: {state.count}&lt;/p&gt;
      &lt;button onClick={() => dispatch({ type: 'increment' })}&gt;+&lt;/button&gt;
      &lt;button onClick={() => dispatch({ type: 'decrement' })}&gt;-&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><h2>When to Use useReducer:</h2><p>Use <code>useReducer</code> for managing complex state logic with multiple state transitions, or when the next state depends on the previous one.</p>

useReducer Hook

<h1>useMemo Hook</h1><p>The <code>useMemo</code> hook memoizes the result of a function, re-calculating it only when its dependencies change. This helps optimize performance by preventing unnecessary re-rendering.</p><h2>Basic Usage:</h2><p>It is useful for expensive calculations that shouldn’t run on every render.</p><pre><code class='language-jsx'>import React, { useState, useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    return fibonacci(num);
  }, [num]);

  return &lt;div&gt;Result: {result}&lt;/div&gt;
}</code></pre><h2>When to Use useMemo:</h2><p>Use <code>useMemo</code> to optimize performance when you have computationally heavy calculations or large data arrays.</p>

useMemo Hook

<h1>useCallback Hook</h1><p>The <code>useCallback</code> hook returns a memoized callback function that only changes if one of its dependencies changes. This helps optimize performance by preventing unnecessary re-creation of functions.</p><h2>Basic Usage:</h2><pre><code class='language-jsx'>import React, { useState, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => setCount(count + 1), [count]);
  return &lt;button onClick={handleIncrement}&gt;Click me&lt;/button&gt;;
}</code></pre><h2>When to Use useCallback:</h2><p>Use <code>useCallback</code> when you pass functions as props to child components or for event handlers, especially if the functions are passed to components that rely on referential equality.</p>

useCallback Hook

<h1>useRef Hook</h1><p>The <code>useRef</code> hook provides a way to access DOM elements directly in functional components or to store mutable values that persist across renders without triggering a re-render.</p><h2>Accessing DOM Elements:</h2><pre><code class='language-jsx'>import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    &lt;div&gt;
      &lt;input ref={inputRef} /&gt;
      &lt;button onClick={focusInput}&gt;Focus Input&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><h2>Persisting Values:</h2><p><code>useRef</code> can also store mutable values across renders, such as for timers or keeping track of previous state.</p><pre><code class='language-jsx'>const countRef = useRef(0);</code></pre>

useRef Hook

<p>Creating a weather app is a great way to practice your React skills. In this article, we will build a simple weather application that fetches data from an API and displays current weather conditions for a user-specified city. We will utilize the OpenWeatherMap API for fetching weather data and Axios for making HTTP requests.</p>
<h2>Prerequisites</h2>
<p>Before you start, ensure you have the following installed:</p>
<ul>
    <li>Node.js and npm</li>
    <li>Basic knowledge of React</li>
</ul>
<h2>Step 1: Set Up Your React Application</h2>
<p>First, we&apos;ll create a new React application using Create React App. Open your terminal and run the following command:</p>
<pre><div><div>
</div><div><code>npx create-react-app weather-app
cd weather-app
</code></div></div></pre>
<p>This will create a new directory named <code>weather-app</code> and set up a basic React application.</p>
<h2>Step 2: Install Axios</h2>
<p>To make HTTP requests, we will use Axios. Install it by running:</p>
<pre><div><div><div>
</div></div><div><code>npm install axios
</code></div></div></pre>
<h2>Step 3: Get an API Key</h2>
<p>Next, we need to obtain an API key from OpenWeatherMap:</p>
<ol>
    <li>Go to <a rel="noopener" target="_new">OpenWeatherMap</a>.</li>
    <li>Sign up for a free account and create a new API key in your dashboard.</li>
</ol>
<h2>Step 4: Create the Weather Component</h2>
<p>In the <code>src</code> folder of your React app, create a new file named <code>Weather.js</code>. This component will handle fetching and displaying the weather data.</p>
<pre><div><div>javascript</div><div><div><div><button><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy code</button></div></div></div><div><code>// src/Weather.js
import React, { useState } from &apos;react&apos;;
import axios from &apos;axios&apos;;

const Weather = () =&gt; {
  const [city, setCity] = useState(&apos;&apos;);
  const [weatherData, setWeatherData] = useState(null);
  const [error, setError] = useState(&apos;&apos;);

  const API_KEY = &apos;YOUR_API_KEY&apos;; // Replace with your actual API key

  const getWeather = async (e) =&gt; {
    e.preventDefault();

    if (!city) return;

    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=${API_KEY}&amp;units=metric`
      );
      setWeatherData(response.data);
      setError(&apos;&apos;);
    } catch (err) {
      setWeatherData(null);
      setError(&apos;City not found&apos;);
    }
  };

  return (
    &lt;div className=&quot;weather-container&quot;&gt;
      &lt;h1&gt;Weather App&lt;/h1&gt;
      &lt;form onSubmit={getWeather}&gt;
        &lt;input
          type=&quot;text&quot;
          placeholder=&quot;Enter city&quot;
          value={city}
          onChange={(e) =&gt; setCity(e.target.value)}
        /&gt;
        &lt;button type=&quot;submit&quot;&gt;Get Weather&lt;/button&gt;
      &lt;/form&gt;

      {error &amp;&amp; &lt;p className=&quot;error&quot;&gt;{error}&lt;/p&gt;}
      {weatherData &amp;&amp; (
        &lt;div className=&quot;weather-info&quot;&gt;
          &lt;h2&gt;{weatherData.name}&lt;/h2&gt;
          &lt;p&gt;Temperature: {weatherData.main.temp} &deg;C&lt;/p&gt;
          &lt;p&gt;Condition: {weatherData.weather[0].description}&lt;/p&gt;
          &lt;p&gt;Humidity: {weatherData.main.humidity}%&lt;/p&gt;
          &lt;p&gt;Wind Speed: {weatherData.wind.speed} m/s&lt;/p&gt;
        &lt;/div&gt;
      )}
    &lt;/div&gt;
  );
};

export default Weather;
</code></div></div></pre>
<h3>Explanation of the Code</h3>
<ol>
    <li>
        <p><strong>State Management</strong>: We are using the <code>useState</code> hook to manage the state of the city input, weather data, and any potential error messages.</p>
    </li>
    <li>
        <p><strong>Fetching Data</strong>: The <code>getWeather</code> function is called when the form is submitted. It makes an API call to fetch the weather data based on the user-inputted city. If the city is found, we update <code>weatherData</code>, otherwise, we set an error message.</p>
    </li>
    <li>
        <p><strong>Displaying Data</strong>: We conditionally render the weather information or an error message based on the state.</p>
    </li>
</ol>
<h2>Step 5: Update the App Component</h2>
<p>Now, we need to import and use the <code>Weather</code> component in the main <code>App.js</code> file.</p>
<pre><div><div>javascript</div><p>
</p><div><code>// src/App.js
import React from &apos;react&apos;;
import Weather from &apos;./Weather&apos;;

const App = () =&gt; {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;Weather /&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></div></div></pre>
<h2>Step 6: Style Your App</h2>
<p>You can add some basic styles to your app. Create a new file named <code>App.css</code> in the <code>src</code> folder and add some styles:</p>
<pre><div><div>css</div><div><code>/* src/App.css */
.App {
  text-align: center;
  margin: 20px;
}

.weather-container {
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  max-width: 400px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

.weather-info {
  margin-top: 20px;
}

.error {
  color: red;
}
</code></div></div></pre>
<p>Then, import the CSS file in your <code>App.js</code>:</p>
<pre><div><div>javascript</div><div><code>// src/App.js
import React from &apos;react&apos;;
import Weather from &apos;./Weather&apos;;
import &apos;./App.css&apos;;

const App = () =&gt; {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;Weather /&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></div></div></pre>
<h2>Step 7: Run Your App</h2>
<p>Finally, run your app using the following command:</p>
<pre><div><div>
</div><div><code>npm start
</code></div></div></pre>
<p>Your weather app should now be running on <a rel="noopener" target="_new">http://localhost:3000</a>. You can enter a city name in the input field and click &quot;Get Weather&quot; to see the current weather conditions.</p>
<h2>Conclusion</h2>
<p>Congratulations! You&apos;ve built a simple weather application using React.js and the OpenWeatherMap API. This project can be further enhanced by adding features such as:</p>
<ul>
    <li><strong>Error Handling</strong>: Improve error handling for network issues.</li>
    <li><strong>Styling</strong>: Use CSS frameworks like Bootstrap or Material-UI for better styling.</li>
    <li><strong>Forecast Data</strong>: Fetch and display a weather forecast for the upcoming days.</li>
    <li><strong>Location Detection</strong>: Use geolocation to fetch weather data based on the user&apos;s current location.</li>
</ul>
<p>Feel free to experiment and expand the app further. Happy coding!</p>

Weather App Project

<h1>React Context API: Advanced Patterns</h1><p>The Context API is a powerful feature in React for managing global state, but in large applications, it can become difficult to scale. Advanced patterns help make Context usage more efficient and maintainable.</p><h2>Optimizing Context Performance:</h2><p>React re-renders all components that consume a context whenever the provider's value changes. This can lead to performance bottlenecks. To avoid unnecessary re-renders, use memoization with <code>React.memo</code> or <code>useMemo</code> to prevent components from re-rendering when the context value doesn't change:</p><pre><code class='language-jsx'>import React, { useState, createContext, useContext, useMemo } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const value = useMemo(() => ({ theme, setTheme }), [theme]);
  return (
    &lt;ThemeContext.Provider value={value}&gt;
      {children}
    &lt;/ThemeContext.Provider&gt;
  );
}

function App() {
  return (
    &lt;ThemeProvider&gt;
      &lt;ThemeConsumerComponent /&gt;
    &lt;/ThemeProvider&gt;
  );
}</code></pre><h2>Context Modules:</h2><p>Context modules are a pattern where you encapsulate all the logic related to the context into a custom hook. This pattern improves code readability and makes it easier to manage complex contexts.</p><pre><code class='language-jsx'>import React, { useContext, useState } from 'react';

const CountContext = React.createContext();

function useCount() {
  const context = useContext(CountContext);
  if (!context) {
    throw new Error('useCount must be used within a CountProvider');
  }
  return context;
}

function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    &lt;CountContext.Provider value={{ count, setCount }}&gt;
      {children}
    &lt;/CountContext.Provider&gt;
  );
}</code></pre><p>With this pattern, other components just need to use the <code>useCount</code> hook instead of directly interacting with the context.</p>

React Context API: Advanced Patterns

<h1>React Router: Advanced Usage</h1><p>React Router is an essential library for navigation in single-page applications (SPAs). It offers features for dynamic routing, URL parameters, and nested routes.</p><h2>Nested Routes:</h2><p>Nested routes allow you to render different components inside a parent route. This is useful for dashboards or pages with multiple sub-sections.</p><pre><code class='language-jsx'>import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

function Dashboard() {
  return (
    &lt;div&gt;
      &lt;nav&gt;
        &lt;Link to='/dashboard/overview'&gt;Overview&lt;/Link&gt;
        &lt;Link to='/dashboard/settings'&gt;Settings&lt;/Link&gt;
      &lt;/nav&gt;
      &lt;Routes&gt;
        &lt;Route path='overview' element={&lt;Overview /&gt;} /&gt;
        &lt;Route path='settings' element={&lt;Settings /&gt;} /&gt;
      &lt;/Routes&gt;
    &lt;/div&gt;
  );
}

function App() {
  return (
    &lt;Router&gt;
      &lt;Routes&gt;
        &lt;Route path='/dashboard/*' element={&lt;Dashboard /&gt;} /&gt;
      &lt;/Routes&gt;
    &lt;/Router&gt;
  );
}</code></pre><h2>URL Parameters:</h2><p>React Router provides the ability to capture dynamic segments in the URL using parameters. This is useful for pages like product details or user profiles.</p><pre><code class='language-jsx'>import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  return &lt;div&gt;User ID: {userId}&lt;/div&gt;;
}

function App() {
  return (
    &lt;Router&gt;
      &lt;Routes&gt;
        &lt;Route path='/users/:userId' element={&lt;UserProfile /&gt;} /&gt;
      &lt;/Routes&gt;
    &lt;/Router&gt;
  );
}</code></pre>

React Router: Advanced Usage

<h1>React.memo for Performance Optimization</h1><p><code>React.memo</code> is a higher-order component that memoizes the rendered output of a component, preventing it from re-rendering unless its props change.</p><h2>When to Use React.memo:</h2><p>Use <code>React.memo</code> to optimize components that rely heavily on props but don't need to re-render every time the parent component updates.</p><pre><code class='language-jsx'>const MyComponent = React.memo(function MyComponent({ name }) {
  return &lt;p&gt;Hello, {name}!&lt;/p&gt;;
});

function App() {
  const [count, setCount] = useState(0);
  return (
    &lt;div&gt;
      &lt;MyComponent name='John' /&gt;
      &lt;button onClick={() => setCount(count + 1)}&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><p>In this example, <code>MyComponent</code> will only re-render if the <code>name</code> prop changes, regardless of how many times the button in <code>App</code> is clicked.</p><h2>Custom Comparison Function:</h2><p>You can pass a custom comparison function to <code>React.memo</code> to control when the component should re-render:</p><pre><code class='language-jsx'>const MyComponent = React.memo(function MyComponent({ user }) {
  return &lt;p&gt;User: {user.name}&lt;/p&gt;;
}, (prevProps, nextProps) => {
  return prevProps.user.id === nextProps.user.id;
});</code></pre>

React.memo for Performance Optimization

<h1>Code Splitting with React.lazy and Suspense</h1><p>Code splitting helps improve the initial load time of your React application by breaking up large bundles into smaller chunks that are loaded on demand. React provides built-in support for this with <code>React.lazy</code> and <code>Suspense</code>.</p><h2>Using React.lazy:</h2><p>Use <code>React.lazy</code> to dynamically import components, which will be loaded only when they are rendered.</p><pre><code class='language-jsx'>import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
      &lt;LazyComponent /&gt;
    &lt;/Suspense&gt;
  );
}</code></pre><h2>Benefits of Code Splitting:</h2><p>Code splitting ensures that users only download the code they need for the current view, reducing the initial load time of the app, especially for large projects with many routes or components.</p><h2>Lazy Loading Routes:</h2><p>You can use <code>React.lazy</code> with React Router to dynamically load route components:</p><pre><code class='language-jsx'>import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import React, { Suspense } from 'react';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    &lt;Router&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;Routes&gt;
          &lt;Route path='/' element={&lt;Home /&gt;} /&gt;
          &lt;Route path='/about' element={&lt;About /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/Suspense&gt;
    &lt;/Router&gt;
  );
}</code></pre>

Code Splitting with React.lazy and Suspense

A perfect starting point for web developers looking to learn React.js. By the end of this course, you'll be able to build simple applications using React and understand the key concepts to continue learning more advanced topics.

LearnCodePro

Master the Basics of React.js

Course Highlights

Course Details

Chapter Covered

Course Summary

Enroll Now