When getting up to speed with React, I was surprised to discover that it is a very simple library that allows you to basically create components which can be thought of as html tags. Compared to Angular 4 which I had the chance to play around with, react is much simpler, more focused on a single concern and very unopinionated.
In this post, I would like to outline what I discovered about React so far.
React allows you to basically create components which can be defined as ES 6 classes or as a plain old functions, let’s consider a very simple html tag that we may wish to create:
<Greeter name="James Johnson" />
We would like the
Greeter component to be rendered as in the following screenshot:
So, we define it as follows:
Greeter component is a class that extends the
React.Component super class provided by React, by defining the
render method we can specify the structure (html) of the component.
Jsx supports one-way data binding, in the previous example the
this.props.name property is referenced in order to display the given name, whenever
this.props.name changes the view will be updated an will display the new value.
The component’s style is placed wright inside its top level
div, in fact while it is possible to factor the style in a global stylesheet or in global processed style-sheets (SaSS, PostCSS…) by using styled jsx it is possible to factor the style of each component inside itself that way the defined style will only impact the component that defines it.
Duplication and tediousness proper to css can be mitigated by either making string replacements inside the jsx tag thanks to the interpolated strings or by simply using plain Sass for example.
Finally, notice how we attached a click event listener in our component’s top level
div, the event handler is a method defined in the component’s class and has access to the object’s
this. You may wonder what the
this.handleClick = this.handleClick.bind(this) statement is doing, unfortunately methods in ES6 classes are not bound by default and whenever we define a method, especially a method that is referenced as a callback for an event handler, we have to bind it explicitly to make the object’s
this available inside the callback otherwise
this will be
undefined inside the callback.
Components that you define can also be stateful, have pre-render and post-render hooks and it is possible to create components that supports levels of nesting that allows for rich composability. We won’t go in the details here but definitely checkout the links.
Server side rendering with Next js
Why server side rendering ?
When ajax appeared and people started using it, search engines were not quite able to crawl web sites that were loading their content asynchronously and one of the drawbacks of single page web applications(SPA) was that they were basically not crawalable making SEO difficult for this kind of applications.
Today in 2017, most major search engines are able to crawl SPAs effectively but a concern regarding SEO for SPAs exists still and server side rendering seems to be a less risky path to address these concerns.
It can be also useful to serve a pre-rendered page to the user instead of a page that renders progressively in an awkward manner.
NextJs is a lightweight server side rendering framework for React, it allows the developer to create web pages that are built by using React and its component based programming model, it integrates styled jsx by default and adds hooks to React components that allows to fetch data on the server side.
Let’s put the
Greeter example in a specific context, suppose that the
Greeter component is used in another component that we name
The container is included in a page that we access with the following url:
Container component takes a user Id and fetches the user’s name from a restful http resource:
getInitialProps static method is called on the server side in order to fetch the user’s data and to make it available for the server’s rendering process, when the page containing the
Container components is requested with the
userId argument the component will be fully rendered and served by the server.
I had a chance to play around with Angular 2(now 4) in the past and I must say that React is way less boiler plate oriented but also very unopinionated and allows you to build your software factory as you like by choosing each aspect(testing, state management, dependency injection…) yourself.
Finally, I am looking forward to the form creation part in React which I did not try yet, Angular 4 has a very solid form facility and I wonder how React’s form handling mechanism compares.