When Pete Hunt announced that Facebook would be open sourcing React, their internal toolkit for building UI’s, many people didn’t realize just how revolutionary a moment it was. In reality, this moment changed the way developers build things every single day. At the time, the introduction of ReactJS seemed too crazy to actually work.

But fast-forward to 2017…it clearly does work super well.

If you’re a coding bootcamp grad or really any developer looking to double-down on front-end skills, it can make a lot of sense to learn React. Here are 13 reasons why React.js is here to stay, why it’s taking the industry by storm, and why it makes sense to learn if you graduated from a coding bootcamp or other educational program. 

1. Components are better than templates.

React pioneered the method of breaking apart a large complex user interface into small individual components. Components are a big part of how React works, so you need to understand them in order to truly understand the benefit of using a toolkit like React.

Here’s what this actually means in practice.

Web applications are all built up of HTML. An example could be a headline, like this:

<h1>Hello World!</h1>

If you’re writing the HTML of a blog post, it would have a few more lines of code. You would have a headline, subheadline and include it in a container object like this:

<div class=”hero”>

  <h1>Headline Title</h1>

  <h2>Headline subtitle</h2>

</div>

React allows us to wrap up this small section of HTML code and put it into an individual component. The component groups up the related code and puts it all in place.

You can simply register a react component like:

class Hero extends React.Component {

  render() {

     return (

<div class=”hero”>

  <h1>{this.props.headline}</h1>

  <h2>{this.props.subheadline}</h2>

</div>

     )

}

}

You can then call the HTML-like React component:

<Hero headline=”Hello world” subheadline=”Hi” />

This will expand out to the full HTML from the component that was registered above.

Angular and Ember are other frameworks that are taking cues from React.

Throughout the entire front-end development world, everyone is gravitating towards this “component-centric” approach, where you think about a user interface in terms of components. Components play a big role in Angular 2 and the latest versions of Ember too.

Even in Angular 1, the idea of components has been back-ported and Angular 1 developers are encouraged to use this new style of thinking!

2. React encourages every aspect that can change in an application to exist in the same place.

React calls this state.

In traditional JavaScript applications, it can get complicated when you try to keep track of information. It sometimes feels like you need to litter information about the information that can change all throughout the application.  

But with React, you won’t run into scenarios where you have confusing JavaScript code with tons of data elements. Instead, you can have a single, authoritative state. This means that you can replace super complicated JavaScript code with simple and intuitive code.

3. React doesn’t actually do a whole lot.

This is a good thing.  

They say that React is just the V in MV* – or simply the view layer. This means that it’s a utility that can help you build the view layer in an intuitive way, without imposing ideas unrelated to the view layer on you.

Developers can also start small with React applications and test it out in a narrow aspect of an existing project. This is way better than completely re-writing all of the existing code.

4. React applies functional programming ideas to the view layer.

Modern applications that have advanced user interfaces often use many different moving parts.

With different variables set to different values, edge cases and problems can come up.  

React components are pure functional components. This means with the same input, they will produce the same output. React doesn’t rely on outside values that can change around.

Pure functions are typically always easy to understand.

But Unpure functions can be one of two things:

• Just a little bit more difficult to understand
• If they rely on a lot of constantly-changing variables, they can be very difficult to understand.

5. React let’s you choose other tools you want to work with.

React is only one piece of the puzzle.

It has a very simple implementation of state, (the stuff that changes around in the UI), but many interfaces need a more robust implementation.

Using and understanding React’s built-in state is relatively easy, but many developers opt to use a more robust version, like Redux or MobX.

6. React has a CLI (Command-line Interface).

For a relatively long period of time, React didn’t have a CLI…nor did it give developers a way to build a new project from scratch. As a result, it caused a lot of confusion for people starting out (myself included).

But then, the project create-react-app was released in July of last year. This made it a whole lot easier to get started with React.

7. React let’s you use the new ES2015 Syntax or Older JavaScript Syntax

ES2015 is the latest iteration of JavaScript. It uses the tool babel to re-write the JavaScript to an older version that all web browsers can understand.

You can use React with the older JavaScript syntax if you prefer. Or if you want, you can opt into using things like ES6 classes and arrow functions.

Along with improvements to the JavaScript language, these new features can make it easier than ever to understand the code you’re writing.

8. React makes it easy to get started using WebPack

WebPack is a pretty cool project, and using React is a nice intro to the power of WebPack.

In short, WebPack is a “module bundler”, which seems like something that’s difficult to get excited about. 🤓

But WebPack is actually super interesting.

It pre-processes and optimizes assets like images, CSS, etc…. in an impressive way.

As an example, WebPack can take small images and put them inline CSS files.  

CSSTricks talks about how you can include Data URI’s in CSS files, and WebPack can automatically optimize things like this for you.

This can cause fewer HTTP requests and help you build a faster and more responsive web application.

9. React gives you the full power of JavaScript in all aspects of your application instead of giving you a watered-down way to control interactions.

React’s templating language is incredibly intuitive. Its templating is done with something called JSX, which does the opposite of what the other frameworks did prior to React.

Other languages took the template of HTML and tried to bring JavaScript and interactivity to the HTML level.

But with the concept of JSX, React gives you the full language of JavaScript and pulls HTML in.

This gives you 100% of the power of JavaScript and pulls in the HTML that you already know and love.  ❤️

10. You can start small with React.

You don’t need to use React to build 100% of your user interface.

Instead, you can start really small and test it out in a very narrow scope.

This means that it’s not super risky to use React for one or two components. You can get a good feel for it and slowly scale your usage up as you get more comfortable.

11. React uses one-way data-binding.

If you’ve done a lot of research into React, you’ll know that it uses something clever called a virtual DOM to sync changes to the web browser incredibly efficiently.

Browser DOM implementations are generally really slow. So if React were to use the normal DOM, it would be too slow too.

But because this optimization exists, React can completely regenerate the full HTML of the web application any time the state changes.

One-way data-binding is the process of completely regenerating the HTML whenever the state from a single source changes.

12. React makes the developer experience pretty remarkable.

The toolkit that React developers use is remarkable. They have great developer tools, like certain Chrome extensions, that are a must for any developer who is getting started. They also have plugins that make live reloading possible.

This means that when changes happen in CSS or components, the page will update automatically, without even having to refresh the page!

Features like this make it remarkably fun to tweak CSS styles and make them look exactly like you want.

13. The ecosystem is only improving.

Facebook continues to push the envelope and to develop new technologies that make working with React even better.

Recently, Facebook released yarn, a new package manager that is compatible with the old package manager npm but has significant improvements.

It’s clear that Facebook wants to make React better and better for developers all over the world.

React is changing the way modern web applications are built.

Companies like Product Hunt, AirBnb, Instagram, Walmart, PayPal, Microsoft, Uber, Tesla and more are adopting it.

After graduating a coding bootcamp or any other structured coding program and landing a job, it can make a lot of sense to learn React in a deep way.

Doing so can be a really solid way to differentiate yourself from other developers and help you evolve your career.

On top of that, React is just an incredibly fun technology to use. It makes the side-projects that you’re working on more enjoyable and valuable.

If you’re interested in learning React, we just launched a new course that helps you do exactly that.

Firehose Advanced Programming is a new course that helps new developers evolve their skills and get experience with new technologies to help them accelerate their careers faster than their peers.

We give you dedicated support from our engineering team and a structured curriculum to help you learn React without getting stuck.

We would love for you to check out our ReactJS course and start building seamless user interfaces. You can try it out for free!