Thoughts on react.js

For the past week, I have been messing around with React. And now I have successfully altered my index.html using react.

Left: index.html page before. Right: index.html after alterations with react

The UI has also changed a bit. I will talk about more a bit later. First, let me talk a bit about React.


React is a UI framework developed by Instagram and Facebook. I thought about using React because my code complexity was growing so much larger and faster than I expected with every new piece of information I put in. So far, I’ve only been reusing these 3 main React functions:

React.createClass({...});
React.createElement(..., ..., ...);
React.render(..., ...);

React.createClass allows you to create a new type of React element with a set state. It takes an object. The object may have as many functions as you like but these two functions are crucial:

getInitialState: function(){... return{...}},
render: function(){... return...}

In getInitialState, you give the React element it’s initial properties. In other functions, you can tell the React element to change it’s properties depending on different situations. render just tells React how to display the new type of element you have made.

React.createElement takes these 3 things in respective order: type of class, attributes and children. Default HTML class types can be put in as a string. Those you have made through React.createClass can be written without the string notation. If there are more than one attributes, then it can be written as an object. React.createElement can take multiple children; simply just list them with a comma. You can also use React.createElement inside React.createElement again when listing children.

Here’s an example:

React.createElement (classtype, {
attribute1:one,
attribute2: two
},
child1,
React.createElement(classtype, null, "another child")
);

The example above will create an element with class type classtype which has 2 attributes. It has 2 children: child1 and another child with the content “another child” in it.

You don’t always have to give children. For example, if you just want a new line without any content, then this will do:

React.createElement("br", null);

Finally, React.render takes 2 things in respective order: an element and a DOM element. Again, the render function is there to tell React how to display things. These days, thanks to React, I am able to have an empty HTML body and write my JavaScipt code inside the HTML script tag. I like to make a component which holds everything I want to display together so that my React.render function looks simple. So for me, my React.render functions usually look like this:

React.render(component, document.body)

React has made building my project much more easier. And it’s very clear to see why Facebook and Instagram have developed this. If your HTML and JavaScript seem to be getting quite complicated, I highly suggest you to take some time to learn React ☺

I decided to change the UI a bit to make it seem more mobile friendly. I also think that the changes I’ve made makes things look much more neater. In the future, I want the panels to be interactive too, so that it will be more simple to use on mobile.

Next up: I’m going to play around a bit with ovirt.js, which I will later implement in the project to make docking to the oVirt API easier ☺Until now I have been manually directly talking to the oVirt API and parsing the XML myself for initial testing.

Show your support

Clapping shows how much you appreciated Jenny Kang’s story.