DEV Community

Cover image for React JS beginner fundamental concepts
MD Moshiur Rahman
MD Moshiur Rahman

Posted on • Edited on

React JS beginner fundamental concepts

 

1. What is react?

React is a JavaScript Library. It is not exactly a framework. This library builds a user interface. It's a tool to build UI components. React uses the front end of the website. React can focus in only client site in website.

2. What is JSX??

JavaScript XML is short form JSX. We write in react pure vanilla JavaScript because react is JavaScript library. But need HTML for create website. We can't write in JS file. But JSX file write in JS file. JSX file almost looking 90% same HTML. JSX is using a transpolar which is known as BABLE. BABLE JSX file compile in Html. We use JSX in react easily building our UI.

3. What is Components?

One website has to many section. They are many section similar in look de deferent in data. Some times we see many section looks are same but data is deferent . Then same code repeat in code. By using react component we can't repeat our codes. That is the main beauty of a component.

4. What is Virtual Dom?

React is work in virtual dom. A virtual Dom object is the same properties as real Dom but it has the power to change the real thing that I want to change. Original Dom manipulating is slow than virtual dom. Each time we change something in our JSX file, all the objects that are there in the virtual DOM gets updated.

5. What is props ?

Some times we need pass data one components to other components. Props is a method where we can pass data from parent component to child component. Props are so effective for small-type applications.

6. What is Context API?

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent.

7. Condition Rendering

Conditional rendering is a condition-based render function. Some we need like if the user is a boy show something else the user is a girl then shows another thing. In this case, we use conditional rendering & show output to the user.

8. What is State?

Sometimes we need to set data anywhere and after need to use. The state is an important part of react. In this case, we can use the useState function, we can use and set data easily.

9. React Fragment

Fragment is a common pattern in react is for a component to return multiple elements. React also provides a component for rendering multiple elements without a wrapper.

10. React Hooks

A hook in a React component is a call to a special function. They let you use state and other React features without writing a class. Hooks have a dedicated docs section and a separate API reference :
Basic hooks 
useState
useEffect
useContext

Other hooks :
useReducer
useCallback
useRef etc.

Top comments (0)