The Journey of #100DaysOfCode (@Amir_BouGhanem)

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿฌ - ๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ถ๐—ป๐—ด & ๐—ฅ๐—ฒ๐—ป๐—ฑ๐—ฒ๐—ฟ๐—ถ๐—ป๐—ด ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—–๐—ผ๐—บ๐—ฝ๐—ผ๐—ป๐—ฒ๐—ป๐˜๐˜€ :closed_book:

React components are the building blocks of any React application. Components allow you to split the UI into independent, reusable pieces, and think about each piece in isolation. There are two main types of components in React: functional and class-based components.

Component Types

  • Functional Component: Functional components are simple JavaScript functions that return JSX (the UI structure). Since the release of React hooks, theyโ€™ve become the go-to method for creating components.
  • Class Component: Class components are older and more verbose than functional components. They were widely used before hooks were introduced. A class component extends React.Component and requires a render() method to return JSX.

To render a React component, use the ReactDOM.render() method to render components to the DOM. In index.js

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿญ - ๐—ฃ๐—ฟ๐—ผ๐—ฝ๐˜€ :closed_book:

Properties (known as Props in React) are arguments passed into React components. They are used to pass data from one component to another. In both functional and class components, props can be accessed as props.propName.
Please refer to the code to learn more about props!

100daysofcode lebanon-mug

4 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿฎ - ๐—ฆ๐˜๐—ฎ๐˜๐—ฒ ๐— ๐—ฎ๐—ป๐—ฎ๐—ด๐—ฒ๐—บ๐—ฒ๐—ป๐˜ ๐˜„๐—ถ๐˜๐—ต ๐˜‚๐˜€๐—ฒ๐—ฆ๐˜๐—ฎ๐˜๐—ฒ ๐—›๐—ผ๐—ผ๐—ธ :closed_book:

State management is one of the most important concepts in React. The state allows components to keep track of dynamic data and render changes automatically when the state is updated. React provides two ways to manage state: using hooks (in functional components).

Definition of React Hooks

React Hooks are special functions introduced in React 16.8 that allow you to use state and other React features (like lifecycle methods) in functional components, which were previously only available in class components. Hooks simplify the way you manage state, handle side effects, and reuse logic across components. Built-in hooks include: useState, useEffect, and useContext.

Hooks follow a few key rules:

  • They must be called at the top level of a functional component.
  • They cannot be called inside loops, conditions, or nested functions.
  • They must be called inside React function components or custom hooks.

With the introduction of React hooks, functional components can now manage state using the useState hook. It allows you to add state to functional components without converting them to class components. Refer to the example below to learn more about useState.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿฏ - ๐˜‚๐˜€๐—ฒ๐—˜๐—ณ๐—ณ๐—ฒ๐—ฐ๐˜ ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ :closed_book:

The useEffect hook is used to handle side effects in React functional components. Side effects can include things like:

  • Fetching data from an API
  • Manually updating the DOM
  • Setting up subscriptions or timers
  • Cleaning up resources

useEffect Simplified:

  • Effect Logic : This is where the side effect is placed. This can be an API call, a subscription setup, or any other logic you want to run after rendering.
  • Cleanup : This optional function is used to clean up the effect (such as canceling a subscription or clearing a timer) when the component unmounts or before the effect runs again.
  • Dependencies Array : This array specifies which values useEffect depends on. When these values change, the effect re-runs. If the array is empty (), the effect runs only once, after the initial render.

Key Concepts of useEffect

  1. Runs after every render by default: By default, useEffect will run after every render (initial render + re-renders).
  2. Control when it runs: By adding a dependencies array, you can control when the effect runs. For example:
  • An empty array [] runs the effect only after the first render (like componentDidMount).
  • Specific dependencies like [count] ensure the effect runs only when count changes.
  1. Cleanup logic: You can return a function from useEffect that will run when the component unmounts or before re-running the effect. This is useful for cleaning up side effects like subscriptions or timers.

useEffect is essential for managing side effects in functional components, making it a powerful tool in any React project!

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿฐ - ๐—›๐—ฎ๐—ป๐—ฑ๐—น๐—ถ๐—ป๐—ด ๐—˜๐˜ƒ๐—ฒ๐—ป๐˜๐˜€ ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ :closed_book:

In React, handling events is similar to handling events in regular HTML, but there are a few key differences:

  • React events are named in camelCase (onClick instead of onclick).
  • You pass a function as the event handler, not a string.

Explanation :

  • The onClick event handler listens for clicks on the button, and the handleClick function is triggered when the button is clicked.

Please refer to the code for deeper context!

100daysofcode lebanon-mug

code.pdf (126.3 KB)

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿฑ - ๐—›๐—ฎ๐—ป๐—ฑ๐—น๐—ถ๐—ป๐—ด ๐—™๐—ผ๐—ฟ๐—บ๐˜€ ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ :closed_book:

Forms in React work similarly to regular HTML forms but require more management, particularly when handling form state and submissions. React provides a way to manage controlled components where the formโ€™s input value is handled by React state.

Explanation :

  • State Management : The useState hook manages the form state. Here, name is the current state value and setName updates it.
  • Handling Input Changes : The onChange event handler listens for user input and updates the state accordingly.
  • Submitting the Form : The handleSubmit function is triggered when the form is submitted, and event.preventDefault() prevents the default form submission (i.e., prevents the page from refreshing).

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿฒ - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—ฅ๐—ผ๐˜‚๐˜๐—ฒ๐—ฟ :closed_book:

React Router is a powerful library used for handling navigation and routing in React applications. It enables your app to have multiple views or pages and lets you navigate between them without reloading the page (client-side routing). This makes the app more dynamic and responsive, improving the user experience.

100daysofcode lebanon-mug

1. Setting Up React Router

To start using React Router, you need to install it via npm or yarn:

๐—‡๐—‰๐—† ๐—‚๐—‡๐—Œ๐—๐–บ๐—…๐—… ๐—‹๐–พ๐–บ๐–ผ๐—-๐—‹๐—ˆ๐—Ž๐—๐–พ๐—‹-๐–ฝ๐—ˆ๐—†

2. Basic Components of React Router

React Router has several key components that are essential for navigation:

  • BrowserRouter : The top-level component that wraps the app and enables routing functionality.
  • Routes : A container component that holds all the route definitions.
  • Route : Defines a path and the component that should be rendered for that path.
  • Link : Used to create navigation links between routes without causing a page reload (unlike the traditional tag).

3. Route Parameters

React Router allows you to define dynamic routes with parameters, which can be accessed in the component.

code.pdf (311.4 KB)

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿณ - ๐—™๐—ฒ๐˜๐—ฐ๐—ต๐—ถ๐—ป๐—ด ๐——๐—ฎ๐˜๐—ฎ ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ :closed_book:

Fetching data from APIs is a crucial aspect of building dynamic React applications. You can use either the native fetch API or an external library like Axios to handle HTTP requests.

Using fetch API

The fetch API is built into modern browsers and is used to make HTTP requests.

Explanation :

  • The useEffect hook is used to fetch data when the component mounts.
  • The fetch function retrieves data, which is then converted to JSON and stored in state using setData.
  • Conditional rendering is used to show a loading message while the data is being fetched.

Using Axios

Axios is a promise-based HTTP client that provides a more robust way of handling requests and responses. It simplifies making requests and automatically transforms JSON responses.

To learn more about the fetch API: Fetch API - Web APIs | MDN
To learn more about Axios: GitHub - axios/axios: Promise based HTTP client for the browser and node.js

100daysofcode lebanon-mug


3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿด - ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ ๐—ฃ๐—ฒ๐—ฟ๐—ณ๐—ผ๐—ฟ๐—บ๐—ฎ๐—ป๐—ฐ๐—ฒ ๐—ข๐—ฝ๐˜๐—ถ๐—บ๐—ถ๐˜‡๐—ฎ๐˜๐—ถ๐—ผ๐—ป :closed_book:

As your React application grows, performance may degrade due to unnecessary re-renders or large amounts of data processing. Here are some strategies for optimizing React performance.

1. Memoization with React.memo

React.memo is a higher-order component that prevents unnecessary re-renders of functional components if their props havenโ€™t changed.

2. Using useCallback and useMemo

  • useCallback: Caches function references to avoid unnecessary re-renders when passing functions as props.
  • useMemo: Memoizes expensive computations to avoid re-calculating them on each render.

3. Lazy Loading with React.lazy and Suspense

You can improve performance by lazy loading components, especially for large, infrequently-used components.

4. Virtualization for Large Lists

If your app displays large lists of data, use libraries like React Virtualized or React Window to render only the visible items in the viewport.

100daysofcode lebanon-mug

code.pdf (177.6 KB)

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿด๐Ÿต - ๐—จ๐—ป๐—ถ๐˜ ๐—ง๐—ฒ๐˜€๐˜๐—ถ๐—ป๐—ด ๐—ถ๐—ป ๐—ฅ๐—ฒ๐—ฎ๐—ฐ๐˜ :closed_book:

Testing is crucial for ensuring that your React components work as expected. There are several approaches to testing React applications, including unit testing, integration testing, and end-to-end (E2E) testing. Today, we will tackle unit testing.

Jest is a popular testing framework for JavaScript and React Testing Library helps with testing React components in a way that mimics user interaction. By combining both Jest & React Testing Library, we can write efficient quick unit tests.

100daysofcode lebanon-mug


3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿฌ - ๐—˜๐Ÿฎ๐—˜ ๐—ง๐—ฒ๐˜€๐˜๐—ถ๐—ป๐—ด ๐—จ๐˜€๐—ถ๐—ป๐—ด ๐—–๐˜†๐—ฝ๐—ฟ๐—ฒ๐˜€๐˜€ :closed_book:

End-to-End (E2E) testing is a technique to test the entire flow of an application, from the front-end to the back-end. E2E testing ensures that all components of an application work together as expected. Cypress is one of the most popular tools for E2E testing in JavaScript applications, especially for React.

Cypress is fast, reliable, offers a great developer experience as it comes with a test runner, it also offers automatic waiting for DOM elements to be loaded before proceeding to further steps, and time travel (You can see what happened at each step of the tests through snapshots).

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿญ - ๐—ช๐—ต๐—ฎ๐˜ ๐—ถ๐˜€ ๐—–๐—น๐—ผ๐˜‚๐—ฑ ๐—–๐—ผ๐—บ๐—ฝ๐˜‚๐˜๐—ถ๐—ป๐—ด? :closed_book:

Cloud Computing is the practice of using a network of remote servers hosted on the internet to store, manage, and process data, rather than a local server or a personal computer (PC).

Cloud Hosting is a result of years of work and development in the server-side. It all started with a Dedicated Server which can host 1 app. Then, Virtual Private Server came into the mix, offering a huge leap forward in server capabilities for businesses. It offered the same as a Dedicated Server, but with the ability to host multiple apps. Later came Shared Hosting, 1 machine, hundreds of apps for hundreds of businesses.

It all came down to what we have now, Cloud Hosting, multiple physical machines that offer multiple cloud services for millions of businesses and users.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿฎ - ๐—–๐—น๐—ผ๐˜‚๐—ฑ ๐—–๐—ผ๐—บ๐—ฝ๐˜‚๐˜๐—ถ๐—ป๐—ด ๐—ฆ๐—ฒ๐—ฟ๐˜ƒ๐—ถ๐—ฐ๐—ฒ ๐— ๐—ผ๐—ฑ๐—ฒ๐—น๐˜€ :closed_book:

Today, I will share the common cloud models known across all cloud providers worldwide.

  1. IaaS (Infrastructure as a Service)

Provides virtualized computing resources over the internet. It offers businesses the ability to rent IT infrastructure components such as servers, storage, and networking hardware on a pay-as-you-go basis.

Examples: Azure, AWS, Oracle, Google Cloud

  1. PaaS (Platform as a Service)

Provides a platform and environment for developers to build, deploy, and manage applications without dealing with the underlying infrastructure. PaaS offers a complete development and deployment environment in the cloud, including servers, storage, networking, and middleware, allowing developers to focus solely on writing code and developing applications.

Examples: Heroku, Google App Engine.

  1. SaaS (Software as a Service)

Software applications delivered over the internet as a service. The SaaS provider manages the underlying infrastructure, platforms, and software, while users simply interact with the application.
Examples: Gmail, MS 365.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿฏ - ๐— ๐—ถ๐—ฐ๐—ฟ๐—ผ๐˜€๐—ผ๐—ณ๐˜ ๐—”๐˜‡๐˜‚๐—ฟ๐—ฒ :closed_book:

Microsoft Azure is a comprehensive cloud computing platform provided by Microsoft. It offers a wide range of cloud services, including computing, analytics, storage, networking, and more, allowing businesses to build, deploy, and manage applications through a global network of data centers.

Azure provides both Platform as a Service (PaaS), Infrastructure as a Service (IaaS), and Software as a Service (SaaS) options, making it a versatile cloud solution for enterprises, developers, and startups alike.

Azure also supports cross-cloud via Azure Arc. It currently has 58 regions across 140 countries.

In the upcoming days, I will cover more about what Azure has to offer.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿฐ - ๐—”๐˜‡๐˜‚๐—ฟ๐—ฒ ๐—–๐—ผ๐—บ๐—ฝ๐˜‚๐˜๐—ถ๐—ป๐—ด ๐—ฆ๐—ฒ๐—ฟ๐˜ƒ๐—ถ๐—ฐ๐—ฒ๐˜€ :closed_book:

Microsoft Azure offers a wide range of cloud computing services. Those include but are not limited to:

- Azure Virtual Machines โ†’ Run virtualized OS instances in the cloud.

- Azure Container Instances โ†’ Run containers without needing to manage any virtual machines.

- Azure Kubernetes Service (KAS) โ†’ Simplifies the deployment, management, and scaling of containerized applications using Kubernetes.

- Azure Functions โ†’ Run small pieces of code without worrying about infrastructure management.

- Xamarin โ†’ Create powerful and scalable native mobile apps with .NET and Azure.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿฑ - ๐—”๐˜‡๐˜‚๐—ฟ๐—ฒ ๐—”๐—œ ๐—ง๐—ผ๐—ผ๐—น๐˜€ :closed_book:

Microsoft Azure offers a wide range of AI tools . Those include but are not limited to:

- Personalizer โ†’ Deliver rich, personalised experiences for every user.

- Translator โ†’ Add real-time, multi-language text translation to your apps, website, and tools.

- Anomaly Detector โ†’ Detect anomalies in data to quickly identify and troubleshoot issues.

- Azure Bot Service โ†’ Intelligent, serverless bot service that scales on demand.

- Form Recogniser โ†’ Automate the extraction of text, key/value pairs and tables from your documents.

- Computer Vision โ†’ Easily customize computer vision models for your unique use case.

- Language Understanding โ†’ Build natural language understanding into apps, bots, and IoT devices.

- QnA Maker โ†’ Create a conversational question-and-answer bot from your existing content.

- Text Analytics โ†’ Extract information such as sentiment, key phrases, named entities, and language from your text.

- Content moderator โ†’ Moderate text and images to provide a safer, more positive user experience.

- Face โ†’ Detect and modify people and emotions in images.

- Ink Recogniser โ†’ Recognise digital ink content, such as handwriting, shapes, and document layout.

100daysofcode lebanon-mug

3 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿฒ - ๐—–๐—น๐—ผ๐˜‚๐—ฑ ๐—ฃ๐—น๐—ฎ๐˜๐—ณ๐—ผ๐—ฟ๐—บ ๐—–๐—ต๐—ฎ๐—ฟ๐—ฎ๐—ฐ๐˜๐—ฒ๐—ฟ๐—ถ๐˜€๐˜๐—ถ๐—ฐ๐˜€ :closed_book:

A proper cloud platform must hold to certain characteristics that are necessary for the success of any business or application depending on its infrastructure and services. There are 5 main abilities that any cloud platform must provide for the given user so that he is able to depend fully on the cloud.

Availability โ€“ The userโ€™s ability to ensure a service remains available (Highly Available HA).

Scalability โ€“ The userโ€™s ability to grow rapidly without restriction.

Elasticity โ€“ The userโ€™s ability to shrink and grow to meet his demands.

Fault Tolerance โ€“ The userโ€™s ability to prevent failure.

Disaster Recovery โ€“ The userโ€™s ability to recover from any failure (Highly Durable DR).

100daysofcode lebanon-mug

4 Likes

:closed_book: ๐——๐—ฎ๐˜† ๐Ÿต๐Ÿณ - ๐—ช๐—ต๐—ฎ๐˜ ๐—ถ๐˜€ ๐——๐—ฒ๐˜ƒ๐—ข๐—ฝ๐˜€? :closed_book:

DevOps is a set of practices, tools, and cultural philosophies aimed at automating and integrating the processes between software development and IT operations teams. The goal is to shorten the software development lifecycle, improve collaboration, and continuously deliver high-quality software faster and more reliably.

100daysofcode lebanon-mug

3 Likes

Almost there @Amir_BouGhanem! Great job on getting here! :muscle:

1 Like

Thank you @Harshit ! Itโ€™s been a hell of a ride and itโ€™s coming to an end. 3 days to go! :smile: :rocket:

2 Likes