ReactJS

What is ReactJS?

ReactJS it’s a JavaScript library created by Facebook and Instagram that allows you to build components to render the HTML  data and it’s considered to be the V in MVC. You can pass data to the component, if the data changes it redraws the changed data automatically so you don’t have to update it. It updates only what is needed.

React it’s used to build reusable components that represent data that changes overtime, it is very simple to use but very powerful. Instagram is a single page web app entirely built with React.

React works in a way that it updates the data super fast. It keeps a virtual DOM rather than using the browser DOM only, then it determines which parts of the browser have changed by making a comparison between the two files, the browser DOM and React virtual copy of the DOM. React uses server-side rendering and it’s one of the main differentiation from AngularJS. Server-side rendering (JavaScript Isomorphism) greatly improves performance and it’s used mainly by high traffic websites where user experience and page loading must be impeccable.

 

ReactJS doesn’t use templates like AngularJS, instead it uses JavaScript to generate the HTML using JSX. There’s no linking function since it decides how to update the DOM more efficiently for you when the data changes. All you need is the render() function and React will take care of keeping your data up-to-date.

What is JSX?

JSX is syntactic sugar that was added to ReactJS, you don’t need JSX to use React but JSX it’s easier to understand. This saves a lot of time since your components can be defined as HTML tags. React JSX transforms from an XML-like syntax into native JavaScript.

---

 

My experience with ReactJS

I found ReactJS really fun to use even if I didn’t get too deep into it. It was easy to understand so I tried to play around with it.

The ExampleComponent returns an h1 tag with the properties product and price. The render() function takes two arguments, what you want to display and where you want to display it. The render() function can display one thing only, what you can do is put your data inside a div, its still one div but with many child elements. And this is the result:

I tried it with Rails and its pretty simple to use.  First, you need to add the react-rails gem to the gemfile, bundle install and run:

rails g react:install

All of your components go inside the app/assets/javascripts/components folder that the react-rails gem generated when you installed it

I wrote all of my code inside example.js.jsx and after saving my changes the example.js.js file its automatically created with raw javascript. This is the code I used for the example:

The IncrementNumber component increments number (starting at 0) by whatever number I pass in to the total property each second.

In the view I use the react_component helper to call the IncrementNumber component and increment the total property by the sum of p1 and p2 in real time.

You can get the code here if you want to try it.

And thats pretty much it. I want to use ReactJS for future project, seems like a very powerful library that can give a different experience to the user, in my opinion its fun and convenient for  developers too.