Some Common Concepts in React

React is a open-source javascript library for building awesome user interfaces or UI components. React was first designed by Jordan Walke in 2011. And react was open sourced at js conference in 2013.

React js

In this article I am gonna talk about some common react concept that every beginners should know.

1. Components

Components is a block of code that can be re-useable and independent. Components make the task of make user interface much easier. There are two type of components, class components and function components.

• class-based components: class-based component has state, object-oriented programming style, lifecycle methods.
• functional components: functional component has functional-programming-style and minimal-boilerplate.

2. Virtual DOM

Another react feature is virtual document object model. Behind the scene react creates an in-memory data-structure cache, computes the resulting differences and then updates the browser’s displayed DOM efficiently. This system is called reconciliation. This reconciliation changes entire thing on every programmer change. This method boost the major performance.

3. Lifecycle Methods

In react every components has a lifecycle which can execution of code during components lifetime. Each lifecycle of components has three main phrases.

• Mounting: In mounting we have to put elements in DOM. When mounting a component react has 4 method: constructor() , getDerivedStateFromProps() , render() , componentDidMount() .
• Updating: Updating is the 2nd method of react lifecycle. When a component is updated there is a change in the component’s state or props. It has 5 method: getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate() .
• Unmounting: The last phrase in the lifecycle is unmounting. It has only one built-in-method: componentWillMount().

4. JSX

JSX stands for JavaScript XML. JSX is used to write HTML code in Javascript. JSX converts HTML into react elements without creating any createElement() method in DOM. Here’s an example:

const example = <p>JSX example<p>;

ReactDOM.render(example, document.getElementById('root'));

5. Attributes

React JSX comes with a lots of attributes. Custom attributes also can add to the components. All these attributes are received in react as a props in components. We can also pass a attribute as a component’s prop and receive it from the component.

Some of these attributes are: className, id, selected, onChange, formAction, readOnly, value, width, type, title, target, src, span, sizes, required, placeholder, icon, name, min, max, crossOrigin, data, etc.

6. React Hooks

Hooks are new react feature that now we can use state with other feature without writing a class. They make easily understandable. Reacts comes with some built-in hooks. Some common hooks are useEffect, useContext, useReducer, useState, etc.

React Hooks

React hooks has some own rules. This rules must be follow when the hook is used:

1. Hook should always called at the top of the component start.
2. Hooks should can be called from only react functional components.

When you build your own hooks they are called custom hooks. One can build custom hook and use these hooks in their code. But they should be aware of code’s integrity.

7. React Events

React can also performs action based on user events.

• Adding React Events: React has the same way to use events as HTML. React events are always written in camelCase syntax and event handlers are written inside curly braces.
• React Event Handlers: React event handlers are declared in the top of components. One event handlers can use in many events.
• Passing Arguements: We can also send parameter to event handlers.

8. Use NPM In React

NPM stands for Node Package Manager. Npm is world’s larges software library. Open-source developers use npm to share software. In react we can use npm software to building user interfaces awesome. We can use various package manager from all of them. These package manager make react developer’s life much easier.

Npm is free for all to use. You can download all npm public software packages without any registration or logon. Just use cmd for installing npm softwares.

Npm is installed with Node.js. This means that you have to install Node.js to get npm installed on your computer.

9. React CSS

React can style with css stylesheet. React css can use inline styling or css stylesheet.

• Inline Styling: To style an element with inline styling double curly braces is required and the value must be js object.
• CSS stylesheet: Just create a new file as .css extension. Make your style and import it to your .js component. That’s it, enjoy your styling.

10. React Sass

Sass is a css pre-processor. Sass is a npm software. By using npm, you can easily install and use Sass in your React projects.

To use react sass just create a new file as .scss extension. Make your style in this .scss file and import it to your react project. React sass is same as react css but in sass you will get some benefit like declaring variables, creating sass functions, etc. These things will make your code more easier.

Here are some common react concept that every react beginner should know. In this article I write about very basic concepts of react. I hope this short article has influenced you in a positive way.