React is a Javascript library that manages view rendering and state. View rendering follows a component-based paradigm and can be handled by using a powerful templating language (JSX) that allows for the use of embedded javascript expressions. Component and app state is managed as well, allowing for individual sub-components or larger structures to be re-rendered as the state for those components changes.

Why use React?

React makes the creation of an efficiently and dynamically rendered page easier by providing a toolset to create components that can separate the concerns of the rendering engine to efficiently re-render only the components that have had information change (State Change).

What is State?

State is an object where you can store property values that belong to a component. State properties are expected to potentially change after the initial loading of a page and can trigger a re-rendering of individual components allowing a page to update information without having to reload the whole page. State properties are different from normal properties (props) because of their likelihood to change. On a social media page, the likes counter would be part of state so that the like component can be re-rendered on the page if the user gets a like, without having to reload the entire page.

What are Props?

Props are also component properties. We can properties in as props if they are not likely to change frequently. On a social media page, the username would be considered a candidate to be inserted as a prop because the user is not going to frequently change their username.

What is JSX?

JSX is a templating language but with the full power of the JavaScript language. It makes creating dynamic user interfaces simpler by using a syntax very similar to how it will be rendered in HTML, but allowing you to embed dynamic information via javascript as well by inserting the code inside of curly-braces ‘{‘   ‘}’. See the below code snippets for an example of JSX and the HTML that it renders to… 

class ShoppingList extends React.Component {
    constructor(props) {
        super(props);
    }
  
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Cucumbers</li>
                    <li>Carrots</li>
                    <li>Fennel</li>
                </ul>
            </div>
        );
     }
}

// Example usage: <ShoppingList name="Callie" />

The example above will be rendered in the following HTML markup.

<div class="shopping-list">
    <h1>Shopping List for Callie</h1>
    <ul>
        <li>Cucumbers</li>
        <li>Carrots</li>
        <li>Fennel</li>
    </ul>
</div>

Is that all?

No! This only scratches the surface of what React is and what it is capable of doing, but I hope that this will pique your interest in how you can use react to build modern efficient user interfaces! You can find out more about React at their official website https://reactjs.org/.