May 21, 2015

A server-side guy interacts with React

I’m a server-side guy that happens to be living inside front-end projects. I know my way around jQuery, have gotten aquainted with Bootstrap, and use SASS if I have to do something a bit more than trivial with CSS. But I don’t know Grunt from Bower and, honestly, used npm for the first time while making this blog post.

My current project has several large JSON objects that need to be presented to the screen. There is a current framework in this app but it doesn’t allow any customization which is not what the customer wanted. I wasn’t looking forward to doing a bunch of DOM manipulation, and the client wouldn’t like how slow it was.

A couple of people pointed me to ReactJS. Again, I’m a server-side guy and all these fancy JavaScript libraries make my head spin. But whatever I was trying to do with events and jQuery wasn’t working, so I gave it a shot. And what do you know? I really liked it. React only has a few surprises, which aren’t so surprising if you understand how it really works.

I put up a demo that is close to my solution. It’s a large JSON object that easily displays it’s records to the screen.

Starting out, in the index.html file, we simply setup where we want our template:

We want to put our content in the state-info div. So in our JavaScript we simply tell it that:

Ok, this isn’t really JavaScript but JSX which React uses extensively. As they said, you don’t have to use JSX with React but it does make it easier. A lot easier. What JSX reminds me of is the good parts of XSLT. You read that right. Once I got that through my head, using React and JSX suddenly made a lot of sense.

The above code snippet says “in the state-info ID insert the StateInfo tag”. But what is the StateInfo tag? That is defined earlier in the file as a React class:

Every React class needs to have a render method. The whole idea of the render method is that is only returns XML — with a root and even with other React tags. Here is the meat of StateInfo's render:

Note that there are StateInfoItem tags in there, with attributes on that. In the StateInfoItem class, those are treated as properties. That whole class is fairly straightforward:

So those properties are simply inserted into the definition list structure. If we want to change that definition list to something else, like a grid, we just need to change the structure and it will be changed for everything.

Back to the StateInfo class — you may have also noted the {preButton} and the {nextButton} in the output. Those were defined before the return statement:

So the prevButton only exists if the index more than 0 (i.e. if there is another state after it) and the nextButton is similar — it only appears if there is another state.

The this.state.index is not related to the state object but instead of the state of the StateInfo class. And the this.handlePrev and this.handleNext are methods that play with that state. Here is how all that is defined:

getInitialState is ran when the object is first created. Since the index is set to 0, then it will display the first state. Both handlePrev and handleNext change the value of index in state. Then React runs render again on the new state. That is probably the most important thing about React — it renders an object when its state changes. There is no hidden content — it totally re-renders that object. And (as you can see from the demo) it does it really fast.

I hope this little tutorial gives an idea of how React works. I think it’s a very powerful and mostly straightforward library.

About the Author

Mike Hostetler profile.

Mike Hostetler

Principal Technologist

Mike has almost 20 years of experience in technology. He started in networking and Unix administration, and grew into technical support and QA testing. But he has always done some development on the side and decided a few years ago to pursue it full-time. His history of working with users gives Mike a unique perspective on writing software.

One thought on “A server-side guy interacts with React

Leave a Reply

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

Related Blog Posts
Android Development for iOS Developers
Android development has greatly improved since the early days. Maybe you tried it out when Android development was done in Eclipse, emulators were slow and buggy, and Java was the required language. Things have changed […]
Add a custom object to your Liquibase diff
Adding a custom object to your liquibase diff is a pretty simple two step process. Create an implementation of DatabaseObject Create an implementation of SnapshotGenerator In my case I wanted to add tracking of Stored […]
Keeping Secrets Out of Terraform State
There are many instances where you will want to create resources via Terraform with secrets that you just don’t want anyone to see. These could be IAM credentials, certificates, RDS DB credentials, etc. One problem […]
Validating Terraform Plans using Open Policy Agent
When developing infrastructure as code using terraform, it can be difficult to test and validate changes without executing the code against a real environment. The feedback loop between writing a line of code and understanding […]