What is React?

React is a declarative JavaScript library introduced by Facebook in 2013. We'll look at how React came about and determine some of the skills you'll need as a React developer.

What is React?#

As you have taken the excellent decision of accessing this course, you must have at least a good level of curiosity about React and want to know more. But what exactly is React and why is it a powerful tool in building modern user interfaces?

Let's start by looking at React's own definition from the official React JS website:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

So, React allows us to break down our complex user interfaces into smaller, bite-sized pieces of functionality that operate on their own; managing their state, given some sort of input data referred to as props. These smaller components can be brought together as building blocks for larger, more complex user interfaces that interact via passed in data and events.

Components are usually written using a mixture of JavaScript and HTML, which are blended into files that commonly carry a .JSX file type (although this is not strictly necessary).

React was developed by Facebook and released to the open-source community in May of 2013. - source Wikipedia

React is known as being declarative in nature. To add some clarity to this, when React is described as 'declarative', it means that we can largely tell React what we want it to do or display, without having to worry about how this will be achieved.

As an example, if we were to update some text and color on a page using plain JavaScript, it would look like this (an imperative way):

However, by using React, the above example can be displayed in a declarative way:

You can see in the second example that we only have to describe our desired final state of the UI without the concern of physically walking through each change to the UI that we want to make.

The other nice thing about React is that it uses an adoptive approach. So, inside your websites and applications, you can use as much or as little of React as you wish, as suits your needs.

React remains one of the most popular JavaScript libraries for building robust user interfaces today and more and more people are keen to learn and adopt it into their development toolbox.

Skills required for React development#

Whilst we discussed some of the requirements for this course right at the beginning, such as the need to have a grasp of JavaScript and some frontend technologies, I think it’s worth answering a common question I see raised a lot in the community: ‘When is the right time to learn React and should I learn JavaScript first?’.

It’s a very common concern to have and it can be a bit of a minefield for beginners to know where to start. Should you learn JavaScript first? How much JavaScript do you need to know before picking up a framework or library such as React?

Hopefully, I can dispel some of the myths and clear up some of the confusion around these questions.

At its core, React (much like comparable libraries such as Vue JS), is mainly JavaScript. There are a few conventions, approaches, and syntax that are unique to React, but the vast majority of what you will produce will be JavaScript. Within that JavaScript you'll write HTML-like blocks referred to as JSX. Whilst not strictly HTML, you can think of it as such because it is almost identical to what you would write in a standard .HTML file.

Let’s look at an example:

The first two lines are standard JavaScript import statements. We include React because it needs to be in scope to use it, and then we import a component called Title.

Next, we create a functional component:

But a functional component is just that…a function! Granted, we’re using the arrow function syntax to write it, but you can see that there’s nothing fancy or complex about it.

The main ‘React-y’ part comes when we look at what our component returns, which is JSX:

It looks like HTML, and to a degree it is. Certainly from a declaration point of view, there’s not much difference. However, there are a few subtle differences that are unique to React. For example, the <Title /> line where we reference our imported component isn’t a native HTML element. This is a component tag in the JSX that React knows to interpret as ‘please load in my component called ‘Title’’. Secondly, where we call our full name method — { getFullName() } — again, this wouldn’t work in standard HTML. The method wouldn’t be called, rather we’d just get the string ‘{ getFullName() }’ output to the browser.

So to answer the original question, it really depends on the individual. Personally, I feel like it’s much easier (and preferable) to get a solid grounding in the fundamentals of JavaScript, HTML, and CSS before adopting a library such as React. That said, since the primary content you’ll be producing in React is ‘just’ JavaScript, you can jump straight into React too.

No discussions yet