10 important topic for React beginner

1 . User Interfaces React

A user interface is a functionality that we put anything in front of users to transform pages. If we want we can create a simple interface using HTML and CSS. but if we want to make our web more interactive. Then we have to use react because using react we can create interactive UIs, listen to user events, and update the user interface. Nowadays react is a very popular language. Because react able to create a common language between developer and web browser. React allow the developer to declaratively describe UIs and manage the action on their dom element.

2 . React’s tree reconciliation

Before starting we have to know what is DOM. DOM means “Document Object Modal”.When react was not invented we need to work with browser API . Browser API is also known as DOM API. We need to avoid to DOM tree as much as possible because if we do any hard operation on DOM then the user can not use the website smoothly. It’s a bad experience for users.

For this kind of problem, React came up with a proper solution. React make the virtual DOM tree likes the actual DOM. When we call to react to render tree of element it’s first to generate virtual content of that tree and keep in the browser memory for later. Any beginner can not work with DOM API easily because it is so hard. React give us to work with virtual DOM which is easier than actual DOM. When we want to change the tree element we call react then it creates a new virtual DOM with changes tree.

3 . render()

Rendering is the most important method for a developer to manage frontend and backend development. We know that in reacting the render() method is the only required method in-class component. render() is the part of react life cycle component and it is not user call able. The render() method does not directly interact with the browser. If we want to interact with the browser then we have to use componentDidMount().

4 . Constructor()

When we want to create an object from classes we use constructor method because it called automatically. The constructor called before the component is mounted in react component. When we try to use constructor method in react component we should use super(props). without using super(props) this.props will be undefined.

In react component constructor used for only two reason

1.It is used for initializing the component’s local state

2. It is used to connecting event handler to the component

constructor() method don’t allow to call setState() inside constructor.

5 . componentDidMount()

Using componentDidMount() method we can easily call setState method to change the state of our website. If we want to set up any subscription we will use componentDidMount() method and don't forget to use componentWillUnmount() for unsubscribe.

componentDidMount() method is the perfect place to load data from the API. With API response We can call setState() method for rendering updated data.

6 . props

Props are very important in react. Generally props used for passing data from one component to another component. We can also use props pass argument in react component. If we use constructor function props we should pass props to the constructor. We know that props are unchangeable. When we don’t need to change our data in our component then we can use props.

7 . State

We know that react component has built is state object. Using state method we can store our property values in specific components.If we want we can easily change and update our data. If we want to change a value in the state object we should use setState() method.

8 . JSX

JSX is one of the most important topics in react. Which makes our code easy and better. JSX is a javascript extension syntax that allows to us write easily Html in react.

We can use jsx without any createElement() or appendChild() method With jsx we can write react variable or property inside curly braces { } and jsx will return the result

Now jsx return “You got 60 out of 60”

9 . ternary operator

Nowadays in javascript ternary operator is the most useful for conditional rendering Ternary operator makes our code more attractive and shorter. In jsx we can easily use ternary operator and it is the only one that can three operands.

And the output is “How are you” Condition followed by ( ? ) true value followed by ( : ) and the last expression is false

10 . Error Boundaries

Error is a common problem for developers. Without getting errors we can’t be a good developer. Because we learn a new thing new solution of our error. error makes by our single mistake. when by finding an error our code gets stuck. and the server immediately stops its response. Generally, when we find an error our whole app gets stuck. Using error boundaries our whole app should not get stuck. Error boundaries is a new concept of react 16. Error boundary catches the javascript error and log those error and without any crashed display fallback UI