React JS Crash Course

Introduction

In this tutorial, you will learn how to build a task tracker app using React. This crash course will cover essential concepts such as components, props, state management, hooks, and API interactions, allowing you to grasp the fundamentals of React development effectively.

Step 1: Create a React App

• Use Create React App to set up your project.
• Run the following command in your terminal:

npx create-react-app task-tracker

• Navigate to your project directory:

cd task-tracker

• Start the development server:

npm start

Step 2: Organize Files and Folders

• In your src folder, create the following structure:
  • components
  • assets (for images or icons)
• Create a Task component inside the components folder.

Step 3: Build the App Component

• Open src/App.js and replace its contents with the basic structure:

import React from 'react';

function App() {
  return (
    <div className="container">
      <h1>Task Tracker</h1>
    </div>
  );
}

export default App;

Step 4: Understand JSX and Expressions

• JSX allows you to write HTML-like syntax in JavaScript.
• For dynamic content, use curly braces {} to embed expressions within JSX.

Step 5: Create Functional Components

• Build a new component for your tasks, for example, Task.js:

import React from 'react';

const Task = ({ task }) => {
  return <div>{task.text}</div>;
};

export default Task;

Step 6: Manage Component Props

• Pass props to your Task component from the parent component (App.js).

Step 7: Use PropTypes for Type Checking

• Install PropTypes:

npm install prop-types

• Use PropTypes in your Task component to validate props:

import PropTypes from 'prop-types';

Task.propTypes = {
  task: PropTypes.object.isRequired,
};

Step 8: Style Your Components

• You can use CSS styles or libraries like styled-components to enhance the UI.

Step 9: Add Event Handlers

• Implement event handling by adding an onClick event to buttons or other interactive elements.

Step 10: Create and Render Task List

• Use the .map() method to render a list of tasks. Make sure to give each task a unique key prop:

const tasks = [{ id: 1, text: 'Task 1' }, { id: 2, text: 'Task 2' }];

return (
  <div>
    {tasks.map(task => (
      <Task key={task.id} task={task} />
    ))}
  </div>
);

Step 11: Introduce State with useState Hook

• Import the useState hook from React:

import React, { useState } from 'react';

• Create state variables for tasks and manage state updates:

const [tasks, setTasks] = useState([]);

Step 12: Implement Global State Management

• Consider using Context API or state management libraries for larger applications.

Step 13: Add Icons with react-icons

• Install react-icons for better UI elements:

npm install react-icons

• Import and use icons in your components.

Step 14: Handle Task Deletion

• Create a function to delete a task and update the state accordingly.

Step 15: Add Conditional Renderings

• Display an optional message when no tasks exist using conditional rendering.

Step 16: Implement a Form to Add Tasks

• Build a task form with controlled components to manage input state.

Step 17: Handle Form Submission

• Create a submit handler to add tasks to your state.

Step 18: Toggle Task Reminder

• Add a feature to toggle reminders for tasks with conditional styling.

Step 19: Build for Production

• Run the build command to prepare your app for deployment:

npm run build

Step 20: Set Up a JSON Server

• Install JSON Server to mock API calls:

npm install json-server --save-dev

• Create a db.json file and populate it with initial task data.

Step 21: Fetch Tasks from Server

• Use the useEffect hook to fetch tasks from the JSON server on component mount.

Step 22: Implement CRUD Operations

• Add functions to delete tasks from the server, add new tasks, and toggle reminders via API calls.

Step 23: Add Routing

• Use React Router to implement routing for different views like a footer and about page.

Conclusion

You have now built a functional task tracker app using React. You learned about components, state management, hooks, and how to interact with an API. Next, consider expanding your application with features like user authentication or a more advanced state management solution. Explore further by reviewing the provided GitHub code or diving into more complex React concepts.