React Core Concepts You Need To Know

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

React Core Concepts

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

  1. The first argument is WHAT to render to the browser. This is always a “React element”.
  2. 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

  1. The first argument is the HTML “tag” for the DOM element to represent, which is div in this example.
  2. 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.
  3. 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

React is all about components

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

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

Creating components using classes

Functions vs classes

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…

Responding to an user events

Reusable Components

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

Dot Notation for JSX Type

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

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

defaultProps

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

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

<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

# 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

# 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

# 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

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

3rd way can be Profiling Components with the DevTools Profiler

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

Virtualize Long Lists

Avoid Reconciliation

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.

A tech enthusiast person. Loves to work using React js, JavaScript and in a word web Development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store