Fundamental React.js

Reazul Islam Bhuiyan
3 min readMay 7, 2021

Some topics about React that you must need to know

What is React

React is an open-source, front end, JavaScript library. It is not a framework. React follows the Unix philosophy. It is maintained by Facebook. It is a User Interface (UI) library. React is a tool for building UI components.

DOM

DOM is “Document Object Model”. It is the browsers programming interface for HTML documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.

Virtual DOM

The Virtual DOM (VDOM) is a programming concept. A virtual DOM object is a representation of a DOM object, like a lightweight copy. A virtual DOM object has the same properties as a real DOM object. DOM manipulating is slow. But Virtual DOM is faster.

JSX

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements.

Default props

defaultPros can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but no for null props. For example:

PropTypes

PropTypes was originally exposed as part of the React core module, and is commonly used with React components. React will automatically check the propTypes that set on the component, but if we are using PropsTypes without React then we may want to manually call.

Props

In React if we want to pass data from parent to child component we need to use props. From JSX point of view props are HTML attributes. Props component are available under child components.

State

The State of a component is an object that holds some information that may change over the lifetime of the component. States can only be used in Class Components. It is generally updated by event handlers.

Optimizing Performance

If we are not sure that our build process is set up correctly, we can check it by installing React Developer Tools for Chrome. By default, React includes many helpful warnings. These warnings are very useful in development. For the most efficient Browserify production build, install a few plugins:

Rendering

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. Libraries that use render props are React Router, Downshift and Formik. Once we create an element, we can’t change its children or attributes. The only way to update the UI is to create a new element and pass it to ReactDOM.render().

--

--