React Crash Course for Beginners

Overview

• A comprehensive 2-hour crash course on React.
• Build a React project from scratch covering essential topics.

Topics Covered

1. Basics of React
   • Creating a React application.
2. Components
   • Class components.
   • Functional components.
3. JSX
   • Writing JSX in components.
4. Props and State
5. React Hooks
   • useState and useEffect.
6. Component Lifecycle
7. Conditional Rendering
8. Lists and Keys
9. Form Handling
10. Project Structure
11. React Routing

• Navigating between pages.
• Programmatically navigating pages.

12. JSON Server Setup

• Using fake APIs with Axios.

13. CRUD Operations

• Creating a search filter functionality.

Pre-requisites

• Install Node.js on your system.
  • Download from Node.js Official Website.
  • Verify installation by typing node -v in the terminal.

Creating a React App

• Use command: npx create-react-app contact-app
• Explanation of folder structure:
  • node_modules: Dependencies.
  • public: Contains index.html with a root div.
  • src: Application code.

Initial Setup

• Run the development server using:
  • npm start
• Modify the default files to remove unnecessary content.

Creating Components

• Create a folder for components:
  • Header, AddContact, ContactList, ContactCard components.

App Component Structure

• Import components in App.js.
• Create a functional component with JSX syntax.

Adding Semantic UI

• Integrate Semantic UI for styling.
• Update index.html with Semantic UI CSS link.

State and Props

• Utilize state management for contacts.
• Pass props between components.

Component Lifecycle and Hooks

• Understand component lifecycle methods and how to use hooks effectively.
• Example: Use useEffect for data fetching and synchronization.

Implementing Routing with React Router

• Install React Router: npm install react-router-dom
• Set up routing in App.js to navigate between components.

Data Management with JSON Server

• Set up a JSON server for fake API interactions.
  • Install JSON server and create a db.json for resource management.

CRUD Operations with Axios

• Install Axios for making HTTP requests.
• Implement methods for creating, reading, updating, and deleting data.

Search Functionality

• Add a search bar to filter contacts in the ContactList component.
• Manage search terms and render filtered results.

Conclusion

• Review of key React concepts and application structure.
• Encouragement to practice and implement learned concepts in real projects.