Forem: Mohamed Khaled Yousef

The Art of Problem-Solving

Mohamed Khaled Yousef — Thu, 24 Oct 2024 01:47:25 +0000

Hello again, fellow developer! 👋

Software Engineering and Philosophy

In our previous post, we explored the profound connections between philosophy and software engineering, specifically focusing on logic and abstraction. Today, we’ll dive even deeper into the art of problem-solving and explore how philosophical approaches help engineers tackle some of the most complex challenges in the software world.

Software engineering is more than just a series of technical processes. It’s a form of critical thinking and reasoning that parallels philosophical inquiry. Both disciplines aim to break down complex problems, find underlying truths, and create solutions that apply universally. As developers, we are often confronted with ambiguous requirements, conflicting ideas, and incomplete data. In these moments, philosophical thinking can be invaluable.

The Socratic Method: Asking the Right Questions

The Socratic Method, rooted in the teachings of the philosopher Socrates, is a form of cooperative argumentative dialogue. It revolves around asking and answering questions to stimulate critical thinking and illuminate ideas.

In software engineering, asking the right questions is essential for understanding the problem domain and identifying edge cases. Just as philosophers engage in a dialogue to uncover hidden assumptions, developers must ask probing questions during the discovery phase of a project:

What problem are we really trying to solve?
Are there any edge cases we haven't considered?
What assumptions are we making about the users or the system?

By asking these questions, we gain a deeper understanding of the problem and can design more effective solutions.

Example :

Imagine you’re building a login system. The basic requirement is simple: allow users to log in. But by asking the right questions, you uncover edge cases and security concerns:

What happens if a user forgets their password?
How should the system handle multiple failed login attempts?
Should the system lock users out, and if so, for how long?

These questions help shape the design of a more robust system.

Building a simple login system is a great example of conditional logic in action. It involves checking whether user credentials are valid and controlling the flow of the program based on that logic.


function login(username, password) {
  const storedUsername = 'developer';
  const storedPassword = 'code123';

  if (username === storedUsername && password === storedPassword) {
    console.log('Login successful!');
    return true;
  } else {
    console.log('Invalid credentials. Please try again.');
    return false;
  }
}

const username = 'developer';
const password = 'code123';

login(username, password); // Output: Login successful!

We check if both the username and password match the stored credentials using the logical AND (&&) operator.
If the conditions are true, the login is successful. If not, an error message is returned.

Occam’s Razor: Simplicity in Design

The philosophical principle known as Occam’s Razor suggests that the simplest solution is often the best. In software engineering, simplicity is a virtue. Complex code is more prone to bugs, harder to maintain, and more difficult for other developers to understand.

In modern software development, simplicity is not just about writing fewer lines of code but also about creating elegant architectures. This means avoiding unnecessary complexity, redundant code, and over-engineering.

Consider two solutions for a problem: one involves a series of nested loops, and the other uses a simple recursive function. The recursive function may be harder to understand initially, but it is likely the simpler and more maintainable solution in the long term.

Recursion is a powerful problem-solving technique in software engineering. It's an elegant way to solve problems by breaking them down into smaller instances of the same problem.

Here’s a small example demonstrating simplicity in design using recursion:

Example 1: recursive solution to calculate the sum of numbers in an array.

function sumArray(arr) {
  if (arr.length === 0) return 0;
  return arr[0] + sumArray(arr.slice(1));
}

console.log(sumArray([1, 2, 3, 4, 5])); // Output: 15

Example 2: recursive solution to calculate factorial

Do you know factorial?!, recursion simplifies the process of multiplying a number by all the smaller positive integers.

function factorial(n) {
  // Base case: factorial of 0 or 1 is 1
  if (n === 0 || n === 1) {
    return 1; 
  }

  // Recursive call: n * factorial of (n-1)
  return n * factorial(n - 1);
}

console.log(factorial(4)); 
// Output: 24 .. result of multiplying 4*3*2*1

console.log(factorial(5)); 
// Output: 120 .. result of multiplying 5*4*3*2*1

So, Rather than using multiple loops or manual summation, the recursive approach here aligns with the principle of simplicity.

The Principle of Contradiction: Debugging and Troubleshooting

The Principle of Non-Contradiction in philosophy asserts that contradictory statements cannot both be true at the same time. In software engineering, contradictions manifest themselves as bugs or inconsistencies in the code.

When debugging a program, we’re essentially seeking contradictions in our assumptions. If the program is behaving unexpectedly, something in our logical reasoning is incorrect. Debugging, in this sense, is a philosophical exercise where we use deduction to identify where our assumptions fail.

Imagine you’re developing a web application that fetches data from an API. Sometimes the API might throw an error due to network issues or invalid data. Handling these errors and debugging the issue is critical.

Example : fetching data and using try-catch for error handling and debugging

If a web application throws an error when processing user data, we might follow a line of reasoning like this:

Premise 1: The application should handle valid JSON input without errors.
Premise 2: The input we provided is valid JSON.
Conclusion: Therefore, the application should not throw an error. If an error is thrown, one of the premises must be false. We investigate to find whether the input is actually valid JSON or if the application’s logic for handling it is flawed.

async function fetchData(apiUrl) {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      // Throw error message
      throw new Error('Network response was not ok'); 
    }
    const data = await response.json();
    console.log('Data fetched successfully:', data);
  } catch (error) {
    console.error('Error fetching data:', error.message);
    // Call the debugging function
    debugError(error); 
  }
}

function debugError(error) {
  console.log('Debugging error:', error);
}

const apiUrl = 'https://api.example.com/data';
fetchData(apiUrl);

Ethics and Responsibility in Software Development

As software engineers, we wield a great deal of power. The systems we build can impact millions of lives, and with that power comes a corresponding ethical responsibility.
Philosophers like Immanuel Kant and John Stuart Mill have spent centuries debating ethical frameworks, and these debates have never been more relevant to the tech world than they are today.

Two key ethical approaches that influence software engineering are deontological ethics (duty-based ethics) and consequentialism(outcome-based ethics):

1 - Deontological Ethics:

This approach emphasizes the importance of following ethical principles or rules, regardless of the consequences. For software developers, this might mean adhering to strict privacy standards, even if doing so makes development more challenging or reduces profit margins.

Example:

A developer might refuse to implement a feature that tracks users’ location without explicit consent, even if doing so would provide valuable data to improve the product. Their ethical duty to protect user privacy outweighs the potential benefits of the feature.

2 - Consequentialism:

This approach focuses on the outcomes of actions. In software development, this could mean making decisions based on the potential harm or benefit to users.

Example:

A developer might weigh the consequences of releasing a new feature with known bugs. If the feature provides a significant benefit to users and the bugs are minor, the developer might decide that the positive outcomes outweigh the negative.

In the modern tech landscape, ethical considerations are becoming increasingly important. Issues like data privacy, algorithmic bias, and the social impact of automation require developers to think deeply about the consequences of their work.

Conclusion: Engineering as Philosophy in Practice

Software engineering is not just about writing code—it’s about thinking deeply, solving problems, and making decisions that impact the world around us. By borrowing from the rich tradition of philosophy, developers can approach their craft with more thoughtfulness, creativity, and responsibility.

Just as philosophers seek to understand the fundamental nature of reality, software engineers use logic, reasoning, and abstraction to build systems that shape our digital world. As we continue to explore the intersections between philosophy and software, we can elevate our craft and contribute to a more thoughtful, ethical, and innovative tech industry.

Thank you for continuing this philosophical journey with me. I look forward to your thoughts and contributions in the comments below!

The Blueprint of Logic

Mohamed Khaled Yousef — Sun, 08 Sep 2024 06:36:07 +0000

Hello developer! glad to see you again 👋

Introduction: The Intersection of Philosophy and Software

At first glance, software engineering might seem like a purely technical field. After all, it’s about writing code, creating systems, and solving practical problems, right? But when you look deeper, you’ll find that software engineering is deeply rooted in some of the same fundamental questions that philosophers have been asking for centuries:

What is logic?
How do we know something is true?
How can complex ideas be broken down into simpler, understandable parts?

These questions form the foundation of both philosophy and software engineering. Just as philosophers seek to understand understanding in general, they seek to understand the nature of reality, thought and how things related together, software engineers use logic and abstraction to build the systems that power the digital world.

The Blueprint of Logic

At the heart of software engineering lies logic, a concept that predates modern computing by thousands of years. It was philosophers like Aristotle who first formalized logical reasoning, creating the basis for what we now call formal logic — the foundation of every software system.

In software, logic is what allows us to define clear, step-by-step processes that computers can follow. It’s the guiding framework for writing algorithms, designing systems, and solving problems.

The Foundations of Logic
In philosophy, logic is about reasoning and ensuring that conclusions follow from premises. There are different types of logic, but two forms are particularly relevant to software engineering:

1. Deductive Logic:

This is the process of drawing conclusions based on premises that are known to be true. So deductive logic deals with certainty. In software, this is akin to creating functions or methods that always yield predictable outcomes based on given inputs. So, This often mirrors the predictable flow of functions, where if certain conditions are met, the output will always follow specific rules.
Example 1:

function isEven(number) {
  return number % 2 === 0;
}

General Premise: The function isEven accepts one number and return boolean value true or false. isEven must meet certain condition.
Specific Case: If isEven satisfies this condition ( number % 2 === 0 ), it is an even number.
Conclusion: Based on the premises, the function returns true for even number or false otherwise.

In this function, the logic is simple and deductive: if the input is a number divisible by 2, the number will be even number and the output will always be true.

Example 2:

In TypeScript, deductive logic is often used to infer types and ensure that functions receive and return values of the expected types.

function addNumbers(a: number, b: number): number {
  return a + b;
}

General Premise: The function addNumbers accepts two numbers and returns a number.
Specific Case: If we pass 5 and 10 as arguments, they must both be numbers.
Conclusion: The function will return 15, a number, according to the premise.

In both examples, the logic is deductive because the conclusion follows necessarily from the premises.

2. Inductive Logic:

While deductive logic deals with certainty, inductive logic deals with probability. Inductive logic works from specific examples or data to create a general rule or pattern. In software engineering, this is similar to machine learning, where patterns are discovered from data rather than predetermined rules so systems infer general rules from specific examples.

In recommender systems, like those used by Netflix or Spotify, they use patterns from past data to predict future user behavior. inductive logic is used to suggest content to users based on their behavior. For example, if a user frequently watches science fiction movies, the system might recommend more science fiction content. So the system "learns" through induction, refining its predictions over time based on observed trends.

Here, the conclusion is probable but not certain. The user might like other genres, but based on past behavior, science fiction is the best bet.

From Philosophy to Code: Abstraction

Another core principle shared by philosophy and software engineering is abstraction. Philosophers use abstraction to understand understanding and think about concepts like justice, beauty, and truth — things that can’t be easily defined in physical terms. In software, abstraction helps manage complexity, allowing engineers to focus on high-level ideas without getting bogged down in the details.

Abstraction in Philosophy: Plato’s idea of forms is a great example. According to Plato, everything we see in the physical world is an imperfect version of a perfect "form" or idea. For instance, there might be many different kinds of chairs, but they all share the essence of "chair-ness."

This kind of abstraction helps philosophers talk about big, complex ideas like beauty, justice, or truth without needing to focus on every individual instance.

Abstraction in Software: Object-Oriented Programming (OOP), for example, is an exercise in abstraction. Just as philosophers abstract concepts from the real world, software engineers abstract real-world entities into classes and objects.

Similarly, in OOP, we might have different kinds of classes, like Car, Truck, and Bicycle, but they all inherit from the abstract class Vehicle. This allows us to create a general model (Vehicle) and then define specific behaviors (Car, Truck) without repeating code.

So, in software engineering, abstraction helps developers manage complex systems by focusing on high-level designs without worrying about lower-level details.

Example 1: What is an Animal class? ( OOP Abstractions )

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a sound!.`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} barks.`;
  }
}

class Cat extends Animal {
  speak() {
    return `${this.name} meow.`;
  }
}

const myDog = new Dog('Jo');
const myCat = new Cat('Saeed');
console.log(myDog.speak());
console.log(myCat.speak());

The Animal class is an abstraction representing the idea of any animal. It defines the essential behavior (speaking), but each specific animal (like Dog or Cat) can provide its own implementation.

Example 2: How do I interact with API ( APIs Abstractions )

const apiKey = 'YOUR_PRIVATE_API_KEY'; 
const city = 'Cairo';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(`The weather in ${city}:`);
    console.log(`Temperature: ${(data.main.temp - 273.15).toFixed(2)}°C`);
    console.log(`Weather: ${data.weather[0].description}`);
  })
  .catch(error => console.error('Error fetching weather data:', error));

An API (Application Programming Interface) abstracts the complexity of an entire system or service. For example, when we use a weather API, we don’t need to know how it gathers data from satellites, processes it, or computes weather predictions.

The API provides an interface that abstracts away the complexity of weather data processing. You simply make a request, get the result and bind the data as you like in your page.

Example 3: Database Abstraction ( ex Sequelize ORM )

User.findOne({ where: { id: 1 } })
  .then(user => {
    console.log(user.name);
  });

In many web applications, we don’t need to know exactly how data is stored or retrieved in the database. Instead, we interact with an abstraction layer, such as an Object Relational Mapping (ORM) system like Sequelize or Hibernate, which provides methods to work with data in terms of objects.

The developer doesn’t need to write SQL queries or understand how the database works at a low level. The ORM abstracts the database, allowing the developer to work with familiar objects like the user object in our example and methods not the database directly.

Algorithms: The Roadmaps of Thought

An algorithm is, at its core, a series of logical steps to solve a problem. In many ways, algorithms are the modern software engineer’s version of syllogisms, a form of logical reasoning introduced by Aristotle.

For example, a classic syllogism looks like this:

1- All men are mortal.
2- Socrates is a man.
3- Therefore, Socrates is mortal.

Another example,
1- All mammals are animals.
2- All elephants are mammals.
3- Therefore, all elephants are animals.

This is a clear logical process, and algorithms function in a similar way. Let’s break down a factorial example:

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

Logical Breakdown:

If the number n is 0, return 1.
Otherwise, multiply n by the result of factorial(n - 1). Like the syllogism, this algorithm follows a clear and logical path, providing a solution to the problem of calculating the factorial of a number.

result
factorial of 0 => 1
factorial of 1 => 1
factorial of 2 => 2
factorial of 3 => 6
factorial of 4 => 24
factorial of 5 => 120

Logic Gates and Boolean Algebra

In philosophy, logic is relate to mathematic. and about making distinctions between true and false. The binary nature of modern computing — where everything is either a 1 (true) or a 0 (false) — has its roots in Boolean algebra, named after 19th-century mathematician and logician George Boole.

AND, OR, and NOT: These basic logical operations are the foundation of how computers make decisions. For instance:

AND: Both conditions must be true for the result to be true.
OR: At least one condition must be true for the result to be true.
NOT: The condition must be false for the result to be true.

In software, these logical gates are essential for controlling the flow of a program. For example, in conditional statements ( ex, using if condition in programming ), you might use Boolean logic to determine whether to execute a block of code:

if (isLoggedIn && hasPermission) {
  accessGranted();
}

if (!name || !email) {
  signUp();
}

So, This simple line of code is built on the philosophical principles of Boolean logic.

Conclusion: The Mind Behind the Code

When we write code, we aren’t just creating instructions for a machine; we’re engaging in a process of structured thought. Just as philosophers rely on logical frameworks to explore truth and reason, software engineers use logic to build and maintain the digital world.

Understanding the philosophical roots of software engineering can help us see beyond the syntax and frameworks we use every day. It reveals the universal principles that underpin both our thinking and our code. Logic is more than just a tool — it’s the blueprint of everything we build, and it helps us bring clarity and order to the complex problems we solve.

By exploring these connections, we can elevate our craft from engineering to a thoughtful and reflective practice.

Thank you for reading and any contribution is more than welcome in the threads below!

State Management Patterns in React

Mohamed Khaled Yousef — Fri, 01 Dec 2023 17:27:11 +0000

Hello developer! glad to see you again 👋

Introduction

Welcome, React enthusiasts! Building robust applications involves mastering the art of state management. In this article, we embark on a journey to demystify state management patterns in React. From local component state to advanced solutions like Redux, we'll unravel the concepts through examples that are both enlightening and easy to follow.

1. Local Component State

At the heart of React's simplicity lies local component state. Let's dive into the basics of using the useState hook to manage state within a component.

Example:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

Understanding local state is fundamental, especially for smaller components where managing state locally is efficient and straightforward.

2. Lifting State Up

As our applications grow, so does the need for shared state. Learn the art of lifting state up, a technique that allows components to share and synchronize state.

Example:

import React, { useState } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <ChildComponent count={count} onIncrement={incrementCount} onDecrement={decrementCount} />
    </div>
  );
};

const ChildComponent = ({ count, onIncrement, onDecrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={onIncrement}>Increment</button>
    <button onClick={onDecrement}>Decrement</button>
  </div>
);

Lifting state up becomes invaluable when multiple components need access to the same state. It fosters a cohesive data flow across your application.

3. Context API

Enter the Context API, a powerful tool for managing global state without the need for prop drilling.

Example:

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

Context API shines in larger applications, providing a centralized hub for state management without the need to pass props through multiple layers.

4. Redux (State Management Library)

For larger applications with complex state logic, Redux steps in as a predictable state container. Let's take a peek into the Redux universe.

Example:

// Install required packages: redux, react-redux

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

// reducers.js
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

// App.js
import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

const App = () => {
  return (
    <Provider store={store}>
      <CounterComponent />
    </Provider>
  );
};

const CounterComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default App;

Redux takes center stage in managing the state of larger applications, providing a structured and predictable flow for complex state logic.

Conclusion

Understanding state management patterns is the key to building scalable and maintainable React applications. From the simplicity of local component state to the structured predictability of Redux, each pattern serves a unique purpose.

In this article, we've navigated through fundamental and advanced state management patterns, offering you a toolkit to elevate your React development journey. Experiment with these patterns, explore their nuances, and choose the one that best aligns with your project's needs.

Happy coding, and may your React applications flourish with efficient state management!

References :

useState
Lifting State Up
useContext
Redux

Hacktoberfest 2023: Contributing to React & Next.js projects

Mohamed Khaled Yousef — Fri, 06 Oct 2023 05:46:09 +0000

Hello all 👋

For newcomers to open-source ( todos )

Using Next.js (app router), TypeScript and Tailwind CSS
Contribute at https://github.com/this-mkhy/y

Create a layout to contain header, home and footer.
Create header with logo, and 3 pages profile, todos and fav-todos.
Profile have user data like first name, last name, email and country.
Todos must list all user todos and the user can update and delete todo. User also can select his/her favorite todos.
FavTodos must contain only the favorite todos.
in Home page, the user create a post about his/her todo.
Create footer that have copyright and social media links.

For who want to learn react step by step and contribute to a react project:

Contribute at https://github.com/this-mkhy/react-curve
Try to fix responsive issues, update logic and add features.

Remember, to be creative and make the easy things easy and the hard things possible.

Hacktoberfest: Contributing to React project

Mohamed Khaled Yousef — Tue, 18 Oct 2022 06:22:11 +0000

Hello all 👋

For newcomers to open-source

Contribute at https://github.com/this-mkhy/Dev-Connections

For mid-level or experienced to open-source and want to contribute to a react project:

Check this live preview: http://this-react-curve.vercel.app/
Contribute at https://github.com/this-mkhy/react-curve
Try to fix responsive issues, update logic and add features.

Remember, to be creative and make the easy things easy and the hard things possible.

Week 8 - Todo-Delete App

Mohamed Khaled Yousef — Thu, 28 Jul 2022 19:05:46 +0000

Welcome to Week 8 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Todo-Delete App

This week we created a todo-delete app. An app that allows user to add any tasks in a form and delete that task from the list in react.

To create a Todo-Delete component; We have to :

Create three components, the parent TodoDeleteV2, ItemForm and PrintItems child components.
In the parent TodoDeleteV2 component :
- Create a state that stores the lists and function to update what’s on the screen in response to submit button.
- In handleAddItem method, when we want to update an array stored in state, we need to make a copy of an existing one, and then set state to use the new array.
- In handleDeleteItem method, we filter our list items and return all the list items except the once that was removed when clicked.
- Send handleAddItem method to ItemForm component and send handleDeleteItem method and lists to PrintItems component as props.
In the child ItemForm component :
- Create a state that stores the item and function that handles updates in response to a change input and submit button.
- We handleInputChange and submit when a user interacts with the form.
Finally, In the child PrintItems component :
- We just map to render the list of items.
- For each list item, print the name of the item and Delete button to delete that item.

Code

TodoDeleteV2 Component

import React, {useState} from 'react';

import ItemForm from './ItemForm';
import PrintItems from './PrintItems';

const TodoDeleteV2 = () => {
    const [lists, setLists] = useState([])

    const handleAddItem = (item) => {
      item.id = lists.length + 1
      setLists([...lists, item])
    }

    const handleDeleteItem = (id) => {
      setLists(lists.filter((item) => item.id !== id))
    }

    return (
        <div>
          <h2>Delete from Todo</h2>

          <ItemForm addItem={handleAddItem} />
          <PrintItems 
              lists={lists} 
              deleteItem={handleDeleteItem}/>

      </div>
    );
}

export default TodoDeleteV2;

ItemForm Component

import React, {useState} from 'react'; 

const ItemForm = (props) => {
  const initialFormState = { id: null, name: '' }
  const [item, setItem] = useState(initialFormState)

  const handleInputChange = (ev) => {
    const { name, value } = ev.target

    setItem({ ...item, [name]: value })
  }

  const handleSubmit = (ev) => {
    ev.preventDefault()
    if (!item.name) return
    props.addItem(item)
    setItem(initialFormState)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>Enter Item</label> <br />
        <input
          type="text"
          name="name"
          value={item.name}
          onChange={handleInputChange}
        />
        <br />
        <button>Add new item</button>
      </form>
    </>
  );
}

export default ItemForm;

PrintItems Component

import React from 'react';

const PrintItems = (props) => {
  return (
    <div>
      {props.lists.length > 0 ? (
        props.lists.map((item) => (
          <ul key={item.id}>
            <li>{item.name}</li>
            <button 
                onClick={() => 
                props.deleteItem(item.id)}>
              Delete
            </button>
          </ul>
        ))
      ) : (
        <div>
          No items
        </div>
      )}
    </div>
  );
}

export default PrintItems;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview

Week 7 - Todo-Add App

Mohamed Khaled Yousef — Fri, 01 Jul 2022 05:06:50 +0000

Welcome to Week 7 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Todo-Add App

This week we created a todo-add app. An app that allows user to add any tasks in a form in react.

To create a Todo-Add component; We have to :

Create three components, the parent TodoAddV1, ItemForm and PrintItems child components.
In the parent TodoAddV1 component, Create a state that store the lists and function to update what’s on the screen in response to submit button.
In handleAddItem method, when we want to update an array stored in state, we need to make a copy of an existing one, and then set state to use the new array.
Send handleAddItem method to ItemForm component and send lists to PrintItems component as props.
In the child ItemForm component, Create a state that store the item and function that handle updates in response to change input and submit button.
We handleInputChange and submit when user interact with the form.
Finally, In the child PrintItems component, We just map to render the list items and print the name of the item.

Code

TodoAddV1 Component


import React, {useState} from 'react';

import ItemForm from './ItemForm';
import PrintItems from './PrintItems';

const TodoAddV1 = () => {
    const [lists, setLists] = useState([])

    const handleAddItem = (item) => {
      item.id = lists.length + 1
      setLists([...lists, item])
    }

    return (
         <div>
           <h2>Add to Todo</h2>

           <ItemForm addItem={handleAddItem} />
           <PrintItems lists={lists} />
         </div>
    );
}

export default TodoAddV1;

ItemForm Component

import React, {useState} from 'react'; 

const ItemForm = (props) => {
  const initialFormState = { id: null, name: '' }
  const [item, setItem] = useState(initialFormState)

  const handleInputChange = (ev) => {
    const { name, value } = ev.target

    setItem({ ...item, [name]: value })
  }

  const handleSubmit = (ev) => {
    ev.preventDefault()
    if (!item.name) return
    props.addItem(item)
    setItem(initialFormState)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>Enter Item</label> <br />
        <input
          type="text"
          name="name"
          value={item.name}
          onChange={handleInputChange}
        />
        <br />
        <button>Add new item</button>
      </form>
    </>
  );
}

export default ItemForm;

PrintItems Component

import React from 'react';

const PrintItems = (props) => {
  return (
    <div>
      {props.lists.length > 0 ? (
        props.lists.map((item) => (
          <ul key={item.id}>
            <li>{item.name}</li>
          </ul>
        ))
      ) : (
        <div>
          No items
        </div>
      )}
    </div>
  );
}

export default PrintItems;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview

Week 6 - Sum Two Numbers App

Mohamed Khaled Yousef — Tue, 31 May 2022 21:22:06 +0000

Welcome to Week 6 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Sum Two Numbers App

This week we created a Sum Two Numbers app. The user enter two numbers in a form and result of the summation is shown in react.

To create a SumTwoNum component; We have to :

Create two states that hold the value of each number.
Create a state that holds the summation value with an initial value equal to zero.
Create a calculate function that calculates and updates the summation.
Create two inputs and handle events for each number.
onClick submit button, calculate method is fired and do summation.

Code

import React, {useState} from 'react';

const SumTwoNum = () => {
    const [number1, setNumber1] = useState();
    const [number2, setNumber2] = useState();
    const [summation, setSummation] = useState(0);

    function calculate() {
        setSummation(number1 + number2);
    }

    return (

       <div>
            <h2>Sum Two Numbers</h2>
            <input
                placeholder="First Number"
                type="number"
                value={number1}
                onChange={(ev) => setNumber1(+ev.target.value)}
            />
            <input
                placeholder="Second Number"
                type="number"
                value={number2}
                onChange={(ev) => setNumber2(+ev.target.value)}
            />
            <br />
            <button onClick={calculate}>Sum Two Numbers</button>
            <p>Summation  : {summation || "0"}</p> 
        </div>
    );
}

export default SumTwoNum;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Week 5 - Disable Button App

Mohamed Khaled Yousef — Tue, 24 May 2022 17:35:49 +0000

Welcome to Week 5 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Disable Button App

This week we created a Disable Button app. When the data changes, we handle it and disable the button in react.

To create a DisableButton component; We have to :

Input data is usually handled by the component. So all the data is stored in the component state.
Create a state that holds the value of the input with inital value an empty string.
The value of the input is the value of the state.
Adding event handlers in the onChange attribute to control input changes and update our state.
The submit button is disabled if the length of value in the input is empty.
Now, When the data changes, we handle it and disable the button.

Code

import React, {useState} from 'react';

const DisableButton = () => {
    const [value, setValue] = useState("");

    return (
        <div>
            <h2>Handle Input</h2>
            <input
                type="text"
                placeholder="Enter Your Title"
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <button disabled={value.length < 1}>
                Submit
            </button>
            <p>{value}</p>
        </div>
    );
}

export default DisableButton;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Week 4 - Handle Input App

Mohamed Khaled Yousef — Sun, 01 May 2022 15:22:25 +0000

Welcome to Week 4 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Handle Input App

This week we created a Handle Input app that handled the data of the input when it changes value in react.

To create a HandleInput component; We have to :

Input data is usually handled by the component. So all the data is stored in the component state.
Create a state that holds the value of the input with inital value an empty string.
The value of the input is the value of the state.
Adding event handlers in the onChange attribute to control input changes and update our state.
Now, We handled the data when it changes value

Code

import React, {useState} from 'react';

const HandleInput = () => {
    const [value, setValue] = useState("");

    return (
        <div>
            <h2>Handle Input</h2>
            <input
                type="text"
                placeholder="Enter Your Title"
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <p>{value}</p>
        </div>
    );
}

export default HandleInput;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Week 3 - Toggle App

Mohamed Khaled Yousef — Wed, 20 Apr 2022 11:49:04 +0000

Welcome to Week 3 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Toggle App

This week we created a toggle app that show and hide content when click on button in react.

To create a toggle component; We have to :

Create a state that holds the button status.
The button status either is shown or not.
When clicking on the button, fire the setShow method.
setShow method reverses the current show state.
if the show state is true, show <h2> on the screen and toggle "Hide Welcome" on the button.
if the show state is false, Don't show the message on the screen and toggle "Show Welcome" on the button

Code

import React, {useState} from 'react';

const Toggle = () => {
    const [show, setShow] = useState(true);

    return (
        <div className="showHide">
            <h2>Toggle</h2>
            <div>
                <button onClick={() => setShow(!show)}>
                    {show ? "Hide Welcome" : "Show Welcome"}
                </button>
                {show && <h2>Hi, How are you ? </h2>}
            </div>
        </div>
    );
}

export default Toggle;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Week 2 - Colors App

Mohamed Khaled Yousef — Thu, 31 Mar 2022 06:44:22 +0000

Welcome to Week 2 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Colors App

This week we created a colors app that displays the list of the colors in react.

To create a color component; We have to :

Create a state that holds the colors
Colors is an array of objects
Each color has an id , name, and hex properties
We loop through the colors array using the function
We return an
element for each item
We should provide a key for each list item
We assign the resulting array of elements to colorItems

In JSX, we include the entire colorItems array inside an element, and render it to the DOM

Code

import React from 'react';

const DisplayColors = () => {
    const colors = [
        {id: 1, name: 'brown', hex: '#A52A2A'},
        {id: 2, name: 'crimson', hex: '#DC143C'},
        {id: 3, name: 'red', hex: '#FF0000'},
    ]

    const colorItems = colors.map(color => 
        <li key={color.id} id="currColor">
            {color.id}  | {color.name} | {color.hex}
        </li>)

    return (
        <div className="displayColors">
            <h2>Display Colors</h2>
            <div>
                {colorItems}
            </div>
      </div>
    );
}

export default DisplayColors;

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code