What is React?
In plain English, React is considered to be the View ‘V’ in the Model View Controller (MVC) model. Views are the logic-less files that are controlled by a ‘Controller’. React does not replace the view, rather it makes it more modular by creating highly reusable components (pop up modals, lists, sortable tables, etc.).
Join our newsletter
Join the newsletter today and receive valuable, in-depth Jamstack tips, tricks, and case studies.
The big idea behind React is making your own elements similar to HTML elements. In React, a page is a collection of smaller pieces, these small pieces are called components. Developers can utilise these components to efficiently create large web applications, which can change the displayed elements or data without the need to reload the page. A simple example of this would be Facebook likes. The number of likes can increase or decrease without having to reload the page. This method has made it very easy to build modern, complex user interfaces.
Evolution of React
In 2011, Facebook developers started to face some issues with code maintenance. As the Facebook Ads app started growing exponentially, the team needed more people to keep it running perfectly. Over time, their app became difficult to handle, as they faced a lot of updates. Their code demanded an urgent upgrade to become more efficient.
They had the model right, but they needed to do something about user experience. Jordan Walke, a software engineer at Facebook, built an initial model that made the process more systematic, and this is when React.js came into being.
Market Demand for React developers
React.js hit a new high in June 2018, having been mentioned in over 28% of job postings across the most popular languages. The large gap between Angular and React became even larger, with Angular's continuing decline in popularity.
Not only does React win on the jobs marketplace, it’s also leading in the amount of npm downloads:
Important features of React
The result of this code is the following:
Hello, John Doe!
React creates an in-memory data structure cache, which computes the changes made and then updates the browser. This feature allows only those components which have been changed to be updated, rather than reloading the whole page.
Single way Data Flow
In React, it is not permissible for the components to edit any properties directly. Instead, they have to pass a callback function with the help of which properties can be modified. This data flow is better known as “Single way Data Flow”
React has native libraries which Facebook announced in 2015. These native libraries provide the architecture for native iOS and android applications.
React in a nutshell
Components in React
Changing the components based on State
State is the way to change the look of our UI based on . When the user clicks a button (button click -> event), the state will update causing changes to the UI. We can see the state of our component with . In the function “this” always refers to the component it is in.
The above expression checks if the movie is playing or not and changes the component accordingly.
Interaction between components
There should be a way for our components to interact with one another. We need to be able to pass data or tell a component if it’s in use or not. We do this by using props. A prop is the information shared by a parent component to the child component. JSX props look just like HTML attributes. When the state of the container changes, our prop changes.
Events as Props
Props are not limited to only being information tags, they can also be functions (events). If a prop is an event, then (for example) the “on click” event will change the state of the container in which the prop is placed too. As a result of this, it will update the related page, data or components which are using that container.
Drawbacks of setState
Directly mutating state with setState is not a good pattern. React waits a bit to see if there are any more changes and then updates the state. setState provides a callback that you should use.
What are Refs?
In a typical flow, props are the only way for interaction between parent and child components. There may be some cases in which you need to modify a child outside the typical dataflow; for such cases refs are used. Refs are a way to create handles to the components that you have created, and return a reference to the element. It is good practice to avoid the usage of refs for anything that can be done declaratively.
Let’s jump out of index.html
Top Websites made using React
- Khan Academy
Is React the right choice for me?
I. Easy to learn and use
II. Reusable components
III. Virtual DOM (no need to reload the whole page)
IV. Great Developer Tools
V. Easier to write with JSX
VI. Big community that’s ready to help