DEV Community

Cover image for Wait, but what exactly is React?
Benjamin Liu
Benjamin Liu

Posted on

Wait, but what exactly is React?

​Coworkers and colleagues have been asking me about React since 2014. Instead of explaining it time and time again, I will give my 5-minute summary here in this article.

What is React?

React is a JavaScript library developed by Jordan Walke, a software engineer at Facebook back in 2011. Since then, React has become a widely popular open-source library that is used by Facebook, Instagram, Netflix, PayPal (just to name a few) and maintained by Facebook, Instagram and an amazing community of developers that have taken an interest in the library.

How does React work?

React uses a component based architecture (i.e. it involves you writing "components"), defined using a special JSX syntax which compiles down into regular JavaScript. Here we have a Button component that renders a different class name to the <button> based on the props.

const Button = props => {
  const className = `button ${props.type}`;

  return (
    <button className={className} onClick={props.handleClick}>
      {props.label}
    </button>
  );
};


This level of flexibility makes creating interactive UIs fun as you are able to reuse components in different parts of your webpage.

Note: Although the code within the return looks like valid HTML, it JSX - a syntax extension to JavaScript to make defining React elements easier.

When you want to render a particular kind of button, you just pass the <Button> component a list of props (similar to attributes in HTML):

<div className="app">
  <Button handleClick={handleAPICall} label="Submit" type="primary" />
</div>


Why should I learn React?

  1. It's incredibly popular, and as such is very employable. A survey conducted by Stack Overflow showed that React was the most loved and wanted web framework. ​ Alt Text
  2. It's incredibly fun. IMHO what makes React so great and so popular is the fact that it is not restrictive. It does so much yet has so few constraints, that using it feels just like magic.
  3. Do you have another reason? Let's discuss it below in the comments! ​ Thanks for reading!

Top comments (2)

Collapse
 
savagepixie profile image
SavagePixie

React uses a component based architecture (i.e. it involves you writing "components"), defined using a special JSX syntax which compiles down into regular JavaScript.

Although it's by far the most common way to use React, it's noteworthy that you don't need JSX to use React.

const Button = props => React.createElement(
   'button',
   { class: `button ${props.type}`, onClick: props.handleClick }, 
   props.label
) 
Collapse
 
agitaev profile image
Seid Akhmed Agitaev

and it is used by Reddit as well, love their redesign