React Core Concepts You Need To Know

8 min readNov 5, 2020

You cannot learn whole React in just one article but you can have some concepts through this article .

React a JavaScript library which is used to build user interfaces. It is not a framework as we have to use other libraries with it to complete our operations. A framework doesn't need others help. React is called declarative as we can easily understand the UI while using it.

In React we ignore traversing the DOM tree as much as possible as DOM is slow experience for an applicant.

ReactDOM.render

This is basically the entry point for a React application into the browser’s DOM. It has 2 arguments:

The first argument is WHAT to render to the browser. This is always a “React element”.
The second argument is WHERE to render that React element in the browser. This has to be a valid DOM node that exists in the statically rendered HTML.

React.createElement

The React.createElement function has many arguments:

The first argument is the HTML “tag” for the DOM element to represent, which is div in this example.
The second argument is for any attributes (like id, href, title, etc.) we want the DOM element to have. The simple div we’re using has no attributes, so we used null in there.
The third argument is the content of the DOM element. We’ve put a “Hello React” string in there. The optional third argument and all the optional arguments after it form the children list for the rendered element. An element can have 0 or more children.

Nesting React elements

We have two nodes: one is controlled with the DOM API directly and the second one being controlled with the React API.

React is all about components

In React, we describe UIs using components which are reusable, composable, and stateful.

We can define small components and then put them altogether to form a bigger one. All components whether small or big are reusable, even across different projects.

The name has to start with a capital letter

Component Name has to be started with capital letter.A JSX compiler (like Babel) will consider all names that start with a lowercase letter as names of HTML elements.

IS The first argument is an object of “props”??

In React, the list of attributes received by a React element is known as props. A React function component receives this list as its first argument. The list is passed as an object with keys representing the attributes names and values representing the values assigned to them.

Creating components using classes

React supports creating components through the JavaScript class syntax as well.

Functions vs classes

Components created with functions used to be limited in React. The only way to make a component “stateful” was to use the class syntax. This has changed with the release of “React Hooks” beginning with React version 16.8, which was released in early 2019. The React hooks release introduced a new API to make a function component stateful (and give it many other features).

With this new API, most of what is usually done with React can be done with functions. The class-based syntax is only needed for advanced and very rare cases.

Components vs Elements

A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render method).

A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents.

Lets talk about hooks…

A hook in a React component is a call to a special function. All hooks functions begin with the word “use”. Some of them can be used to provide a function component with stateful elements (like useState), others can be used to managed side effects (like useEffect) or to cache/memoize functions and objects (like useCallback). Hooks are very powerful and sky is the limit when it comes to things you can do with them.

Responding to an user events

One can add an event handler with an “onEvent” property . This could be an onClick, onMouseOver, onScroll, onSubmit, etc.

Reusable Components

Components are all about reusability.

Understanding the Virtual-DOM

The reconciliation process is where React

Compares the previous internal instance with the next internal instance.
Updates the internal Instance which is a Component Tree structure in JavaScript Object(Virtual DOM).
And updates the actual DOM only at the node where there is an actual change along with it’s children.

JSX

Basically , JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.

React Element Type Specifying

The first part of a JSX tag determines the type of the React element. Capitalised types indicate that the JSX tag is referring to a React component.

Dot Notation for JSX Type

One can also refer to a React component using dot-notation from within JSX. This is convenient if One has a single module that exports many React components.

Props in JSX

There are several different ways to specify props in JSX.

JavaScript Expressions as Props

One can pass any JavaScript expression as a prop, by surrounding it with {}. For example:

<NewComponent foo={2 + 3 + 4 + 5} />

For NewComponent, the value of props.foo will be 14 because the expression 2 + 3 + 4 + 5 gets evaluated.

String Literals

One can pass a string literal as a prop. These two JSX expressions are equivalent:

<NewComponent message="hello" /><NewComponent message={'hello'} />

defaultProps

defaultProps 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 not for null props. For example:

class CustomButton extends React.Component {
  // ...
}CustomButton.defaultProps = {
  color: 'green'
};

If props.color is not provided, it will be set by default to 'green':

render() {
    return <CustomButton /> ; // props.color will be set to green
  }

If props.color is set to null, it will remain null:

render() {
    return <CustomButton color={null} /> ; // props.color will remain null
  }

Optimizing React application

Using the production build we can optimize it. Instructions are as below:

Create React App

f your project is built with Create React App, run:

npm run build

This will create a production build of your app in the build/ folder of your project.

Remember that this is only necessary before deploying to production. For normal development, use npm start.

ingle-File Builds

We offer production-ready versions of React and React DOM as single files:

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Remember that only React files ending with .production.min.js are suitable for production.

Brunch

For the most efficient Brunch production build, install the terser-brunch plugin:

# If you use npm
npm install --save-dev terser-brunch# If you use Yarn
yarn add --dev terser-brunch

Then, to create a production build, add the -p flag to the build command:

brunch build -p

Remember that you only need to do this for production builds. You shouldn’t pass the -p flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower.

Browserify

For the most efficient Browserify production build, install a few plugins:

# If you use npm
npm install --save-dev envify terser uglifyify# If you use Yarn
yarn add --dev envify terser uglifyify

To create a production build, make sure that you add these transforms (the order matters):

The envify transform ensures the right build environment is set. Make it global (-g).
The uglifyify transform removes development imports. Make it global too (-g).
Finally, the resulting bundle is piped to terser for mangling (read why).

For example:

browserify ./index.js \
  -g [ envify --NODE_ENV production ] \
  -g uglifyify \
  | terser --compress --mangle > ./bundle.js

Remember that you only need to do this for production builds. You shouldn’t apply these plugins in development because they will hide useful React warnings, and make the builds much slower.

Rollup

For the most efficient Rollup production build, install a few plugins:

# If you use npm
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser# If you use Yarn
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

To create a production build, make sure that you add these plugins (the order matters):

The replace plugin ensures the right build environment is set.
The commonjs plugin provides support for CommonJS in Rollup.
The terser plugin compresses and mangles the final bundle.

plugins: [
  // ...
  require('rollup-plugin-replace')({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  require('rollup-plugin-commonjs')(),
  require('rollup-plugin-terser')(),
  // ...
]

For a complete setup example see this gist.

Remember that you only need to do this for production builds. You shouldn’t apply the terser plugin or the replace plugin with 'production' value in development because they will hide useful React warnings, and make the builds much slower.

webpack

Note:
If you’re using Create React App, please follow the instructions above.
This section is only relevant if you configure webpack directly.

Webpack v4+ will minify your code by default in production mode.

const TerserPlugin = require('terser-webpack-plugin');module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin({ /* additional options here */ })],
  },
};

You can learn more about this in webpack documentation.

Remember that you only need to do this for production builds. You shouldn’t apply TerserPlugin in development because it will hide useful React warnings, and make the builds much slower.

Another way is Profiling Components with the Chrome Performance Tab

To do this in Chrome:

Temporarily disable all Chrome extensions, especially React DevTools. They can significantly skew the results!
Make sure you’re running the application in the development mode.
Open the Chrome DevTools Performance tab and press Record.
Perform the actions you want to profile. Don’t record more than 20 seconds or Chrome might hang.
Stop recording.
React events will be grouped under the User Timing label.

3rd way can be Profiling Components with the DevTools Profiler

react-dom 16.5+ and react-native 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler. An overview of the Profiler can be found in the blog post “Introducing the React Profiler”. A video walkthrough of the profiler is also available on YouTube.

If you haven’t yet installed the React DevTools, you can find them here:

Virtualize Long Lists

If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as “windowing”. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

Avoid Reconciliation

React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”, but it works the same way on React Native.

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM.

Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it’s not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function shouldComponentUpdate, which is triggered before the re-rendering process starts. The default implementation of this function returns true, leaving React to perform the update.

This article is just a simplified look you must read and research and hard work more to learn more.