React.JS: An Introduction to Cross-platform tutorial

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 utilize 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.

Did what you picture the app to look like match our app’s screen?

So, you’ve read the code and learned something fundamental about the design. That’s because the 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 fewer bugs.

What are components in React?

We use the declarative code to create components, which is how we display information. Essentially, components are reusable UIs. This allows 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 the 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?

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.

Learn more knowledge about cross-platform such as Flutter.

Author avatar
Sandip Savaliya
Entrepreneur | Developer | GDG Speaker | IOT Enthusiastic | Tech Explorer

Post a comment

Your email address will not be published. Required fields are marked *