React JS: The new kid on the block
There are a lot of front-end frameworks, and choosing the correct one is tough. In our day-to-day work, Angular or plain JS with some jQuery usually make the cut, depending on the project and its needs. But recently React caught my attention, and I had the luck to work with it deeply on a recent client project at Tivix.
At the core of React is the concept of Components. Your UI is broken into Components with a State, creating one-way reactive data. React captures events, changes the State of components, re-renders, and repeats the whole process. Nested components can inherit data and events from their parent. Let’s take a look at an example of how Components can be used.
Let’s take a look at some sample code.
Walking through the functions in the above code, the Render function is most important. It returns your current view of the Component. In this case, it’s a timer in a simple <div> tag and it renders whatever the component’s State is. This is set when the component gets created in getInitialState.
The next major function is componentDidMount. Once the <div> has been rendered to the page, this function is called. It is where you might bind the HTML to a modal or datepicker. In our case, we are setting an interval to call the tick function.
Tick simply updates the State of secondsElapsed. The act of changing the state triggers a re-render, causing the timer <div> to update with the correct amount of time that’s passed. Lastly, the componentWillUnmount function allows you to clean up and unbind, and is a good practice to include with your Component’s definition.
React is a simple, clean interface for your front end code. Break your UI into its Component blocks and go from there. If you want to know more, there are excellent videos and articles on it.
For further reading: