Skip to main content

Chapter 2: Enter the React !!!

2. React Basics​

Understanding the core concepts of React is pivotal for building scalable and efficient web apps.

a. JSX:​

  • Understand the synergy between JavaScript and XML.

  • Get comfortable writing JSX instead of pure HTML in React components.

    Task: Convert a snippet of HTML (e.g., a simple form or navigation bar) into JSX inside a React component.

b. Components & Props:​

  • Learn about functional vs class components.

  • Understand the concept of "props" to pass data between components.

    Task: Build a UserProfile component that receives and displays user details (e.g., name, image, and bio) through props.

c. State & Lifecycle:​

  • Understand the concept of state in class components and how it differs from props.

  • Familiarize yourself with lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

    Task: Create a digital clock component that updates the time every second.

d. Event Handling:​

  • Learn how to bind methods in class components.

  • Understand how to handle events such as clicks, form submissions, and input changes.

    Task: Build a basic counter component with buttons to increment, decrement, and reset the count.

e. Lists & Keys:​

  • Understand how to render lists in React.

  • Grasp the importance of "keys" when rendering lists.

    Task: Given an array of names, create a NameList component that displays each name in an unordered list.

f. Forms in React:​

  • Grasp controlled components.

  • Understand how to handle form state and form events like onChange.

    Task: Design a "Sign Up" form with fields for username, email, and password. Store the input data in the component's state.

g. Composition vs Inheritance:​

  • Learn how to use composition to build complex UIs from smaller components.

    Task: Construct a Card component that can be used to display various types of content (e.g., an image card, a text card, or a video card) using composition.

h. Basic Styling:​

  • Understand inline styles in React.

  • Familiarize yourself with importing CSS in React components.

    Task: Design a Button component with different styles (e.g., primary, secondary, danger) and use it in another component.

Project: TO-DO LIST​

  • Implement a basic task board with columns like "To Do", "In Progress", and "Completed".
  • Allow users to add tasks to any column.
  • Enable the movement of tasks between columns.
  • Enhance the UX with basic styles and interactive features like task counters for each column.

By thoroughly engaging with these tasks, you'll strengthen your foundational knowledge of React, equipping you to delve into more advanced topics and real-world applications with confidence.