Major Props: First Thoughts on React

React is fun. After just a week, I’m seeing a completely new way to tackle the frontend and frankly, it’s both visually appealing and increasingly terrifying. If you’re new to React like me (or haven’t touched it at all), my first impressions would be of those Matryoshka dolls from Russia. There are many dolls, but through a series of doll-inception, all sized dolls can be contained within the largest. In terms of organizing your code, this is neat. Components may be stored within larger components, which in turn render any actions in your application.

Yes, that’s cool, you say, but is that all there is? Is the whole hype-train coming from a bunch of OCD developers who like to keep their code as tidy as possible?

Maybe a little. But wait! There’s more! Just take a look at this code!

render() {
return (
<div className="App">
<Header onClick={e => this.resetGame(e)}/>
</div> 
   )
}

In the first line, we’re calling a render function. Pretty standard stuff in JavaScript. Within that we have a return followed by a parenthesis (semi-weird) and then what looks like… HTML… Is that you? Things are looking odd. Then, within that header, we have an arrow function and… and… okay, this is full-blown weird.

Or not.

This is what’s called JSX, a syntax extension of JavaScript that allows us to do our typical JavaScript coding that has the structure of HTML.

Which brings us to Babel.

In 2015, ES6 became the latest release of the ECMAScript language specification, but up until now, it has not been standardized. Certain browsers still cannot support ES6 functionality, which is a shame, because arrow functions are pretty awesome (especially since they transcend the lexical scope and change the meaning of the ‘this’ value).

Fortunately, there is a solution. The JavaScript compiler Babel is able to take everything it sees and turn ES6 into code that runs on whatever browser you’re using. That includes the funky stuff, like JSX, spread operators, and arrow functions .

What this does is give a React application a unique feel that feels surprisingly comfortable. Consider the following HTML:

<button type="button" onclick="handleClick()">Click me</button>

…and then imagine this function running in the JavaScript file:

function handleClick(e) {
  alert('I just got handled')
}

This simple pairing is similar to how React uses what are called Props — short for properties.

Remember the Russian doll analogy? What’s cool about React is that the parent component (imagine the largest of the dolls) can send down properties to its children, who in turn use these properties in their much smaller component. What ends up happening is each smaller stateless component is used specifically for one use, making it extremely easy to figure out what the point of a specific component is. This is especially important for folks like myself who have to work on ameliorating their disorganized code.

There is plenty more to learn in React, as I still have yet to tackle Redux, the state manager of the bunch. I’m especially excited about the capabilities of React Native, and how it can build mobile applications for both iOS and Android.