React js Core Concept.

Md Arif Hossain
2 min readNov 4, 2020

--

All the fundamental React.js Concepts.

React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution.

Frameworks serve a great purpose. However, frameworks come with some disadvantages. Framework are not flexible. A framework usually wants you to code everything a certain way. Frameworks are also usually large and full of features. If you need to use only a small piece of them, you have to include the whole thing anyway.

React is a small library that focuses on just one thing and one doing that thing extremely well. That “one thing” is the second part of the React’s definition.

Building User Interfaces.

A User Interface (UI) is anything we put in front of users to have them interact with machine.

We just tell it what we want! React will then build the actual UI on our behalf, in the Web browser.

Prop-Types

Runtime type checking for React Props and similar objects. We can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries see the check proptypes() reference below) will check props passed to our components against those definitions, and warn in development if they don’t match.

React Optimizing Performance

Internally React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance.

There are several ways you can speed up your React application :

1.Use the Production Build: If you’re experiencing performance problems in your React apps, make sure you’re testing with the minified production build.

2.Single-File Builds: We offer production-ready versions of React and React-DOM as single file.

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

4.Browserify: For the most efficient Browserify production build, install envify terser uglifyify plugins.

5.Rollup: For the most efficient Rollup production build, install rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser Plugins.

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

7.Profiling Components with the chrome Performance Tab: In the development mode, you can visualize how components mount, update, and unmount, using the performance tools in Supported browsers.

--

--