A very quick Intro to React

React, a javascript library for building user interfaces. Developed at Facebook and released in 2013 it’s safe to say React has been the most influential ui library of recent memory.

Components

We use it to build components that represent logical reusable parts of the UI.

The beauty of React is that the simplicity of building a component has been brought down to its theoretical minimum. It’s just a javascript function. The return value from this function is your HTML or ui which is written in a special syntax called JSX allowing you to easily combine javascript with HTML markup.

If you want to pass data into a component you simply pass it a props argument which you can then reference inside the function body or in the ui using braces. If the value changes React will React to update the UI.

Hook

If we want to give our component its own internal state we can use the state hook.

The hook is just a function that returns a value as well as a function to change the value. In this case, count is our Reactive state and setcount will change the state.

When used in the template the count will always show the most recent value. Then we can bind setCount to a button click event so the user can change the state.

Ecosystem

React provides a variety of other built-in hooks to handle common use cases but the main reason you might want to use React is not the library itself but the massive ecosystem that surrounds it. React itself doesn’t care about routing, state management, animation, or anything like that. Instead, it lets those concerns evolve naturally within the open source community. No matter what you’re trying to do there’s very likely a good supporting library to help you get it done.

Need a static site you have gatsby. Need server-side rendering you have Next. For animation you have spring. For forums you have formic. State management you’ve got redux, mobx, flux, recoil, x-state, and more. You have an endless supply of choices to get things done the way you like it.

Mobile

As an added bonus once you have React down you can easily jump into React Native and start building mobile apps. And it’s no surprise that knowing this little ui library is one of the most in-demand skills for front end developers.