A Beginner’s Guide to React: How does React work?
So you want to learn about React so you can build better user interfaces, but where do you begin?
Today, we’re going to answer how React works by breaking down its core ideas. This is your first step towards building intuitive, beautifully coded apps!
What is React?
React is a JavaScript library (not a framework) that creates user interfaces (UIs) in a predictable and efficient way using declarative code. You can use it to help build single page applications and mobile apps, or to build complex apps if you utilise it with other libraries.
What is declarative code?
React works in declarative code. To show what we mean by declarative code, we want you to imagine the following code expressed as an app.
What you picture could look like the screen below, with a navbar, a header, a filter, and a list. That’s because each line of code declares what each element of the app is.
So, you’ve read the code and learned something fundamental about the design. That’s because declarative code describes what we want instead of saying how to do it, as you would with imperative code. At its core, declarative code is like visiting a restaurant and ordering a meal. You tell the waiter what you want, but you don’t go in the kitchen to tell the chef how to cook it. Declarative code describes the end result, but doesn’t act as a step-by-step guide of how to do it. In practice, that means declarative code is lightweight, easier to understand and change, and has less bugs.
What are components in React?
We use declarative code to create components, which is how we display information. Essentially, components are reusable UIs which allow you to split the app into separate blocks that act independently of each other. Components accept an arbitrary input with data (a prop) and return a React element to declare what should appear on screen. They can interact with other components via props to create a complex UI.
But to create a complex UI, you need to order the components in a logical way. To do that, we need to look at what state is in React.
What is the state of an application?
‘State’ is the representation — or a snapshot — of the app at any one time. What do we mean by this?
In a declarative UI, developers aren’t in charge of changing the UI when something happens. They don’t have to worry about hiding or showing divs, as you would with a code-heavy imperative UI. We only have to worry about receiving a specific app ‘state’ — or, a specific screen displaying specific information at any one time — and rendering it in the UI.
For a clear example of how this works in React, head to the ReactJS Academy now. There, we explain why an imperative UI like jQuery can be convoluted and time intensive to create, but a declarative UI like React is easier because individual components declare new states while the app itself remains unchanged.
But for now, it’s important to remember that a declarative UI like React is great because we don’t have to code as much. We only need to display one component state at any one time.
How do you organise components in React?
Our components are made of two main ingredients: state and props. These two ingredients mean we can organise our components in a hierarchical structure that ensures a one-way data flow (via props) so we only have one state.
We call this structure a tree, and it allows us to assign responsibility for a state to one component. Below, the Books component will take charge of the books array, and pass information via a prop to its children components only when they need it. The children can’t update the data it receives from its parent — if data needs to be updated, children receive another prop from their parent with a function to update it.
Our component tree allows us to create complex UIs that don’t confuse states. For instance, the app in our example won’t confuse the books state with the authors state, which could provide clashing information. Instead, our app follows a logical path to display the correct information, and will update it accordingly.
React Roundup
This is just a quick overview of how React helps you to build better user interfaces, but for a more in-depth analysis and examples of React in action, head over to our introduction to thinking in React now.
Want to learn more about React? Complete the exercise for this stage of the ReactJS.Academy now, or join one of our face-to-face training sessions for more. Get in touch today!
