DEV Community

loading...
Cover image for React Core Concepts

React Core Concepts

Md Rasel
I am Md Rasel, I am a web developer.
・2 min read

React is a library for javascript, It is used to create a user interface.

1.What is React?

React is a javascript library, It is helping developers build user interfaces. This is a front-end library it is using the website in the front-end. React is only focused on the front-end.

2.JSX

JSX means for Javascript XML, it is an extension to javascript. We can write an HTML tag in a javascript file and it is JSX code but the Browser does not understand the HTML code in the javascript file so this code converted to browser understandable code so JSX extension converted the JSX code to simple HTML-style code.

3.Virtual DOM

Virtual DOM is a copy of the site’s DOM. you update or add any code in your projects then virtual Dom has created a Virtual DOM and compare actual DOM or browser DOM if any difference between these two doms then updates only this different part in browser DOM or actual DOM.

4.Components

React components is a reusable code block that divides the UI into smaller pieces. The main benefit of components for do not duplicate or rewrite code same structure/view but data is different, you use your components dynamically.

5.Declarative

React is declarative, declarative means the developer writes how it should be, not how to do it. it is more readable and easy to understand. create a component where using declarative style.

6.React useState

useState is a hook in reactJs . It returns an array with two elements, first element in the value and the second element is a function for set the new value. you can set the new values in useState then automatically update/re-render in the browser or UI. you can store (string, number, boolean, array, object, etc..) in useState.

7.Conditionally Rendering

You need to show data on specific users then you can use conditionally rendering. That means you specific the data to show which user and rendering the specific data for a specific user. For the conditionally rendering we used the ‘if else’ or ternary operator.

8.props

props are using for basically two components connecting and pass the data for one component to other components and props data is read-only, that means you cannot update this data in child components.

9.Default props

Default props mean to set the default value and it is using for this time that other components cannot provide props values or provide undefined then use the default values. You can set the default value. props are undefined then use this default value.

10.React Hooks

Another most used case and beautiful thing in React is Hooks. The Hooks makes developer life easier. The Hooks is a “Function”. Hooks are used only in Functional Components it is not working on Class components. Basically, it’s used for sharing stateful logic between components.

Discussion (1)

Collapse
developerantoniosousa profile image
Antonio Sousa

Thas is pretty clear. Thank you!