React js in 3.5 hours | Full beginners tutorial

Introduction

This tutorial aims to provide a comprehensive guide to learning React.js in just 3.5 hours, based on the Giraffe Academy video. React.js is a popular JavaScript library used for building user interfaces, particularly single-page applications. By following this guide, you'll gain a solid foundation in React, allowing you to create dynamic web applications.

Step 1: Set Up Your Development Environment

To start coding in React, you need to set up your development environment.

• Install Node.js: Ensure you have Node.js installed on your computer. This is crucial as React uses Node for its development environment.
• Install a Code Editor: Download and install a code editor like Visual Studio Code, which is highly recommended for React development.
• Set Up Create React App: Use Create React App to bootstrap your React project. Open your terminal and run:

  npx create-react-app my-app
  cd my-app
  npm start
  

  This command creates a new React application in a folder called "my-app" and starts a local development server.

Step 2: Understand React Components

Components are the building blocks of a React application.

• Functional Components: Learn to create simple functional components. For example:

  function MyComponent() {
      return <h1>Hello, World!</h1>;
  }
  

• Class Components: Understand how to create class components, although functional components are now more commonly used with hooks.

Step 3: Manage State and Props

Learn how to manage data within your components.

• Using State: Use the useState hook to manage state in functional components.

  import React, { useState } from 'react';
  
  function Counter() {
      const [count, setCount] = useState(0);
      return (
          <div>
              <p>You clicked {count} times</p>
              <button onClick={() => setCount(count + 1)}>Click me</button>
          </div>
      );
  }
  

• Passing Props: Understand how to pass data to components using props. For example:

  function Greeting(props) {
      return <h1>Hello, {props.name}</h1>;
  }
  

Step 4: Handling Events

Learn how to handle user interactions through events.

• Event Handling: Attach event handlers to elements. For instance:

  function App() {
      const handleClick = () => {
          alert('Button clicked!');
      };
  
      return <button onClick={handleClick}>Click Me</button>;
  }
  

Step 5: Conditional Rendering

Implement conditional rendering to display elements based on certain conditions.

• Using Ternary Operators: Use ternary operators for simple conditions:

  const isLoggedIn = true;
  return (
      <div>
          {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
      </div>
  );
  

Step 6: Lists and Keys

Learn to render lists of items efficiently.

• Mapping Over Arrays: Use the map function to render lists.

  const items = ['Apple', 'Banana', 'Cherry'];
  return (
      <ul>
          {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
  );
  

Step 7: Use of Effects

Understand the use of side effects in your components with hooks.

• Using useEffect: Learn to fetch data or perform side effects using the useEffect hook.

  useEffect(() => {
      fetchData();
  }, []); // Fetches data once on component mount
  

Conclusion

By following this tutorial, you have learned the core concepts of React.js, including setting up your environment, creating components, managing state and props, handling events, conditional rendering, and using effects. To further enhance your skills, consider building a small project or exploring more advanced topics like routing with React Router or state management with Redux. Happy coding!