HOW TO LEARN REACT.JS FOR BEGINNERS?

What is ReactJS?

React.js is a JavaScript library from Facebook for easy development of interfaces, i.e. the external part of websites and applications with which the user interacts. The main trick of React.js is components and states.

A component is a piece of code that is responsible for the appearance of one of the elements of a website or an application. And these component pieces can be nested.

A state is all the information about an element, including its display. For example, the state of the “barometer” object may be described by the current_pressure, min, and max properties.

What are components and states?

It sounds a bit abstract and complicated so far, but in fact, it’s much simpler.

Let’s consider three large components: a Facebook feed post, a summary block, and a photo output block. Each of these has smaller components. For example, inside the post, there is text, image, avatar, author name, likes, comments, and various information elements. Inside the photo block are individual photos, and inside the summary block is the actual summary information.

Each of these components has states. For example, the summary block will look different on the mobile and desktop versions, the heart changes the number of likes or color (if you’ve liked or unliked the post), and the post can crop the text, show the full content, or change depending on the content. After all, the content of a post is also the state of the post. This is where the flexibility and power of React.js come in: you write a component once and then simply pass it to different states.

Why do you need React.js courses when you have HTML, JavaScript, and CSS?

React.js is just a way to present JavaScript and HTML code conveniently, to make it repeatable and visual. Its components are written in a special language – JSX, which looks like a mix of JavaScript and HTML. Here is a sample code in this language:

The JSX code is pretty clear, and by the way, what looks like HTML is not HTML at all. It sounds weird, but it’s just JSX syntax.

Browsers don’t need to understand JSX – React.js code translates to JavaScript, which any self-respecting browser is familiar with. To do this, an application written in React.js is run, for example, through Babel, a special program-transpiler that translates different representations (i.e. languages like JSX) into JavaScript code.

Where to download React.js and how to start using it

You can start by playing with React.js in CodePen’s online sandbox, or downloading an HTML file with a template. After that, you can run your code through Babel – also online, so you don’t have to install extra applications. There’s a good tutorial on JSX syntax on the official React.js website – start with Hello, World! and feel free to experiment in CodePen – that’s what the authors of the guidelines advise.

But installing and setting up a full React.js environment is an operation for advanced users and those who are deep into development. As usual, it’s easiest to learn the technology on real tasks – for example, set a goal to copy a part of the Facebook or Instagram interface.

React.js is a pretty straightforward library, although, as with anything, there are nuances. For example, webhooks, unidirectional data transfer, callback functions, virtual DOM, and lifecycle methods. Sounds scary, right? Don’t worry: it’s not easy to write a new Facebook or Instagram in React.js, but it’s still a very friendly library. Even for beginners.