You’re using React the wrong way (maybe)!

React has become a staple when we talk about Web Components. It’s easy to learn, and you can start creating a project from scratch using the capabilities that React provide us. But, there’s a little catch that most of the newcomers to React don’t understand at first: React is just an UI library.

 

Comparing React with frameworks such as AngularJS, Backbone, Ember or Knockout.js doesn’t make sense just as comparing a TV with a Smart TV. Yes, you can use them both to watch Netflix or Youtube, but on the TV you need an additional component to process the information on the screen, on the Smart TV is already build in.

 

Just as the Smart TV, AngularJS, Backbone or Ember are a complete framework, including the view Layer. React is not. React is just the view layer. It gives the developer a complete template language and some function hooks to render HTML. And that’s the output of React: HTML. You shouldn’t build a complete dynamic application using only React.

 

So, does this make React worse than Angular or Backbone? No, because as we already said, React is just the view layer of our application. We can use React with AngularJS, Backbone, Ember or any other framework.

 

So, as We already pointed out, React being just the UI library makes the development of our application half way to be finished. But, most of the new developers to React tent to try to use it as a complete framework. Adding business logic within the React components.

 

This practice should be avoided, and use React to only render views for our application. We need to use the tools the way they were designed.

 

What does the W3C says about web components?

 

Web components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery or Dojo. An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page. Web Components use new or still-developing standard browser capabilities.

 

What can we get from this? Well, we need to import them without editing the code, and they shouldn’t be application dependent. If you need to tweak your component to work with any other application, the component is wrong build from scratch.

 

As an UI library, we can use React to create gratefully constructed and reusable Web Components, but most of the developers that don’t understand the sole purpose of React tend to add business logic into the components. That breaks the reusability of React components, making them application or purpose dependent. And that’s wrong. That’s why we shouldn’t have business logic within a Web Component. A component should be able to work as an independent element that can be reutilized in the same and other applications.

 

If we need to add API consumers, state controllers, routes and other stuff that frameworks do, We need to use the correct tool for it. We may use AngularJS and only use React for the templates in a directive. We may use a pattern like Flux to control the state of our application. We also may use React in the backend and render the views in our server. And we can do all of this because React renders HTML and that’s sole output that we get from it.

 

Let’s keep the React components simple and clean so the developer can always tell how the component will render by looking at one source file.

 

One thing that We should understand before to start working with React is to learn how to think in React. Even before to start coding we need to understand the components that our UI will have. Then we just need to atomize the component into more compact components.

 

Having small components that just do a simple task and that can be reusable is a good way to start coding our application with components. Once we have the components that our application will need, then we can start thinking in a framework.

 

For example, we can use React in the server if we use the react-dom node package to render our component in the server. And later we can use a framework such as Django for handling the routes, controllers, and modules for the application and just use React to render the final view for the user. This can also work in other backend frameworks such as ASP.NET MVC or Laravel.

 

Also, React can be integrated into an existing project. Integrating React into an existing application is surprisingly simple. In many cases, it is actually simpler than starting from scratch. After all, React is just Javascript. Just we need to remember to render individual components and not the entire application.

 

Remember that React is just an UI library and you should use as that. Don’t mix business logic with your UI. Make the business logic to fill the data on the components, not the components to process that data.

Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *