ReactJS Tutorial# 6 – ReactJS Best Practices

Pavan

6 years ago

Remember, clean code is a consistent style of programming which makes your code much easier to write, read, and maintain. After few tutorials on ReactJS, we will take a look on some of the ReactJS Best Practices and LibrariesÂ that will help you write clean and efficient code.

You can refer the previous articles below-

Tutorial Index

Very often developers spend time on a problem, and of course, once the problem is solved, or at least they think itxsolved, they make a pull request so it can be review and merged to the main branch. Well, you are not done just because your code xworksx. Once it works, it is time and a chance to clean it up by removing your dead code (or zombie code), do little refactoring, and of course removing any commented-out code! Always strive for maintainability. And always ask yourself x xIs someone else going to be able to understand this code six months from now?x

Long story short, write code that you would be proud to take home and show your family.

So when we are talking about React and building Front End Application, we must mention that because it is a library and only handles the View, it offers a lot of different ways to use it and build applications. Let mention some important patterns and libraries which are good to be used with React for building amazing, fast and maintainable Front End Applications.

Redux and Redux-saga

As you already know Flux is the application architecture that Facebook uses for building client-side web applications. It complements Reactxs composable view components by utilizing a unidirectional data flow. For more information regarding this check this article.

Well if we have Redux and we know how to use it then why we need something more. What is this Redux-saga?

Well, Redux doesnxt handle xside-effectx very good. This means that asynchronous calls to APIs, file reads, etc should be handled with some other library, not Redux. So Redux-saga takes the power of the latest trends in JavaScript like Generators and yield and makes calling xside effectsx code much cleaner. Sagas are almost same as functions. You donxt trust me? Check this code.

export function* helloSaga() {
  console.log('Hello Sagas!')
}

It is a function with an asterisk also known as a generator function. For more information about Redux-saga you can check their official documentation x https://redux-saga.js.org/ and for Generator functions, you can check this link x https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

Storybook

It is not only for React, but trust me, if you are building a bigger project and want to have really good structured components then you must check this library for UI Development Environment x https://storybook.js.org/

This UI tool enables developers to create components independently and also different showcase for each component. This is all done in an isolated development environment. Storybook runs outside of the main application so developers can easily develop UI components in isolation without worrying about application-specific dependencies and requirements. Amazing tool for working in teams.

Immutable.js

If you are quite a time developing in React and using Flux with Redux then you have seen somewhere Immutable for sure or at least someone told you to use ImmutableJS. And maybe you even open the documentation for it x https://facebook.github.io/immutable-js/ . Did you get confused?

Well, first you should know that in object-oriented and functional programming, an immutable object (also known as an unchangeable object) is an object whose state cannot be modified after it is created. And this is a contrast to a mutable object (changeable object), which can be modified after it is created.

Second, you need to make difference between normal JavaScript and how are some things used in ImmutableJS. For example, in normal JavaScript we know two common data types: {} Object and [] Array. This two become Map({}) and List([]) in ImmutableJS.

For example, to create Object in Immutable you should follow this approach:

const immutableMovie = Map({
  name: 'Mortal Engines',
  category: List(['Fantasy', 'Science Fiction'])
});

Styled-components

Letxs say you want to create a simple and reusable xButton /x component that you can use in different places in your application. And of course, we like to have a normal version and a big and primary version for the important buttons. Also if you like to use JavaScript as CSS, which is the pattern that React is following with HTML and JSX then Styled-components is something that you should definitely check and use in your next project. After installing and importing the library the code will look something like this :

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid blue;
  color: blue;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props =x props.primary xx css`
    background: blue;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`;

render(
  xContainerx
    xButtonxNormal Buttonx/Buttonx
    xButton primaryxPrimary Buttonx/Buttonx
  x/Containerx
);

For more information you can check this link x https://www.styled-components.com/

Reactstrap

I have heard that you like Bootstrap. Well, most of the people are using it as their first choice. In case you want to use it with React and using the style of React then you should use Reactstrap which is in one sentence x Bootstrap 4 for React. Letxs show a simple example of how Bootstrap button will be used with Reactstrap.

export default (props) =x {
  return (
    xButton color="danger"xDanger!x/Buttonx
  );
};

For more information you can check this link x https://reactstrap.github.io/

Conclusion

A library is just one part of your application, so when you are using it, it makes sense the learning curve to be small, and as additional you can blend in some other libraries you might wanna use.

This is not a case when you have to use a framework. It is big and you are to adhere to their standard way of doing things.

Long story short, when you are using a framework, you are constrained to do everything their way, and with the library, you are on your own to discover what you might wanna use for doing HTTP requests or subscribing to key bindings. You can choose if you want to use either Redux or Flux for data store and state management or something else. You have freedom.