When you start your React project, you will be slightly confused about styling the app structure.

There are several ways to style React components, but the main question is how to choose the right method for styling your component.

Let’s deep with some methods and specify it’s pros and cons to facilitate the selection for you 💁

Factors you should care about while picking styling architecture:

  • Personal preferences, it is not a shame multiple ways have the same pros and cons so the decision may back to your preferences
  • Architectural goals of the way you work aligned with your team

Styling Strategies In React:

GraphQl queries & mutations mind map — by (Dina Khaled)

Hey, Did you dreamed one day as a Front end engineer to write your API response with yourself without a long conversation with the Back end engineer to agree on every API response schema?

FE: could you please retrieve the ID for me here? 👀
BE: oh, you need that, okay I will 👌

FE: did you change the API name? I got a not found on my request 🥴
BE: Oh, my bad yes it’s changed yesterday 🤦

No more discussions like that with GraphQl 🎇

What is GraphQl?

GraphQL is a query language for your API, and a server-side runtime…


“Accessibility” generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.

Improving the accessibility with DOM


<img alt="Dina's profile picture" src="PATH" />
  • In situations when an image is already explained with text content the img still needs an alt attribute, but it can…

We have a series of articles about Getting started with Redux, the links at the end.

Why should we use middleware?

  1. the middleware intercepts the action object before Reducer receives it and gives the functionality to perform additional actions.
  2. That’s where asynchronous action libraries such as Redux Saga, Redux Thunk come into play.

How it works?

[ Action ] <-> [ Middleware ] <-> […

NOTE: If you don’t hear before about BEM please read the attached link below before you start -> BEM for beginner

Hello everyone 👋

Today we will talking about how to implement BEM methodology with frameworks and I will start with Angular

Angular allows you to implement style encapsulation concept, so you might wonder if it is still necessary to use BEM since Angular allows scoped styling based on every component ?!

The answer is yes it also increases the re-usability concept in Angular
now how to do that?

we will imagine that we will build a new website so…

Introduction to sass

You may hear a lot about sass and many people told you that when you learn sass it will be your magic wand to style your website dynamically! that’s true and easy to learn come with me …🚶

Why SASS and what is it?

  • browsers are understanding only normal CSS files

simply this is the problem which SASS came to solve it.

SASS (Syntactically Awesome Stylesheets) is a pre-processor for CSS which introduces to you programming logic in a style dress that’s amazing right!

so you can use sass features and then it compiled to CSS to be…

Dina Elghndour

Frontend ِEngineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store