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.
One thought on “A server-side guy interacts with React”