< BackUpdated: April 21, 2023

Learn React - What is React?

React is a JavaScript framework developed and maintained by Facebook for the purpose of creating interactive user interfaces. It follows a 'Learn once, write anywhere' philosophy and allows you to develop native applications for multiple platforms.

Learn React - What is React?

"A declarative, efficient, and flexible JavaScript library for building user interfaces" - Facebook

1. React's Declarative Programming Style

By having a declarative style, the developer does not have to worry so much about the fine details of what is going on in the background in React. For example, to have a button turn blue when a user clicks on it in React is almost as easy as saying you want the button to be blue when it is clicked. You declare what you want to have happen and trust React to take care of details. This eliminates a lot of the surface area where bugs could occur if you were using a framework with an imperative style where you may have more finite control but also more room for error.

2. React Works on Multiple Platforms

React is different from other multi-platform frameworks like Cordova that claim you can "write once, run anywhere", instead taking a "learn once, write anywhere" approach. You can imagine that platforms such as iOS and Android have unique differences that would be a challenge for a multi-platform framework to embrace properly. By not making any assumptions about these platforms and instead being more of an idea of how to code, React can embrace these differences well. Simply swap out the Virtual DOM with Objective-C APIs on iOS or Java APIs on Android, and React renders natively on each platform.

3. Everything Is a Component in React

React components are a bit like Lego pieces where multiple components make up a single application and each component has a specific purpose that it was designed for. If you were building a weather app you might have one component that takes the users location, another that shows the temperature and another that shows precipitation. What's great about this is that if the temperature isn't showing up how you want, you know the problem must be with the temperature display component. Just fix that component and your app is working with no need to wonder where the bug could be coming from. And what if you want to show the temperature in another part of your app? Just bring in that temperature component and now you have full use of it.

What else can it do?

4.Take React skills with you

Best practices in React are actually just JavaScript best practices. So when the day comes for React to leave the stage for the next shiny new framework, all those skills you have been honing as a React developer will transfer nicely to the latest and greatest framework. React doesn't require very much domain specific knowledge and you will thank it later.

5. React's Virtual DOM

In React you have something called the virtual DOM. When changes are made to a page (like the temperature increasing by 1 degree in a weather app) only that specific piece of the DOM is updated and nothing else. No reason to refresh the entire page, giving the UI a "reactive" feel and at them same time reducing how much data is sent between the backend and the client.

So who uses React?

As you browse the web (with the React developer tools installed) you begin to see just how many websites are written in React. here are a few examples:

Try it out for your self

As you can see, React gives you the power to develop beautifully interactive web apps not possible before. Check out our getting started with React tutorial to learn React hands on and stay tuned to Simplecode for more great React tutorials.