DEV Community: Ayoola Damilare

React Native To-Do App: Project

Ayoola Damilare — Wed, 26 Feb 2025 19:58:39 +0000

Building a React Native To-Do App: A Step-by-Step Journey

Managing tasks efficiently is crucial in today's fast-paced world. With React Native, we can build a powerful and user-friendly task management app that enables users to create, edit, and track their tasks seamlessly. We’ll break down the development process into digestible steps, covering everything from project setup to authentication, task management, and notifications.

Part 1: Setting Up Your React Native Project
Before diving into the core functionality of our Task Manager app, we need to set up a solid foundation. In this post, we’ll cover installing the necessary tools, initializing a React Native project with Expo, and structuring the project efficiently.

Step 1: Install Node.js and npm/yarn
To get started, ensure that you have Node.js installed on your machine. You can download it from Node.js official website. This will also install npm (Node Package Manager), which we’ll use to manage dependencies. Alternatively, you can use yarn, a faster and more efficient package manager.

To verify the installation, run:

node -v
npm -v

Step 2: Initialize a New React Native Project with Expo
Expo simplifies React Native development by handling native configurations. To install Expo CLI, run:

npm install -g expo-cli

Now, initialize your project:

expo init TaskManagerApp

Expo will prompt you to choose a template. For this project, select Blank (TypeScript or JavaScript). Once the setup is complete, navigate into the project folder:

cd TaskManagerApp

To run the project, use:

expo start
or 
npm start

This command opens the Expo Developer Tools in your browser, allowing you to test the app on an emulator or a physical device.

Step 3: Set Up Project Structure
A well-organized project makes development more efficient. Inside your project, create the following folders:

TaskManagerApp/
│── src/
│   ├── components/       # Reusable UI components
│   ├── screens/          # Different screens (Login, Tasks, Profile)
│   ├── navigation/       # Navigation configuration
│   ├── services/         # API calls and Firebase interactions
│── App.js                # Root component
│── package.json          # Project dependencies

Step 4: Install Required Dependencies
We need several libraries to build our task management app:

react-navigation – Handles app navigation
axios – Manages API requests
firebase – Enables authentication and database storage
react-native-paper – Provides UI components

Install them using:

npm install @react-navigation/native axios firebase react-native-paper

We also need to install the required navigation dependencies:

npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

What’s Next?
With the project set up, we are now ready to build authentication. In the next post, we’ll implement user login and registration using Firebase. Stay tuned!

My React Journey: From Side Projects to Real-World Challenges

Ayoola Damilare — Tue, 28 Jan 2025 18:08:27 +0000

Welcome back to my React journey!

If you’ve been following along, you know I’ve been working on a To-Do List Application to sharpen my React skills. But life has a funny way of throwing surprises at you, and mine came in the form of an exciting internship opportunity as a mobile developer using React Native.

While I haven’t been able to make progress on my To-Do List project, I’ve been diving headfirst into the world of professional development. It’s been a whirlwind of learning, adapting, and growing—both as a developer and as a problem-solver. Today, I want to share my experiences so far, the challenges I’ve faced, and the beauty of working in a real-world codebase.

The Transition: From Side Projects to a Large Codebase
When I started my internship, I was both excited and nervous. I had spent months working on personal projects like the To-Do List app, where I had full control over the codebase and the pace of development. But stepping into a large, existing codebase was a whole new ball game.

Here’s what I’ve learned so far:

Understanding the Codebase
The first challenge was understanding the structure of the code. Unlike my personal projects, where everything was neatly organized (or at least I thought so), the codebase at work was massive, with multiple layers of abstraction, dependencies, and interconnected components. It took time to trace the flow of data, understand the state management system, and figure out how different modules interacted with each other.

Tip: If you’re ever in a similar situation, start by identifying the entry points of the app and follow the data flow. Tools like React DevTools and logging can be lifesavers!

Grasping the Business Logic
Writing code is one thing, but understanding why the code exists is another. Every feature in the app is tied to a business requirement, and it’s crucial to understand the “why” behind it. This has been a steep learning curve for me, but it’s also been incredibly rewarding. I’ve started to think beyond just writing functional code and focus on how my work impacts the end user and the business.

Collaborating with a Team
Working in a team is a whole new experience. There are code reviews, stand-ups, and constant communication with designers, product managers, and other developers. It’s taught me the importance of writing clean, maintainable code and documenting my work so that others can understand it.

The Beauty of Real-World Development
Despite the challenges, this experience has been nothing short of beautiful. Here’s why:

Learning on the Job:
Every day brings new opportunities to learn. Whether it’s debugging a tricky issue, optimizing performance, or implementing a new feature, I’m constantly expanding my skill set. I’ve also been exposed to tools and practices that I hadn’t encountered in my personal projects, like CI/CD pipelines, automated testing, and advanced state management libraries.
Seeing the Impact of My Work
There’s something incredibly satisfying about seeing your code solving problems even with reviews and corrections by the seniors. It’s a reminder that what we do as developers has a tangible impact on people’s lives. Whether it’s a small UI improvement or a new feature, knowing that it makes someone’s day a little easier is incredibly motivating.
Growing as a Developer
This internship is pushing me out of my comfort zone, forcing me to think critically, ask questions, and seek help when needed.

What’s Next?

While my To-Do List project is on hold for now, here’s what you can expect from me in the coming weeks:

Updates on My Internship Experience: I’ll dive deeper into specific challenges I’ve faced and how I’ve overcome them.
React Native Insights: As I continue working with React Native, I’ll share tips, tricks, and lessons learned.
Reviving the To-Do List Project: Once things settle down, I’ll pick up where I left off and add new features to the app.

Final Thoughts

This journey has been challenging, but it’s also been incredibly rewarding. I’ve learned that growth happens outside of your comfort zone, and every challenge is an opportunity to become a better developer.

To anyone out there who’s just starting their journey or feeling overwhelmed by a new role, remember this: It’s okay to not know everything. What matters is your willingness to learn, adapt, and keep moving forward.

Stay tuned for more updates, and as always, I’d love to hear your thoughts, feedback, or questions. Let’s grow together! 🚀

My React Journey: Project

Ayoola Damilare — Wed, 15 Jan 2025 19:53:38 +0000

Building a To-Do List Application

Welcome back to my React journey! If you’re just joining in, you’re in for an exciting ride. I’ve taken on the challenge of improving my React skills by working on hands-on projects, and one of them is this To-Do List Application.

Why a to-do list, you ask? Well, think about it. Task management is something we all deal with daily, whether it’s managing personal errands or professional deadlines. Creating a project like this not only sharpens my coding skills but also solves a real-world problem—a win-win!

Through this journey, I’m not just building an app; I’m diving deep into React concepts like state management, reusable components, and creating intuitive user interfaces. It’s about growing, learning, and sharing my experiences with you.

Why This Project?
When starting a learning journey, the key is to focus on projects that are:

Practical: Everyone needs a task management tool.
Challenging: A to-do list may sound simple, but I guess incorporating features like moving tasks up and down, real-time updates, and user management pushes you to think beyond the basics.
Fun: There’s nothing like seeing a functional app that you’ve built from scratch!

In this project, I’m exploring:

React Hooks like useState for dynamic updates.
Intuitive design principles for a clean, responsive interface.
Communication between a React front-end and a backend API for seamless functionality.

What’s Next?
This is just the beginning! I’ll be updating this series daily as the project progresses. Each day will bring new challenges, new learnings, and of course, new features to the app.

I’m also open to feedback and corrections. If you spot something I could do better or know a more efficient way to handle certain aspects, don’t hesitate to drop a comment or suggestion. This journey isn’t just about building—it’s about growing, and I value your input!

So, whether you’re a fellow developer, a tech enthusiast, or just curious about the process, stay glued to this page. You’ll get to see how the app evolves, from simple task addition to advanced functionalities like notifications and user management.

Stay tuned 🚀

My React Journey: Day 28

Ayoola Damilare — Tue, 31 Dec 2024 14:28:24 +0000

Building a To-Do List in React

Today, I worked on a React project to create a simple yet powerful To-Do List App. This project deepened my understanding of React hooks, state management, and event handling while allowing me to enhance the functionality with additional features like moving tasks up or down.

Here’s a breakdown of what I learned and implemented.

1. Setting Up the Component
I structured my ToDoList.jsx to use the useState hook for managing tasks. This allowed me to dynamically update and render the task list. Below is the basic setup for managing tasks:

import React, { useState } from 'react';

export default function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  function handleInputChange(event) {
    setNewTask(event.target.value); // Enables us to see what we type
  }

  function addTask() {
    if (newTask.trim() !== "") {
      setTasks(t => [...t, newTask]); // Adds the new task to the task list
      setNewTask(""); // Resets the input field
    }
  }
}

2. Adding and Deleting Tasks
I learned how to manipulate state to add and delete tasks. The addTask function checks if the input is valid before adding it, while deleteTask removes a specific task based on its index:

function deleteTask(index) {
  const updatedTasks = tasks.filter((_, i) => i !== index); // Removes the task at the given index
  setTasks(updatedTasks);
}

3. Moving Tasks Up and Down
A key enhancement to the project was implementing task reordering. The moveTaskUp and moveTaskDown functions rearrange tasks based on their indices:

function moveTaskUp(index) {
  if (index > 0) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

function moveTaskDown(index) {
  if (index < tasks.length - 1) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

4. Adding Styles with CSS
To make the app visually appealing, I applied custom styles in index.css. Here are some of the highlights:

Button Styling:

button {
  font-size: 1.7rem;
  font-weight: bold;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s ease;
}
.add-button {
  background-color: hsl(125, 47%, 54%);
}
.add-button:hover {
  background-color: hsl(125, 47%, 44%);
}

Task Item Styling:

li {
  font-size: 2rem;
  font-weight: bold;
  padding: 15px;
  background-color: hsl(0, 0%, 97%);
  margin-bottom: 10px;
  border: 3px solid hsla(0, 0%, 85%, 0.75);
  border-radius: 5px;
  display: flex;
  align-items: center;
}

5. Complete To-Do List in Action
Here’s how everything comes together in the ToDoList.jsx component:

return (
  <div className='to-do-list'>
    <h1>To-Do List</h1>
    <div>
      <input 
        type='text'
        placeholder='Enter a task...'
        value={newTask}
        onChange={handleInputChange}
      />
      <button className='add-button' onClick={addTask}>
        Add
      </button>
    </div>

    <ol>
      {tasks.map((task, index) => (
        <li key={index}>
          <span className='text'>{task}</span>
          <button className='delete-button' onClick={() => deleteTask(index)}>Delete</button>
          <button className='move-button' onClick={() => moveTaskUp(index)}>☝️</button>
          <button className='move-button' onClick={() => moveTaskDown(index)}>👇</button>
        </li>
      ))}
    </ol>
  </div>
);

Key Takeaways

React Hooks: The useState hook is an efficient way to manage local component states.
Event Handling: Functions like handleInputChange, addTask, and deleteTask showcase how user interactions can update the UI.
Dynamic List Rendering: Using map to iterate over tasks makes the app dynamic and responsive to changes.
Styling Best Practices: Combining CSS hover effects and transitions enhances user experience.

One step at a time

Source Code
You can access the full source code for this project on GitHub:
👉 To-Do List React App Repository

Feel free to explore, fork, and contribute to the project!

My React Journey: Day 27

Ayoola Damilare — Mon, 30 Dec 2024 22:48:11 +0000

React Router

Today’s focus is on mastering React Router, a key tool for building seamless navigation in React single-page applications (SPAs). Let me walk you through my learning journey and discoveries!

What I Learned from Building Navigation with React Router
1.Setup and Installation:
To start using React Router, I installed the library with:

npm install react-router-dom

Next, I imported the necessary modules:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.Creating Routes:
I created routes using createBrowserRouter, defining paths and linking them to specific components.

Example:

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/profiles', element: <ProfilesPage /> },
  { path: '/profiles/:profileId', element: <ProfilePage /> },
]);

Dynamic URLs: The route path:'/profiles/:profileId' demonstrates dynamic routing. It allows me to render a unique profile page based on the profileId.
Error Handling: Adding errorElement ensures that users who navigate to invalid URLs see a 404 Not Found page.

3.Handling 404 Errors:
I created a custom error page (NotFoundPage.jsx) using React Router’s Link component:

<Link to="/">Home</Link>

This allows navigation back to the homepage without a full browser refresh, maintaining the SPA experience.

4.Mapping Components Dynamically:
In ProfilesPage.jsx, I used the map method to dynamically generate links for each profile:

{profiles.map((profile) => (
  <Link key={profile} to={`/profiles/${profile}`}>
    Profile {profile}
  </Link>
))}

This makes it scalable as new profiles can be added without rewriting the code.

5.Page Structure:
Each page/component serves a specific purpose:

HomePage: Displays the default content when users visit /.
ProfilesPage: Lists links to individual profiles.
ProfilePage: Displays a placeholder for dynamic content related to a specific profile.
NotFoundPage: Handles invalid URLs, enhancing user experience.

6.Avoiding Full Page Refreshes:
I learned that using the <Link> component instead of the <a> tag prevents unnecessary full-page reloads. This keeps the application fast and responsive.

7.Rendering Nested Views:
With React Router, I can easily render nested components or layouts by structuring my routes efficiently.

Final Thoughts
React Router is an essential tool for building rich and user-friendly SPAs. Its ability to dynamically route, handle errors gracefully, and ensure a seamless navigation experience is powerful.

My React Journey: Day 26

Ayoola Damilare — Sat, 28 Dec 2024 21:18:03 +0000

Lifecycle Methods & Conditional Rendering

Today marks another step in my React learning journey, and it’s all about Lifecycle Methods and Conditional Rendering. Understanding how React components are born, grow, and eventually leave the DOM has been a game-changer for me. Add to that the ability to conditionally display content based on user interactions, and suddenly, building dynamic, user-friendly apps feels so sweet!

Lifecycle Methods in React Functional Components
Lifecycle has 3 steps:

1.Initial Step (Mounting Phase):

Happens when the component renders for the first time.
useEffect with an empty dependency array ([]) runs only during this phase. Example:

useEffect(() => {
  console.log("Component mounted");
}, []);

2.Update Step:

Triggered when state or props change.
React re-runs your function component, re-computing states and passing updated props.
Use useEffect with specific dependencies to handle changes:

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

3. Exit / Unmounting Phase:

Happens when the component is removed from the DOM.
Cleanup code can be added in the return function of useEffect to release memory. Example:

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

Conditional Rendering

This technique is essential for dynamically rendering components or elements based on conditions.

Ternary Operator
UserGreetings example:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

Short-Circuit Evaluation
For simpler conditions, you can use && to render components only when a condition is true:

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

Inline Conditional Styles
You can also dynamically style components:

const messageStyle = props.isLoggedIn
  ? { color: "green" }
  : { color: "red" };

return <h2 style={messageStyle}>Welcome, {props.username}</h2>;

This keeps getting better day-by-day

My React Journey: Day 25

Ayoola Damilare — Fri, 27 Dec 2024 20:20:45 +0000

Hooks - `useState` and `useEffect`

What Are React Hooks?
Hooks are special functions introduced in React v16.8 that allow functional components to use React features like state and lifecycle methods without writing class components.

1. useState Hook
The useState hook is used to add state to functional components.
It provides:

A state variable to store data.
A setter function to update the state. Syntax:

const [state, setState] = useState(initialValue);

Example:

import React, { useState } from 'react';

export default function MyComponent() {
  const [name, setName] = useState("Guest");
  const [age, setAge] = useState(0);

  const updateName = () => setName("Damilare");
  const updateAge = () => setAge(age + 2);

  return (
    <div>
      <p>Name: {name}</p>
      <button onClick={updateName}>Update Name</button>

      <p>Age: {age}</p>
      <button onClick={updateAge}>Increase Age</button>
    </div>
  );
}

2. useEffect Hook
The useEffect hook allows you to perform side effects in functional components. Examples include:

Fetching data from an API.
Subscribing to events.
Directly updating the DOM (e.g., changing document.title). Syntax:

useEffect(callback, [dependencies]);

callback: The function to execute.
[dependencies]: Array of values that the effect depends on.

Behavior Based on Dependencies:

useEffect(() => { ... }); Runs after every re-render of the component.
useEffect(() => { ... }, []); Runs only on mount (like componentDidMount).
useEffect(() => { ... }, [value]); Runs on mount and whenever value changes.

Example:

import React, { useEffect, useState } from 'react';

export default function UseEffectHook() {
  const [count, setCount] = useState(0);
  const [color, setColor] = useState("green");

  // Runs on mount and whenever count or color changes
  useEffect(() => {
    document.title = `Count: ${count} - Color: ${color}`;
  }, [count, color]);

  const incrementCount = () => setCount(count + 1);
  const decrementCount = () => setCount(count - 1);
  const toggleColor = () => setColor(color === "green" ? "red" : "green");

  return (
    <>
      <p style={{ color }}>{`Count: ${count}`}</p>
      <button onClick={incrementCount}>Add</button>
      <button onClick={decrementCount}>Subtract</button>
      <button onClick={toggleColor}>Change Color</button>
    </>
  );
}

Use Cases of useEffect:

Event Listeners: Add/remove listeners (e.g., window.addEventListener).
Fetching Data: Fetch API data when a component mounts or state changes.
DOM Updates: Update document.title or other DOM properties.
Cleanups: Handle cleanup tasks like unsubscribing from listeners.

Cleanup Example:

useEffect(() => {
  const timer = setInterval(() => console.log('Running...'), 1000);

  return () => {
    clearInterval(timer); // Cleanup on unmount
  };
}, []);

Key Points:

State in Functional Components: Use useState for state variables.
Side Effects: Use useEffect for anything that interacts with the outside world or reacts to changes in state/props.
Dependency Array: Always specify the dependency array to avoid unnecessary renders or infinite loops.
Cleanups: Always clean up subscriptions, intervals, or listeners in useEffect. With useState and useEffect, building React applications becomes easier and more intuitive.

Day after day.
Understanding upon understanding.

My React Journey: Day 24

Ayoola Damilare — Mon, 23 Dec 2024 22:54:47 +0000

Event Handling in React

1. What Are Events in React?
Events are user or system actions (e.g., clicking a button, typing in a field, hovering over an element, etc.). React uses synthetic events, a cross-browser wrapper around the browser’s native events, ensuring consistency and compatibility across different browsers.

2. How Do We Handle Events in React?
Event handling in React involves defining a function (event handler) that gets executed when the event occurs.

Example Syntax:

function handleEvent() {
  console.log('Event handled!');
}

return <button onClick={handleEvent}>Click Me</button>;

onClick is the event name.
handleEvent is the function executed when the button is clicked.

3. Key Points to Remember

Event Names: Use camelCase (e.g., onClick, onChange).
Pass Function Reference: Do not invoke the function directly.
✅ onClick={handleEvent}
❌ onClick={handleEvent()}
Event handlers can be defined inside or outside the component.

4. Common Events in React

onClick: Clicking a button
onChange: Typing in an input field
onSubmit: Submitting a form
onMouseEnter: Hovering over an element
onFocus: Focusing on an input field

5. Example with Multiple Events
Student.jsx:

import PropTypes from 'prop-types';

export default function Student(props) {
  // Event Handlers
  function handleClick() {
    alert('Button clicked');
  }

  function handleMouseEnter() {
    console.log('Mouse entered');
  }

  function handleInputChange(event) {
    console.log('Input value:', event.target.value);
  }

  return (
    <div className="student" onMouseEnter={handleMouseEnter}>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Student: {props.isStudent ? 'Yes' : 'No'}</p>
      <input type="text" placeholder="Type something..." onChange={handleInputChange} />
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

// PropTypes
Student.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  isStudent: PropTypes.bool,
};

// DefaultProps
Student.defaultProps = {
  name: 'Guest',
  age: 0,
  isStudent: false,
};

6. What's Happening Here?

handleClick: Displays an alert when the button is clicked.
handleMouseEnter: Logs a message to the console when the mouse enters the div.
handleInputChange: Logs the text typed in the input field.

7. Accessing Event Information
React automatically passes the event object to the handler.

function handleClick(event) {
  console.log(event.target); // Logs the element that triggered the event
}

return <button onClick={handleClick}>Click Me</button>;

8. Inline Event Handlers (Optional)
You can define event handlers directly in JSX:

<button onClick={() => console.log('Clicked!')}>Click Me</button>;

Why Avoid Inline Functions?
They create a new function instance every time the component renders, which can impact performance. Use them sparingly.

9. Binding this in Class Components
In class components, bind this to access the component’s context in event handlers:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

10. Passing Arguments to Event Handlers
To pass arguments, use an inline arrow function:

function handleClick(name) {
  alert(`Hello, ${name}!`);
}

return <button onClick={() => handleClick('Ayoola')}>Click Me</button>;

Key Takeaways

React simplifies event handling with synthetic events for cross-browser compatibility.
Always pass a function reference to event handlers.
Use event objects to access detailed information about the event.
Use inline functions sparingly for performance reasons.

React event handling is fun and powerful! 🎉

My React Journey: Day 23

Ayoola Damilare — Sat, 21 Dec 2024 21:46:58 +0000

Props and State

PROPS
Props, short for properties, are read-only and immutable data passed from parent to child components. They are mainly used to transfer data between components and ensure reusability.

Key Features of Props

Read-Only: Cannot be modified by the child component.
Used in Functional and Class Components.
PropTypes: Ensures props are of the correct data type during development.

age: PropTypes.number; // Throws a warning if a non-number is passed.

4.DefaultProps: Provides default values for props when none are passed.

name: "Guest"; // Default value for the name prop.

Code Example
Student.jsx

import PropTypes from 'prop-types';

export default function Student(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Student: {props.isStudent ? 'Yes' : 'No'}</p>
    </div>
  );
}

// PropTypes
Student.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  isStudent: PropTypes.bool,
};

// DefaultProps
Student.defaultProps = {
  name: 'Guest',
  age: 0,
  isStudent: false,
};

STATE
State is an object within a component that holds dynamic values which can change over time. States are mutable and are generally used for user interactions and events.

Key Features of State

Can only be used in Class Components (in older React).
Mutable: Updated using this.setState().
Tracks dynamic data such as user inputs or real-time responses.

App.jsx Implementation
Props are passed from the App component to the Student component.

App.jsx

import React from 'react';
import Student from './Student';

export default function App() {
  return (
    <>
      <Student name="Damilare" age={30} isStudent={true} />
      <Student name="Feyisayo" age={31} isStudent={true} />
      <Student name="Inioluwa" age={4} isStudent={true} />
      <Student name="Iteoluwa" age={1} isStudent={false} />
      <Student /> {/* Uses defaultProps */}
      <Student name="Bright" /> {/* Partial DefaultProps */}
    </>
  );
}

Rendering in DOM
index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Takeaways

Props: Immutable, passed from parent to child, and used for reusability.
State: Mutable, manages dynamic behavior and is updated with this.setState().
In modern React, hooks like useState make functional components equally capable of managing states, eliminating the need for class components.

My React Journey: Day 22

Ayoola Damilare — Thu, 19 Dec 2024 23:09:41 +0000

React Components (Functional vs. Class-Based)

Functional Components
A functional component is a JavaScript function that:

Accepts input through props and returns HTML (JSX).
Simplifies development by focusing only on presenting UI.

Example of Functional Component:
Greet.jsx

function Greet() {
    return <h1>Hello Damilare</h1>;
}

export default Greet;

App.jsx

import React from "react";
import Greet from "./Components/Greet.jsx";

function App() {
    return (
        <div>
            <Greet />
        </div>
    );
}

export default App;

Class Components
A class component is a JavaScript class that:

Accepts input through props and maintains internal, private state.
Contains a render() method that returns HTML (JSX).

Example of Class Component:

Welcome.jsx

import React, { Component } from "react";

class Welcome extends Component {
    render() {
        return <h1>Class Component</h1>;
    }
}

export default Welcome;

Usage in App.jsx:

import React from "react";
import Welcome from "./Components/Welcome.jsx";

function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

export default App;

Comparison: Functional vs. Class Components

Functional Components

JavaScript function that returns JSX.
Stateless by default; uses hooks (e.g., useState, useEffect) for state.
Simple and ideal for UI-focused logic.
Keyword 'this' Not required.
Lightweight Performance and optimized in modern React.
Great for reusable/presentational components.

Class Components

JavaScript class that extends Component.
Can manage internal state without hooks.
Best suited for complex logic or stateful UI.
Requires this for referencing properties/methods.
Heavier and less preferred in modern React.
More suited for smart/container components.

Advantages of Each Type

Functional Components

Easier to write and understand.
No need to deal with this keyword.
Perfect for components that don't require state management.
More concise and easier to test.
With React Hooks, functional components can now handle state and side effects, bridging the gap with class components.

Class Components

Can maintain private internal state.
Useful for managing complex logic and component lifecycles.
Best for older React projects that don't yet use hooks.

Should You Use Functional or Class Components?

In modern React (post v16.8), functional components are the preferred choice because:

React Hooks (like useState and useEffect) have made functional components equally powerful for state and lifecycle management.
Functional components are easier to read, write, and debug.
They provide better performance, especially in rendering.

Class components are still valid but are mainly used in older projects
or for backward compatibility.

Key Takeaway:

Use functional components whenever possible, especially in new projects.
Only resort to class components if you're working with legacy code or need specific features unavailable in functional components (rarely the case now).

Progress

My React Journey: Day 20

Ayoola Damilare — Wed, 18 Dec 2024 10:09:16 +0000

Budget Tracker Project

Today, I worked on a project titled Budget Tracker. The goal of this project was to apply previously learned concepts in a practical and functional way. Here's an overview of the concepts I implemented and how they enhanced my skills:

Concepts Learned and Applied

1.HTML Structure and Semantics

I used a semantic and well-structured HTML layout for the budget tracker, ensuring clarity and easy maintenance. For instance, the table element was used to organize budget entries, and input fields were added for data collection.

2.CSS for Styling
Learned to style the project for both functionality and aesthetics:

Used classes like .budget-tracker, .input, and .delete-entry to design and structure the UI.
Focused on responsive design principles, ensuring the tracker works across different screen sizes.
Added hover effects for buttons like .delete-entry to improve interactivity.

3.JavaScript Modules

I modularized my JavaScript by creating a separate BudgetTracker.js class. This improved code reusability and separation of concerns.

4.Local Storage

I implemented Local Storage to persist budget entries across sessions. Users can reload the app without losing their data:

localStorage.setItem("budget-tracker-entries-dev", JSON.stringify(data));

5.Dynamic DOM Manipulation

Dynamically created and updated rows in the budget table using JavaScript:

this.root.querySelector(".entries").insertAdjacentHTML("beforeend", BudgetTracker.entryHtml());

6.Event Handling
I used event listeners to make the app interactive. For example:

Clicking the "New Entry" button adds a new row.
Clicking the "Delete" button removes a row.

row.querySelector(".delete-entry").addEventListener("click", e => {
    this.onDeleteEntryBtcClick(e);
});

7.Data Validation and Formatting

Applied logic to calculate the total income or expenses and displayed it in the appropriate format using Intl.NumberFormat:

const totalFormatted = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}).format(total);

8.Version Control and Debugging

Used browser dev tools to debug errors and inspect the behavior of dynamic components.

Project Outcomes

This project gave me a deeper understanding of:

Designing user-friendly interfaces with HTML and CSS.
Integrating JavaScript logic to handle data dynamically.
The importance of code modularity for scaling projects.
Using Local Storage to maintain state.

The project also sharpened my problem-solving skills, as I faced challenges like handling empty input fields and ensuring accurate calculations, etc.

The tracker consists of input fields for date, description, type, and amount, with a dynamic summary section displaying the total balance.

This project reinforced my confidence in building real-world applications! 🚀

Ready to dive into React Native

My React Journey: Day 19

Ayoola Damilare — Mon, 16 Dec 2024 18:08:56 +0000

Practice with JSON APIs and Mock Servers

Working with json-server is a great way to simulate a backend server and practice API interactions like GET, POST, PUT, PATCH, and DELETE.

What is json-server?

A tool that allows you to quickly create a mock server to work with a JSON database.
Ideal for prototyping and testing APIs without needing a fully functional backend.

Setup and Installation

1. Prerequisite: Node.js

Ensure Node.js is installed on your system. Verify using:

node -v
npm -v

2. Install json-server

Install globally using npm:

npm install -g json-server@0.17.4

How to Use json-server

1. Start the Server
Create a db.json file in your working directory with some initial data. Example:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

Start the server and watch for changes in the db.json file:

json-server --watch db.json

By default, the server will run at http://localhost:3000.

2. Explore Endpoints
The server automatically creates RESTful endpoints for each collection in db.json:

GET /posts → Fetch all posts
GET /posts/1 → Fetch post with ID 1
POST /posts → Add a new post
PUT /posts/1 → Replace the entire post with ID 1
PATCH /posts/1 → Update specific fields in the post with ID 1
DELETE /posts/1 → Delete the post with ID 1

Using Postman

Postman is a tool for making HTTP requests to test APIs. Here’s how to perform each operation with Postman:

1. GET (Fetch Data)

Request Type: GET
URL: http://localhost:3000/posts
Fetches the list of posts.

2. POST (Add New Data)

Request Type: POST
URL: http://localhost:3000/posts
Headers: Content-Type: application/json
Body (JSON):

{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}

Adds a new post to the posts collection.

3. PUT (Replace Entire Resource)

Request Type: PUT
URL: http://localhost:3000/posts/2
Headers: Content-Type: application/json
Body (JSON):
{ "title": "Updated Title" }
Result: Replaces the entire resource with the provided data.

Before:

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}

After:

{
  "title": "Updated Title"
}

4. PATCH (Update Specific Fields)

Request Type: PATCH
URL: http://localhost:3000/posts/1
Headers: Content-Type: application/json
Body (JSON):

{
  "content": "Updated Content"
}

Result: Updates only the specified field in the resource.

Before:

{
  "id": 1,
  "title": "First Post",
  "content": "Hello World!"
}

After:

{
  "id": 1,
  "title": "First Post",
  "content": "Updated Content"
}

5. DELETE (Remove Data)

Request Type: DELETE
URL: http://localhost:3000/posts/1
Deletes the post with ID 1.

Key Differences Between PUT and PATCH

PUT

Replaces the entire resource.
Omits any fields not included in the body.

PATCH

Updates only specified fields.
Retains fields not mentioned in the body.

Conclusion

What I Learned:

Installed and used json-server to create a mock API server.
Practiced basic API operations: GET, POST, PUT, PATCH, DELETE.
Understood the difference between PUT and PATCH.

Day 19 Crushed.

DEV Community: Ayoola Damilare

React Native To-Do App: Project

Building a React Native To-Do App: A Step-by-Step Journey

My React Journey: From Side Projects to Real-World Challenges

Welcome back to my React journey!

What’s Next?

Final Thoughts

My React Journey: Project

Building a To-Do List Application

My React Journey: Day 28

Building a To-Do List in React

Key Takeaways

My React Journey: Day 27

React Router

My React Journey: Day 26

Lifecycle Methods & Conditional Rendering

Conditional Rendering

My React Journey: Day 25

Hooks - useState and useEffect

My React Journey: Day 24

Event Handling in React

Key Takeaways

My React Journey: Day 23

Props and State

My React Journey: Day 22

React Components (Functional vs. Class-Based)

Advantages of Each Type

My React Journey: Day 20

Budget Tracker Project

Project Outcomes

My React Journey: Day 19

Practice with JSON APIs and Mock Servers

Setup and Installation

How to Use json-server

Using Postman

Conclusion

Hooks - `useState` and `useEffect`