Get the basics of ReactJS

Tram Ho

What is ReactJS

React is a Javascript library used to build Single Page Application (SPA) applications quickly. Currently React is one of the 3 most popular Frameworks for the Front-end, with a large community, easy to learn, a lot of work, React is really worth learning.

Today, we will learn through the most basic concepts in React.

Components

This is a very powerful part of React, which helps us to divide the application interface into small parts that can be easily reused, rather than using templates like other frameworks. Currently in the React will have two components using components that function and class components but currently the preferred way is the function components because it is short, easy to check and can easily be used React Hook

  • Class Components Declaration

  • Declaring Function Components

  • Implement Using Components

JSX – Javascript Syntax Extension

This is simply a syntax extension of Javascript. With it you can write Javascript with XML-like tags (XML-like). In essence, tags are actually function calls, which will be transformed in the React code and end up as HTML and Javascript in the DOM tree.

Props & State

These are two types of data in React that everyone learns to know, the basic difference between these two data types is that props will be inherited and are often used to share from parent component to child component. State is private and can only be used inside the component, unlike props, when the state changes its value, the UI will also be rerender.

1. Props

With props we can change the value passed to the component, so that we can easily reuse the component.

2. State

After every second, the state will be changed as UI is changed as well. componentDidMount is a Lifecycle in React, you can learn more about it here.

Event handling

Event handling in React is very simple with the DOM similar to pure JavaScript

Click event

Render Lists

You can easily pass an array or object to a component and easily render array items.

Key

When you dynamically create components, each element needs a key property, and this property is unique. During rendering, the components will be disordered, they can also be destroyed or recreated depending on the different algorithms, assigning it a key to identify and ensure that the components are in the correct position. Its layout optimizes rendering.

summary

Recently, there are some basic concepts of React, my article still has many shortcomings, to understand more you can visit the React page to learn more carefully!

Reference article: https://codeaholicguy.com/2016/03/01/hoc-reactjs-trong-15-phut-phan-1/

Share the news now

Source : Viblo