30 days of React: An introduction to React in 30 bite-size morsels

Today, we’re starting out at the beginning. Let’s look at what React is and what makes it tick. We’ll discuss why we want to use it.

Over the next 30 days, you’ll get a good feel for the various parts of the React (https://facebook.github.io/react/) web framework and its ecosystem.

Each day in our 30 day adventure will build upon the previous day’s materials, so by the end of the series, you’ll not only know the terms, concepts, and underpinnings of how the framework works, but be able to use React in your next web application.

Let’s get started. We’ll start at the very beginning (https://www.youtube.com/watch?v=1RW3nDRmu6k) as it’s a very good place to start.

What is React?

React (https://facebook.github.io/react/) is a JavaScript library for building user interfaces. It is the view layer for web applications.

At the heart of all React applications are components. A component is a selfcontained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are composable. A component might include one or more other components in its output.

Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.

For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We’d then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.

Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances. We dig into these principles later in the course.