React Core Concept

Today, I will discuss randomly some react core concepts without ordering. First of all, we should know about what is React?

React is a front-end base JavaScript framework for building user interfaces or UI components. This language develops by Facebook and a community of individual developers and companies. React core feature is Single-page-application. Now we know what is React. Let’s get started to write randomly some react concepts.

1. Virtual DOM

DOM means = Document Object Model, Dom is a JavaScript representation in an HTML file. React works on the browser by a tree structure. The DOM represents the document as nodes and objects. Things around HTML tags are called NODE when they are DOM.

2. React Component

React Application show UI by using components. Use small components is the best practice of coding. Component looks like a function. in function have input then they give output. on the other hand component input function name is props they give output on application UI.

3. Props

Props in a component input. Data is sent from one component to another through props. After that it shows on the UI. Props can be used to send data in many ways such as arrays, single data as objects. It can be shown directly to another component or by distracturing.

4. JSX

HTML can be written to a JavaScript file via JSX. The DOM operations can then be used in the browser to display the DOM tree described by the enhanced HTML.

5. React Hooks

React hooks means call special function. all react hooks stating word is “use”. like “useState”, “useRef”,”useEffect”, Hooks make works easy.

6. React Event

Event handler can change the site. we pass as a function in event handler. some event handler name is onClick={} onChange={} . Event handler can access all methods available on the Dom.

7. Diff Algorithm

When we build React Application. React create 2 copies of the real DOM. Then The DOM initializes, React takes a copy of it 1. After that you change something, React makes another copy of it with the changes 2. Then he compares the changes between the two copies using Diff Algorithm (an algorithm that can differentiate between two things) and then only re-paints those parts on the real DOM that you have changed.

8. State Management

If there is or could be a change in the website, we will use the state. that time we use useState() and have default parameters. For example if you load data from a database to our website it's a changing our website state in this time we use useState().

9. React Optimizing Performance

Optimizing means when we create any application you must concern about application performance. There are several option to speed up application performance.

10. Action in Redux

Actions in redux are payloads of information that send data to your application to your store. Action send to data using state store.dispatch().