May 7, 2021
React for absolute beginners
The goal of this article is not write code in react. If you don’t have any idea on what is React, then this is right start. Just 10 easy to digest points. So let’s get started.
1. What is react
React is basically just a very high level language than manipulating the DOM, a way to describe how the things on your web app will be structured. If you want to sound yourself a geek you may call it a library ;)
2. Why react
To understand the benefits of React, we need to understand problems of we face in making UIs:
When using just pure DOM manipulation, need to make changes every time when something needs to changed. We may need to remove or replace an element and so for forth. React solves this problem.
3. How react works
React is data driven. It reacts on data. If you change the data. It updates the UI based on that change. It makes programmers life thousands time easier than just writing working with DOM. If you once started to working in React, normal DOM manipulation will then seem to you a drudgery.
To do the reacting a efficient way react creates layer between react and DOM called “Virtual DOM”. Let’s see that that is briefly.
4. Virtual DOM
React doesn’t changes the DOM directly. First react creates a blueprint for what the resulted DOM should should look like. This blueprint is called a virtual DOM. It’s a lightweight representation of the DOM that react can manipulate very efficiently.
Next will see some terms and concepts very closely related to react.
5. JSX: JavaScript XML
You know JavaScript and HTML. But what is XML. Well you think of it as a more general form of HTML and which has a must stricter form.
JSX is a new language that allows you to write HTML like syntax in JavaScritpt code to describe the structure of DOM in easier way. Below is an example:
const heading = <h1>This is heading</h1>;6. Components
Components are functions. You define them once and then you can reuse them as many as you wish. They define a part of the UI and for this reason they are called components.
If you have worked in template languages before, this is like the partial templates.
7. States
States are data in a component. But unlike a data in a regular variable these data are directly related to rendering of the component. If the state changes the component re renders.
8. Props
Props are short for properties. When using a component you can set it’s properties or props. This initializes a component in the required way. You can think of them as function arguments or attributes in HTML.
States are private to component while props are given from the parent component.
9. Lifecyle
Components are are not something permanent to the UI. They can attached or unattached to UI or in react’s words mounted or unmounted to the UI.
React have two ways of writing a component. One is based on classes. They are called class based components. And the other is based on functions. These two ways of different ways of dealing the birth and death of a component in the UI.
You can execute certain actions upon the mounting or unmounting of a component. In class based components, you do this using lifecycle methods: componentDidMount and componentWillUnmount. In functional components they are done using a function nameduseEffect.
10. Hooks
In functional components react uses some functions to hook into class based features. These functions are called hooks. The useEffect function is a hook. It utilizes the lifecycle methods and give us a clean interface to work with.
—
Congratulations! Now you know some key concepts of React. As the next step I recommend following the official React websites tutorial : https://reactjs.org/tutorial/tutorial.html
