I'm back. It's Component time

Photo by jehyun-sung on Unsplash

Hi there! So to keep myself motivated and keep in touch with my English writing, I am starting a series about React and React hooks which will be inspired by my current job.

First of all, I like ReactJS, and mostly I like the new path that Facebook has trodden. Hooks are functional programming, and that means more composable software can be written with it. When I learnt that building software is a composition of smaller pieces, everything had turned out to be more powerful and magical.

What a component must be

A component should be a pure function which takes some params (props) and returns UI. Very simple, isn’t it? Hence, If I am trying to hire you and I ask you what a component should be, and your answer is “put all UI logic, state and styles into it”, you will fail (Luckily I am not hiring you, am I?).

Look at this gorgeous pure component:

const Counter = ({ value, onClick = () => null }) => (
   <Fragment>
      <span>{value}</value>
      <button onClick={onClick}>Update</button>
   </Fragment>
);

No state. No classes. No side effects. Just a function. And it is undoubtedly easy to test since every dependency is injected.

Favour functions over ES6 classes

Programmers from Java, please bear with me. To not have Classes it is all right. Everything will be ok. Also, ES6 Classes are as unreal as Santa Claus since they are syntactic sugar. They were created by our parents to keep Java and PHP programmers happy.

But not to worry at all! I am here to tell you that avoiding classes is the right thing to do in Javascript because here you do not need to construct a Class to get a new instance of an object. It is sound good, isn’t it?

I want to create an object for you free:

{}

That's all. Oh wait, you wanted to have some props. Sorry. Here we go again:

{ name: "Santa", lastname: "Claus", isHappy: true }

What did you say? Oh, I get it. You want to create a lot of objects with that scheme. Not a problem:

const createUser = (name, lastname) => ({
   name,
   lastname,
});
const santaClaus = createUser('Santa', 'Claus');

Encapsulation? Yeah, it is possible too:

const createUser = (name, lastname) => {
   let isHappy = false;
   
   return {
      name,
      lastname,
      becomeHappy: () => {
         isHappy = true;
      },
      isHappy: () => isHappy,
   };
};
const santaClaus = createUser('Santa', 'Claus');
santaClaus.becomeHappy();
santaClaus.isHappy(); // true

I hope you are closing your dirty Eclipse editor to come back to Javascript again!

React has turned out to be more functional

When React’s guys decided to avoid using ES6 classes (thanks to <include-your-deity-here>), they were trying to send us a simple message: there is a better way to build software. Because avoiding classes does not just mean changing the word ‘class’ to ‘function’.

Removing classes from your code implies that you have to start to think differently, in a more composable way. The power of using functions as building blocks will give you a robust tool to create some real magic with Javascript.

Photo by La-Rel Easter on Unsplash

For instance, look at this example from one of my projects:

const middleWares = compose(
   withErrorHandler,
   withMarkupRequest,
   withMyAmazingMiddleware
);
const http = middleWares(Http())

What if I want to remove error handling? No problem, I only have to remove that 'block'.

Or, what if I want to add new middleware to print out log in my console? It is effortless again:

const middleWares = compose(
   withErrorHandler,
   withMarkupRequest,
   withMyAmazingMiddleware,
   withMyAmazingLogger,
);

Composing function will give you great powers to create the most maintainable software.

Hey, thanks for reading! I will try to keep this up to date! I still have a lot of exciting code to show you!