What is ReactJS?
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.
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.
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.