Six things you need to know in React JS

Six (6) things you should know as a React JS developer.

It's not a framework

Angular is a framework. It is like a kitchen where all the items required to cook a recipe is available. In short, it means some decisions are already taken for you. Whereas React is just a library, it is an empty kitchen where you need to collect/create all items required in order to cook a recipe. In short, it means that you need to make your own decisions. React focuses on helping you to build user interfaces using components very fast.

Keep the size of your Component small

It is obvious that small classes/modules/function etc. are easier to understand, readable, test and maintain. The same is true for React components.

Write Functional components

Functional components are one of my favourite way of defining React components. Functional components are small clean, and readable. Apart from the more short syntax, this approach can help clarify when a component needs to be split up.

const Example = (props) => <div>I am a functional component</div>;

Class-based components maybe are obsolete soon.

It’s declarative

In React, we use a declarative style to write our components. Let's look at the example below.

<select value={value} onChange={handleChange}>
  {somearray.map((element) => (
    <option value={element.value}>{element.text}</option>
  ))}
</select>

In the <select> example, we are not using the loop to create a mapped collection manually. You are not saying what the code should do but how it should look.

Always use propTypes

Having propTypes defined in each component is an excellent way for letting know what all parameters the component accepts. If the component is not given a required property or given the wrong data type to one of its props, then React will throw an error to let you know.

const Example = (props) => (
  <div className={props.className}>I am a functional component</div>
);

Example.propTypes = {
  className: React.PropTypes.string.isRequired,
};

This way, you can expect the component to work the way it should have worked.

Use shallow rendering

Shallow rendering is good as it allows you to render a single component completely without delving into any of its child components to render those. Rather, the resulting object will inform you of things like the type and props of the children. It gives us good separation, allowing testing of a single component at a time.

If you learned something from this article, please share it with your friends.

You may also follow me on LinkedIn and Twitter.

💌 If you’d like to receive more coding tips and tricks in your inbox, you can sign up for the newsletter here.