Bro, Do You Even React?

Sweet merciful god of code, just as I was beginning to get comfortable with Angular (1 not 2) and using directives, controllers and MVC architecture (I’ll explore that loaded acronym in another post) they go and switch it up on me.

I live in the SF Bay Area, a place where people will stand in line for upwards of 2 hours to eat toast… no really.

avocado-toast

Look at that fucking toast.

So it may come as no surprise that the React trend is very strong here. Being a relative nOOb to the world of coding, I don’t question why new companies would build their code foundation on  a relatively new framework that may be (read: will almost certainly be) out of fashion in two years… that’s none of my business. But every third job posting lists React as a must-know or nice to know in their description so it’s definitely not the worst thing to learn.

At first, I refused to learn React. I protested, ‘what’s the point?’, ‘ I’ll just wait a few months and jump on the next JS framework’. Then, a buddy of mine invited me to work on a project using React. Shit. He smartly explained the concepts of components, setting states, props, JSX and Babel. I nodded my head. This can’t be so hard, I thought. I went home, fired up Sublime and didn’t know how the hell I was supposed to do.

After some tutorials, reverse-engineering of some working code (copying and pasting from Stack Overflow) and horrible attempts on codepen I knew just enough to frustrate myself.

You see the learning curve for React is sharp. React renders your HTML in the form of JSX in a virtual DOM using Babel to translate your JSX into Javascript and ultimately spit out some sweet HTML. Seems like a pretty roundabout way of just writing out some HTML and using a separate JS file and I’m still not completely sold on why this method is so popular.

I was charged with making a contact page using React. Pretty simple right? Some rounded images of our ugly mugs,  some header tags, a short bio and we’re done… except not. You see in React, every component will be created in the form of a function, so my header may be called HeaderComponent, my pictures we’ll call PictureComponent and we can store the data for each of the pics in the state of the component and iterate over them to create a new bio for each member kinda like how you would ng-repeat some html in Angular.

Here’s what I made:

var App = React.createClass({
getInitialState: function () {
return {
coders: {
‘brian’: {
“name”: “Brian J.”,
“location”: “Oakland, CA”,
“thumbnail”: “http://builtbybrian.net/img/BrianPoint.jpg”,
“github”:”github.io”
},
‘justin’: {
“name”: “Justin”,
“location”: “Daly City, CA”,
“thumbnail”: “http://builtbybrian.net/img/BrianPoint.jpg”
},
‘tim’: {
“name”: “Tim Jr.”,
“location”: “San Francisco, CA”,
“thumbnail”: “http://builtbybrian.net/img/BrianPoint.jpg”
}
}
}
},
renderArticle: function (key) {
return (

)
},
render: function () {
return (

{Object.keys(this.state.coders).map(this.renderArticle)}

</div>
)
}
});

/*
Article
<Article />
*/
var Article = React.createClass({
render: function () {
var details = this.props.details

return (
<article className=”article”>
<h2 className=”article__title”>{details.name}</h2>
<h2 className=”article__title”>{details.location}</h2>
<img src={details.thumbnail} />
<a href={details.github}>Github</a>
</article>
)
}
});

ReactDOM.render(<App />, document.getElementById(‘app’)
);

No, you’re not crazy, that’s some straight up HTML inside those functions. Using JSX allows us to incorporate JavaScript and HTML in some unholy union and we’ll attach all this to the single element with an id of ‘App’  on our actual HTML page.

I know this post doesn’t make React seem like the sexy new framework you were dying to try and that’s intentional. Nevertheless, learning React has forced me to strengthen my Javascript skills, get better acquainted with ES6 and even write this post… so maybe it’s not that bad.

If you’re actually interested in learning more about this framework, check out:

https://www.udemy.com/react-redux/learn/v4/overview ($25 on Udemy and well worth it)

https://scotch.io/tutorials/learning-react-getting-started-and-concepts

https://facebook.github.io/react/docs/getting-started.html

 

I will admit, I’m having some fun learning React though I’m sure as soon as I can make this damn component, the whole of SF will have moved on. Goddammit.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s