Without a doubt styling react Components helps to adhere to the concerns of styling and makes components more readable and presentable.

Styled components gives control to components that rely on JavaScript for their styling back to CSS instead of using a couple of conditional class Name. This makes our code look neat and easier to refactor.

There are four different ways of styling React Components depending with your personal preference as a developer or the complexity of the application you are building .

The different use cases for different methods of styling:

Case 1: Inline CSS.

Used when you want…


In layman’s language destructuring means destroying the structure of something.

Destructuring is part of ES6 specifications. Objects allow us to create a single entity that stores data items by key, and arrays allow us to gather data items into an ordered collection.

What if we are interested to pass those to a function, it may need not an object/array as a whole, but rather individual pieces?

Destructuring assignment allows us “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient. Destructuring also works great with complex functions that have a lot of parameters

Array Destructuring

An example of…


Responsive design is useful when rendering a web page on different screen sizes.It helps to get rid of distortion or irregularities which may be present while displaying a web page.

This post describes how to build a responsive navigation bar using HTML,CSS and Vanilla JavaScript.

What do you need?

  • Basic knowledge about HTML, CSS and JavaScript
  • A text editor of your choice.

The structure of the HTML Code

.The tag that contains the navbar is the header tag.

Inside the ‘nav’ tag there are three elements: a div with a class of ‘logo’ , a Ul(unordered list) with a class of ‘nav-links’ and a div with a class of ‘burger’.


“You can do almost anything with soup stock.It is like a strong foundation.When you have the right foundation everything taste good.”

This quote struck my mind when I made a resolution to advance my knowledge in JavaScript programming.Putting into consideration, object oriented programming is one of the underlying structures that make programming languages powerful and the paradigm for software development.

OOP is one of the building blocks in JavaScript programming.One of the most popular advantage is that it allows you to break your code into bite-sized problems that can be solved one at a time.Since …


For beginners the most important ingredient for learning is to remain confident and embrace passion to start off your journey.

When I got an email message that I had qualified to join She Code Africa mentor ship program as a mentee under JavaScript track, I knew that was the beginning of a new journey for me.Behind every beginner lies a board, a big vision and unapologetic ambition.Here is what I have learnt so far on introduction to JavaScript:

JavaScript is a client-side scripting language developed by Brendan Eich. It is used mainly for enhancing the interaction of a user with…

Wanjiku Maina

Passion is the fire that Lights your way.

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