What is React? A Comparison to JavaScript and HTML

[00:00 - 00:14] Module 2, React and Modern UI Library As you've taken the excellent decision to access 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?

[00:15 - 00:23] 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.

[00:24 - 00:38] It lets you compose complex UIs from small and isolated pieces of code called components. So React allows us to break down complex user interfaces into smaller bite- sized pieces of functionality that operate on their own managing their own state, given some kind of input data.

[00:39 - 00:48] You'll see referred to as props. These smaller components can be brought together as building blocks for larger, more complex user interfaces that interact via past-in data and events.

[00:49 - 01:00] Components are usually written in a mixture of JavaScript and HTML which is blended into files that commonly carry a .jsx file type, although this isn't strictly necessary. React is known for being very declarative in nature.

[01:01 - 01:18] 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 something like this, which is an imperative way.

[01:19 - 01:31] However, by using React in the above example can be displayed in a declarative way. You can see that the second example we only have to describe our desired final state of the UI, without the concern of physically walking through each change in the UI that we want to make.

[01:32 - 01:40] The other nice thing about React is that it uses the "adoptive" approach. So inside your websites and applications you can use as much or as little of React as you wish to suit your needs.

[01:41 - 01:51] 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. What skills do you need for React development?

[01:52 - 02:05] 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 front-end 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?

[02:06 - 02:10] It's very common concern to happen. It can be a bit of a mind field for beginners to know where to start.

[02:11 - 02:15] Should you learn JavaScript first? How much JavaScript you need to know before picking up a framework or library such as React?

[02:16 - 02:20] Questions like these. Hopefully I can dispel some of the myths and clear up some of the confusion around these questions.

[02:21 - 02:32] At its core, JavaScript, like much comparable libraries such as Vue.js, is mainly JavaScript. There are a few conventions and approaches and syntax that are unique to React, but the vast majority of what you will produce will be JavaScript.

[02:33 - 02:44] Within that JavaScript, your right HTML like blocks referred to as JSX, whilst not strictly HTML, you can think of it as such because it's almost identical to what you would write in a standard.html file. Let's look at an example.

[02:45 - 02:53] So the first 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.

[02:54 - 03:04] 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.

[03:05 - 03:12] The main Reacti part comes when we look at what our component returns, which is JSX. It looks like HTML, and to a degree it is.

[03:13 - 03:17] Certainly from a declaration point of view, there's not much difference. However, there are a few subtle differences that are unique to React.

[03:18 - 03:29] 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."

[03:30 - 03:35] Secondly, where we call our full name method, get a full name. Again, this wouldn't work in standard HTML.

[03:36 - 03:41] The method wouldn't be called. Rather, we'd just get the string, get a full name, with curly braces, output to the browser.

[03:42 - 03:53] 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.

[03:54 - 04:01] That said, since the primary content you've been producing in React is just JavaScript, you can jump straight into Reacti. two.

[04:02 - 04:26] [ Silence ]