DEV Community: Blossom Babs

8 Best Practices for React.js Component Design

Blossom Babs — Mon, 17 Jul 2023 09:26:00 +0000

React is one of the most popular JavaScript libraries for building user interfaces, and one of the reasons it gained so much popularity is its Component-Based Architecture. React encourages building UI in reusable components, allowing developers to build complex user interfaces more efficiently.

Since we would be dealing with components in react, it is essential to follow best practices for component design. In this article, we'll explore 10 best practices that will help you write cleaner, more maintainable, and reusable React components:

1 - consistent formatting: There are several ways to create a functional component in a react application, some of them include - arrow functions, functions declarations and function expression. All of these are valid ways to create a component but it is important to stick with 1 way of declaring a component in your application. Inconsistent component functions can make your code difficult to read.

2 - Follow a design pattern and stick to it: Following an already established design pattern in your react application keeps your components organised, easy to read, test and make changes. Two of already established practices include:

a. Container/Presentational Pattern: Following this approach ensures a strict separation of concern between the business logic and user interface. Where the container components manages data and state, while presentational components focus on rendering the UI.easier to test.

b. Flux Pattern: Flux pattern was introduced by the facebook team to introduce a unidirectional data flow in your react application, this is commonly enforced using state management libraries like redux.

3 - Single Responsibility Principle: Each component in your app should have a single responsibility, focusing on one specific functionality. Following this principle makes the component more reusable and less prone to bugs. For example, in most cases, a "Button" component should handle ONLY rendering and user interactions.

4 - Prop Types and Default Props: Defining prop types and default values ensures component reliability. PropTypes validate the expected types of props, catching potential bugs early. Default props provide fallback values if a prop is not explicitly passed, avoiding unexpected behaviour.

Do not use typescript in your project? This is totally fine, you can still achieve this using the propTypes library.

npm install --save prop-types



import PropTypes from 'prop-types';

Button.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
};

 function Button(props) {
  const {name, age} = props
  return (
    <div className='App'>
      <h1>Hello {name}</h1>
      <h2>I am {age}</h2>
    </div>
  );
}

export default Button;

5 - Destructuring Props: Take advantage of the object destructing to access props. This can reduce verbosity in the code and enhance readability. It also improves the clarity of component interfaces and makes it easier to identify which props are used.

An example of this can be seen in the Button component code shared above: const {name, age} = props

6 - Prop and state: It is crucial to understand the difference between your props and your state. Props are static data passed around within components. They are immutable and do not change. State is used to manage dynamic data within a component. It represents the internal state of a component, allowing it to handle and respond to user interactions, events, or changes in the component's own logic.

7 - Styling: Styling is an important aspect of React component design. The most important thing here is to pick a styling of choice and remain consistent with it across components in the library. Some of the most popular styling choices include:

Use CSS-in-JS libraries: CSS-in-JS libraries like styled-components can make it easier to style your components and create reusable styles.
Use CSS modules: CSS modules allow you to create component-level styles that don’t clash with styles from other components.
Use utility-first CSS framework like tailwind css
Use UI libraries such as material-ui, ant design, chakra etc.
Create reusable styles: When creating custom styles with css, sass etc. It is important to prioritise reusable styles that can be used across your application. This can help you create a consistent visual style and make your components more maintainable.

8 - Testing: Testing is perhaps one of the most severely underrated aspects when it comes to building react components. Here are some best practices to consider:

Use libraries like Jest and cypress to write unit tests for your components.
Test props and state: Test that your components handle props and state correctly. This can help you catch bugs that might not be apparent in the UI.
Test end to end user interactions: Test that your components handle user interactions correctly. This can help you ensure that your components are user-friendly and responsive.

Conclusion:

By following these best practices for React component design, you'll be able to create cleaner, more maintainable, and reusable components. Each practice reinforces important principles such as single responsibility, reusability, prop validation, and performance optimisation. Incorporating these practices into your React projects will contribute to better code quality, improved developer experience, and ultimately, more robust applications.

Remember, mastering these best practices requires practice and continuous learning. Stay up-to-date with the evolving React ecosystem and always strive for code that is efficient, readable, and easy to maintain.

Happy coding ☕️

Mocking vs Stubbing

Blossom Babs — Tue, 02 May 2023 09:32:28 +0000

𝐌𝐨𝐜𝐤𝐢𝐧𝐠 !== 𝐒𝐭𝐮𝐛𝐛𝐢𝐧𝐠

When it comes to testing your react applications, we typically do not test the actual API calls, we instead use test doubles

Test doubles is the general term for defining objects that are not real. Mocks and stubs are a part of a class of test doubles. They are a kind of pretend object used in place of a real object for testing purposes. This term includes dummy, fake, stub and mock.

Mocking and stubbing are often used interchangeably but they are not the same.

They both involve using fake objects to manage and isolate side effects. Mocking and stubbing are two software techniques used to create controlled and predictable environments for testing code, but they differ in their approach and purpose.

Mocking

This is the technique of creating a fake object that mimics the behaviour of a real object, typically for the purpose of testing interactions between objects. Mock objects verify that the tested code correctly 𝐜𝐚𝐥𝐥𝐬 𝐦𝐞𝐭𝐡𝐨𝐝𝐬 𝐨𝐧 𝐭𝐡𝐞 𝐦𝐨𝐜𝐤𝐞𝐝 𝐨𝐛𝐣𝐞𝐜𝐭 and that the expected results are returned.

Stubbing

On the other hand, is the technique of creating a fake object or function that returns 𝐩𝐫𝐞𝐝𝐞𝐟𝐢𝐧𝐞𝐝 𝐯𝐚𝐥𝐮𝐞𝐬, typically for the purpose of testing specific code paths. Stub objects are used to simulate the behaviour of a real object or function, but without actually performing the full functionality. Stubbing is often used to test error handling, and edge cases, or to isolate a specific piece of code for testing.

Some of their Key differences include:

Style

Mocks tests for the behaviour of the unit
Stubs tests for the state of the unit

Principle

According to the principle of testing only one thing per test, there may be several stubs in one test, but generally, there is only one mock.

Lifecycle

Test lifecycle with stubs:

Setup - Prepare the object that is being tested and its stubs collaborators.
Exercise - Test the functionality.
Verify state - Use asserts to check the object's state.
Teardown - Clean up resources.

Test lifecycle with mocks:

Setup data - Prepare the object that is being tested.
Setup expectations - Prepare expectations in mock that are being used by the primary object.
Exercise - Test the functionality.
Verify expectations - Verify that correct methods have been invoked in mock.
Verify state - Use asserts to check the object's state.
Teardown - Clean up resources.

Practical use-case

Mocking makes sense to assert navigation within React app. In the integration test we could create a mock of the navigate function and spy on whether it was called at a certain time while interacting with the page.

Stubbinng is more popular, especially stubbing the state of out-of-process dependencies like:

An API request
Operation on browser cookies
An interaction with an external SDK
Operations on the URL in the browser
An interaction with a Web Storage (local/session storage)

React update 2020

Blossom Babs — Wed, 30 Dec 2020 10:57:44 +0000

React 2020 is here! Here are two new features I have noticed so far:

1. You no longer have to import React and ReactDOM.

I quite liked this for some reason; less code. Also, my js files have the extensions js and my jsx files have the extension jsx.

2. reportWebVitals.js

reportWebVitals has replaced serviceWorker. serviceWorker.js is used to make the react app a progressive web app. However, it has been replaced with reportWebVitals.

Have you started using the new react update? Do you like it? What new features have you noticed? Let me know in the comment section below 👇🏾

Build responsive websites without a framework

Blossom Babs — Sun, 13 Dec 2020 17:59:47 +0000

Summary: Responsiveness is fundamental in web development. With multiple devices and screen resolutions, you want to build a website that works on ALL these screens. In this article, I would be taking you through five things you must consider when building a responsive website without a framework.

What is Responsive Web development?

Responsive web development is an approach to web design that makes web pages render well on a variety of devices and screen sizes. Web development has advanced past simply designing static pages for the computer. Now, your web pages and applications have to support multiple devices viewport; there are lots of them.

Every frontend developer has heard or read the above multiple times. Responsive web development was one of the first things that I heard over and over again. However, I was introduced to bootstrap for responsiveness.

There are lots of CSS frameworks, However Bootstrap was one of my favourite frameworks to use. I used bootstrap in all my projects including react based projects for responsiveness till I realised I was overly dependent on it. Also, Bootstrap can have a lot of dependencies in instances of small-scale projects.

In my journey to build fully responsive without frameworks and with just HTML and CSS, I found out 5 crucial things to do to make sites responsive and developments less cluttered.

1. Always design mobile-first

Contrary to popular opinion, this is not gate-keeping. Designing mobile-first ensures that you are able to get as much information as you can on a smaller screen. When it is scaled up, the components would scale up too. However, if you design for desktop first, most components will go out of place when shrinked down for a smaller sized screen.

As a challenge; you should replicate a simple landing page. Build mobile first then desktop first, see which was easier to scale.

2. Define a fluid layout

My go-to keywords for defining the overall layout of the webpage are:

width: 90%;
margin: 0 auto;

The width ensures that everything on the web page is a set width from the border of the screen size. Margin sets the content of the webpage to the center of the screen width.

You can play around with the width depending on what you need.

Make sure you use percentage to define the width, this is because percentages are fluid and will adjust to the size of the device viewport.

As a challenge; you should add width and margin to the landing page you created above. It would make the scaling up or down much more fluid.

3. Know when to use Rems and Ems

Rems and Ems are size units just like pixels and percentages. Rems and Ems are relative units and are much more preferred when defining font size, border, padding etc.

They are very different though.

Em is relative to the size of its direct or nearest parent, while Rem is only relative to the html (root) font-size.

.body{
font-size: 14px;
}

.container{
width:50%;
background-color:red;
font-size: 1.5em;

h1{
font-size: 3em;
}

}

h1{font-size:3rem;}
h1{font-size:3em;}

As a challenge, run both codes or variations of it.

Both h1 sizes would differ. The em unit will be relative to its parents element(the container); the h1 will be three times the size of the container.
While the rem unit will be relative to the body, not the parent.

When using units, you want to know when to use which so as to avoid cascading effect.

4. Use CSS layouts

Grid and Flex are powerful tools for structuring the layout of the web. Use them!

Once I found out how similar the bootstrap grid was to css native grid and flex, there simply was no going back for me. Infact I find the css grid much simpler, customizable and with no dependencies.

If for some reason, I have to use the Bootstrap framework, it would definitely not for the layouts.

5. Use media queries

When I started writing responsive designs without frameworks, I used media queries everywhere.

@media and screen(max-width: 500px){
//
}

@media and screen(max-width: 320px){
//
}

@media and screen(max-width: 480px){
//
}

It was a mess and this is why I have saved this for last.

It is impossible not to use media queries when talking about responsiveness. But, if you take note of the points above, you wouldn't need media queries for every breakpoint. Instead, they would be used sparingly and specifically. E.g, the point where the screen goes from being a phone to tablet and tablet to laptop and laptop to the television. Not for every brand of iPhone viewport.

Familiarize yourself with the use of width and max-width. The width can be used to set the width for a screen, then max-width for lager screens all in the same block of code. Neither affecting the other.

Bonus point: Avoid setting a fixed width and height for your image. Either set width or height, it would scale up nicely and responsively. Setting a width and height distorts it and makes it unresponsive.
Pro-tip: Use a percentage to define the widths.

Understanding the basics of Javascript reduce method

Blossom Babs — Wed, 13 May 2020 11:56:00 +0000

Here is a basic explanation of how the Javascript reduce() method works.

const evenNums = [2, 4, 6, 8]
evenNums.reduce((accumulator, currVal) => accumulator + currVal)

The above is the most basic (simplest) form you would see the reduce() method being used.

The above example also makes use of the es6 const and arrow function. Let's take an example using the normal function keywords and var, then break it down.

var evenNums = [2, 4, 6, 8]
evenNums.reduce( function (accumulator, currVal){
    return accumulator + currVal
})

Alright.

In the first line of both codes given above, a variable is declared const and var, then they are both named as evenNums, then an array is assigned to this named variables (an array of even numbers).

So, I decided that I want to get the sum of all the numbers in my array and get them as a single value. This is where my reduce() method comes in. The only other way I know of getting this exact result is by using a for loop, but have you seen the above code? it's shorter, easier and straight forward.

Let's continue.

Another thing the above codes have in common is evenNums.reduce() In this case, the reduce method is being called on the array, which is stored in the variable named evenNums.

This is where it gets different. Es6 uses the arrow function which is literally a syntactic sugar, and you do not have to use a return function. So, in the first example, we have (accumulator, currVal) => accumulator + currVal.

The reduce method iterates over the values of an array to return a single value. It takes four argument - accumulator, currVal, index and array. However, the index and array aren't always required. The first two (accumulator and currVal are required and compulsory).

The accumulator is a holder for the values. While the currVal, like the name implies holds the current value in the operation (and the operation in this instance is the addition (+) called on the function.

This is our array [2, 4, 6, 8] and we want to reduce it to a single value. And in our function, the 'way' we want it to be reduced is by adding the values together.

Remember I said, reduce() method works like iteration, so the currVal holds the first value 2, then it sees the operator to be used + then it iterates (moves to the next value), 4, adds it together and stores the sum (which is 6) in the accumulator. It then takes the value from the accumulator and performs the operation '+' with the next value in the array. And so on till it reaches the last item in the array.

The function method follows the same convention. You declare your anonymous function, give it arguments, and voila, return what you want with the given arguments. evenNums.reduce( function (accumulator, currVal){ return accumulator + currVal })

Can you guess what the answer is?

If you did try it and if you didn't, copy out any of the above codes into your chrome developer tools (or any other tool you use), and see if you got it (or what the answer is if you didn't try it).

(accumulator, currVal) are not fixed names!

You can use to name your arguments anything. (total, val) (accum, vals) anything!

The operation you can perform are limitless

The beautiful thing about reduce() method is, you can perform any operation you want with it. I have used addition (+), subtraction (-), division (-), multiplication (*), modulo (%), but of course the operations are limitless and you can try any mathematical operation you want.

Go ahead, open your chrome dev tools (or any other tools), and try writing out a reduce method with a different operator

What is reduce() method

Admittedly, this should have come first, but it was going to be a link to a great article that gives all the essay-y educative bit of reduce(), so I decided to leave it till later part.

For an insightful read on Javascript reduce method, I would suggest you check out this link. [https://www.educative.io/edpresso/what-is-reduce-in-javascript].

Going in-depth into reduce() method

Totally unrelated: I feel like adding 'method' after 'reduce() is a tautology, since the brackets already mean that it's a method.

Reduce() is a very powerful tool I would suggest you get into and utilize properly. For instance, using the index and array arguments of the reduce method, you could use it as a map and filter for your array. You could return another array, get only values that are divisible by eight, greater than four, or any other 'filterable' operation you can think of.

An if statement can be used in a reduce method. An array could also be flattened using a reduce method.

Check out the FreeCodeCamp article, a guide to reduce method to learn much more complex bits of the reduce function. [https://www.freecodecamp.org/news/reduce-f47a7da511a9/].

Resources

Other resources to check out includes the MDN documentation on reduce() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce]

Bitdegree's basics of applying Javascript Reduce on Array [https://www.bitdegree.org/learn/javascript-reduce]

Lastly, finally, Understand the Javascript Reduce Method by Paul Ryan [https://alligator.io/js/finally-understand-reduce/].

If this article wasn't clear enough, do check out all the resources I have provided. They are brilliant. If you have any more questions, I'd be sure to answer them in the discussion section below. If you would like to correct something, add something (especially a useful resource), do leave a comment in the discussion below.

Happy coding.