Some Basic Concept of React You should know Today

In this article, I will try to cover at least 10 basic concepts of React which help you to easily understand React knowledge.

We start at the Basepoint of the React. If you are not a newbie in React world feel free to escape from here and learn something advance from another source about React.

1. What is React?

React is a JavaScript library’ not a ‘framework’ developed by Facebook. With frameworks like angular JS, Vue JS the control is inverted means the framework will make a decision for you, whereas with a library like react you can make your own decision, you are in control. React helps builds user interfaces for single-page applications (SPA) by dividing UI reusable React library code (saving development time and reduce the coding errors).

But the main advantage of React is its flexibility. Frameworks are not flexible, although some claim to be. A framework usually wants you to code everything a certain way. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.

2. JSX (JavaScript Extension)

JSX is a syntax extension to JavaScript that allows writing function calls in an HTML-like syntax. Though JSX looks like Html, it’s no Html and it’s not understood by the browser. JSX is basically a compromise between React and browser. React uses babel transpiler to translate JSX syntax to react component like React.createElement. Consider this example:

Behind the scenes, each element rendered by the Greeting component is transpired by babel into a React.createElement.

This is also true for nested elements. For example:

3. How JavaScript work in React

We can use JS in react, consider an array of objects with property id and name. We can use the map` function to show it in the DOM like that.

4. React is declarative

React use a declarative approach, with react you can build user interfaces without even touching the DOM directly, not only that, you can implement an event system without interactive with actual DOM events. We just tell React we want a component to be rendered in a specific way. React will take care of how to do it and translate our declarative abstract to actual UIs in the browser and if any data change React will efficiently update and render the right component.

5. Reusable Components

React provides a component-based structure written in JavaScript. The component is like functions, when we need it, we call it, with some given input we get some output. Components are reusable, composable, and stateful. React uses the concept of ‘props’ as input while you need to pass data in component children in order for the children to render properly. A React component can be either ‘stateful’ or ‘stateless’. Class components are ‘Stateful’ whereas function components are ‘stateless’.

6. React Hooks

React hooks were introduced in React 16.8. React hook makes it easier to use state and react life cycle feature using function component and without using class and react component life cycle method. React hooks are a special type of function allow you to add state like useState hook, and useEffect hook allows you to perform side effects. Before, side effects were implemented using react component life cycle method. useState hook help to track state update within a component and trigger the virtual DOM diffing. useState hook can be declared in component as follows:

The useState hook returns an array with exactly 2 items. The first item is a value and the second item is a function. The first item “value” can be a string, number, array, or other types. In the above code I used to 0 as initialize value, The second item ‘function’ will change the value of the state when the setCount is invoked and update the DOM.

7. Data Flow

In React data flow allows us to send data between parent and child components as props but components that are siblings cannot directly communicate with each other. Another way of data flow is to use Redux or some stage management library. Example of parent-child component data flow:

8. Default Props

Consider this React component.

The above code defines a very simple Header component that renders a <h1> element containing a heading. What happens if the title prop is not passed?

If the title prop is not passed, the reference to props. title will be undefined.

One way to resolve this issue is to use conditional rendering:

Another way to resolve this issue is to set default props for the component or fallback value.

9. Conditional Rendering

It’s often required to render some parts or components if a certain condition is met and another is not met. There are lots of different ways we can apply conditional rendering in React. For example, these pieces of conditional rendering can change the button label based on the user logged in or not.

10. Higher-order components

Components often share functionality with each other, such as logging or network requests. These can become difficult to maintain as the number using this logic increases. Developers are encouraged to abstract shared code and include it where necessary.

In a regular JavaScript application, the concept of a higher-order function is one way to approach it. In short, they are functions that take other functions as arguments and impart behaviors onto them. Array methods such as map and filter are examples of these.

Higher-order components (HOCs) are React’s way of achieving the same thing. They are components that impart behavior onto a passed component.

In this example here, the function returns a new wrapped component, which renders the original one that was passed in alongside any props. HOCs are regular components and can do anything they can, such as passing in their own props and hooking into lifecycle callbacks. The function then wraps the original on export. By using HOCs, it makes commonly used chunks of code easier to maintain and test. When specific functionality is required, they are easy to drop in, safe in the knowledge that they will behave as expected