Getting started with React

Unless you’ve been under a rock for the last few years, the Javascript community has been growing rapidly. We’ve seen a lot of frameworks come and go. Of course, this leads to heated debate as to which framework is the ‘best’!

You should decide on the best tool for the job. I gave React a go when launched an improved UI. I haven’t looked back since.

I’ve used Backbone.js, Ember.js and Angular.js to recently settling on using React. The beauty of React is that it is not a framework. I can use React the way I want. React is a library.

React was introduced a few years ago by Facebook developers and has since gathered momentum with the open source developer community. Maybe this is because there isn’t a mountain of APIs to learn when getting started with React.

React forces a component based approach. Splitting your code into reusable components is a great way of developing modern rich web applications and reducing code volume & complexity.

1. Hello World React Component

Let’s create a quick React Component to get started. You can see this in action on JSBin here.

Hello World in React

I know what you’re thinking. HTML in my JS? It’s actually JS in your JS. React converts what you think is HTML into React classes.

What you see above is called JSX. Stick with it. It’s absolutely fabulous.

2. React Props

React passes data to components via Props. Props allow you to reduce the amount of “state” and responsibility each component has. This is great when you want to use the same component with different data elsewhere, or, within child components

If we use the example above, let’s pass “World” through as a Prop.

A super simple React component using Props

We can take the above example a step further by reducing the amount of boilerplate code and mount a “dumb component”. Dumb components, also known as “stateless components” strip away the requirement for the React Component itself.

Dumb Hello React Component

A super simple dumb (stateless) component in React

The above also takes advance of ES2015 destructuring. More examples of this later. You can see this in action on JSBin here.

3. React State

When building user interfaces with React, you will want to keep track on state for certain interactions within components. If a dropdown is active or not, is state. The current count of the application is stored within the App component’s state below.

Updating State with setState & React

Here we set the initial state within the constructor method. We also have a method which is responsible for updating the application state. It is important not to update state directly. This is because using setState forces a component to re-render, whereas directly manipulating this.state — would not!

React is super fast at rendering changes. It manages this by using something called the ‘virtual DOM’. Instead of directly updating elements within the DOM, React will compare what changed and only update that part. Magic!

React Components require a render method. Here we are rendering the current state and a button which calls our _incrementCount() method, which updates state and DOM.

4. React Container Components

As you begin to build large applications, you’ll come to realise that managing state can be difficult when your component is responsible for both action and output.

Creating a container component will allow you to create super simple dumb components that rely solely on props.

Decrementing the number above might be achieved by adding another method to that component. We can copy the button, update the text and reference a new onClick method.

That’s fine. You can do that. But you might want to extract the Button into its own component;

const Button = ({action, text}) => <button onClick={action}>{text}</button>;

Button requires an action and text through props. It doesn’t care what these are or what they do. It knows what to do with these props and that’s all we care about here.

Let’s update the State example above to include a decrement method and our Button component.

Try it on out JSBin here.

Final words on React

React is a powerful library. It’s lightweight and gives you total control over what components you use and how they work. That’s why I love it.

If you’re looking for a framework that gives you boilerplate, HTTP services, validation and asynchronous libraries built-in, you might want to see what Ember or Angular are doing.

There are many frameworks you can use. Try out different frameworks and you’ll soon discover what it is you like about them. Most importantly, decide on what you think is the right tool for the job and not because someone said so on StackOverflow.

That’s it! My next post “Going further with React” will include React lifecycle methods such as componentWillMount.

I hope to cover Redux soon. Redux allows you to manage state from a higher level and removing the update state responsibility from your components.

Like what you read? Give Jamie Barton a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.