How to setup babel module resolver in React with typescript ( Working Example )

<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLuTVL3wfI343MeUM1cL21Ouynqj8Z12Bz9niJPv74DqYRMPYiAwKHkPyHq31gD68W77FqN7Ih54oInwNpHYeW_BR1bCSgq3BMSHyEcd8m7WIPZJO2fQKbHYmkb8PndvNSO00GWbFbox9/s600/Craco+Configuration.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img alt="React Craco configuration" border="0" data-original-height="400" data-original-width="600" height="426" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLuTVL3wfI343MeUM1cL21Ouynqj8Z12Bz9niJPv74DqYRMPYiAwKHkPyHq31gD68W77FqN7Ih54oInwNpHYeW_BR1bCSgq3BMSHyEcd8m7WIPZJO2fQKbHYmkb8PndvNSO00GWbFbox9/w640-h426-rw/Craco+Configuration.png" title="Craco Configuration in React" width="640" /></span></a></div><span style="font-size: x-small;"><br /></span><h1 style="text-align: center;"><span style="font-size: x-small;"><span> </span>Craco Configuration</span></h1><h2 style="text-align: left;"><span style="font-size: x-small;">Craco :</span></h2><p style="text-align: left;"><span style="font-size: x-small;">    Craco stands for creating react app configuration override. It's a tool for configuring the create react app tool and overriding the default configuration. it can be used to configure eslint as well as babel. we will be using it for configuration to avoid messy imports e.ge.</span></p><p style="text-align: left;"><span style="font-size: x-small;"><span>    </span><span>    </span><span>    </span><span>    </span><span>    <b>import {anycomponent} from '../../../components/anycomponent/anycomponent.js"</b></span><br /></span></p><p style="text-align: left;"><span><span style="font-size: x-small;">we will be converting this import into something like : </span></span></p><p style="text-align: left;"><span style="font-size: x-small;"><span><span><span>    </span><span>    </span><span>    </span><span>    </span></span></span><b>import {anycomponent} from '@components/anycomponent".</b></span></p><p style="text-align: left;"><span style="font-size: x-small;">so lets get started.</span></p><h2 style="text-align: left;"><span style="font-size: x-small;">Configuration :</span></h2><div><span style="font-size: x-small;"><br /></span></div><div><span style="font-size: x-small;">    we will be creating a new react app with a typescript template for this purpose in order to end up with a complete and running code. you will also find the link to the Github repo at the end of this tutorial.</span></div><div><span style="font-size: x-small;"><br /></span></div><h2 style="text-align: left;"><span style="font-size: large;">Step 1: </span></h2><div><span style="font-size: x-small;">    </span></div><div><span style="font-size: x-small;"><span>    Create a simple react app by using npx or yarn. I will be using yarn for this purpose. The command for creating a new project using yarn is :</span><br /></span></div><div><span style="font-size: x-small;"><span>    </span><br /></span></div><div><span style="font-size: x-small;"><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span></span></span><b>yarn create react-app craco-configuration --template typescript</b></span></div><div><span style="font-size: x-small;"><br /></span></div><div><span style="font-size: x-small;"><b>NOTE: </b>you should have already installed<b> yarn </b>in order to run this command.</span></div><div><span style="font-size: x-small;"><span>    </span><br /></span></div><h2 style="text-align: left;"><span><span style="font-size: large;">Step 2: </span></span></h2><div><span style="font-size: x-small;">    </span></div><div><span style="font-size: x-small;"><span>    Now you would have a complete project up and running with a basic configuration of typescript.</span><br /></span></div><div><span style="font-size: x-small;">The project will look something like this</span></div><div><span style="font-size: x-small;"><br /><span><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkASXKPrYA3vp90Ote6tde6U32om6uHhjpOBDhWNlVHqVjKncs5QiywAxvSDaPlD6l3wYoXmgBvMl9cM5uMCBS69w8f_J7PdagbZiUulCC-wz8_q1A-uiCPLrIgwASkJGo8IWS7ay5gil2/s1920/Screenshot+from+2021-07-29+14-22-59.png" style="margin-left: 1em; margin-right: 1em;"><img alt="VS-Code for craco configuration" border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkASXKPrYA3vp90Ote6tde6U32om6uHhjpOBDhWNlVHqVjKncs5QiywAxvSDaPlD6l3wYoXmgBvMl9cM5uMCBS69w8f_J7PdagbZiUulCC-wz8_q1A-uiCPLrIgwASkJGo8IWS7ay5gil2/w640-h360-rw/Screenshot+from+2021-07-29+14-22-59.png" title="VS-Code with Typescript React project" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div>open the src folder and create a new folder called <i style="font-weight: bold;">components </i>and create two new folders inside <b>components</b> called <b>ComponentA</b> and <b>ComponentB</b>. Inside <b>componentB </b>create a new folder called <b>SubComponentB</b>.create the necessary boilerplate react code for <b>ComponentA</b> and <b>ComponentB </b>as well as for <b>SubComponentB</b>.  the files will look something like this.</span></span></div><div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /></span></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglotI4wXoBQgnsJnFy5EChKowOW5XCzZi2qWyPpeRVxS8OImKz5ea7F2o5Dt6dWONAyLW5wXwfVx61vKrKNerf52Ob-67O6Mi7YuX4yXZoqEiuMDywtUI8-VRmA7ROM3FmrISIhlCMuFJw/s1920/Screenshot+from+2021-07-30+14-56-02.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglotI4wXoBQgnsJnFy5EChKowOW5XCzZi2qWyPpeRVxS8OImKz5ea7F2o5Dt6dWONAyLW5wXwfVx61vKrKNerf52Ob-67O6Mi7YuX4yXZoqEiuMDywtUI8-VRmA7ROM3FmrISIhlCMuFJw/w640-h360-rw/Screenshot+from+2021-07-30+14-56-02.png" width="640" /></span></a></div><div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZuN2Gy1bbMcEdgLWbD8yqT5TrZ4R_vnoHos2KBLmMDm2v_VZbwLq-HkEM6m3rP84TK5S9JxhP-0mKB4-l8fVr9mwpXEWEeGUKkrPEMut9zcpc3ipNJYj1exoOYL97XmOheKKfiYCHcByW/s1920/Screenshot+from+2021-07-30+14-56-04.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZuN2Gy1bbMcEdgLWbD8yqT5TrZ4R_vnoHos2KBLmMDm2v_VZbwLq-HkEM6m3rP84TK5S9JxhP-0mKB4-l8fVr9mwpXEWEeGUKkrPEMut9zcpc3ipNJYj1exoOYL97XmOheKKfiYCHcByW/w640-h360-rw/Screenshot+from+2021-07-30+14-56-04.png" width="640" /></span></a></div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /></span></div><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yZHqOS1Y4CKIENu50iVLXtKevYIqTdVI4YdZDzIssy_8bpsh-lKt5VSMyDXEuc9h7aW6e7Ef-esXotsfHwUzcayTfKrnlx1wlo7TBsc0KiSW4y4ZC0NOw3BmgCxCeun3q7xXaUrLs69s/s1920/Screenshot+from+2021-07-30+14-56-06.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yZHqOS1Y4CKIENu50iVLXtKevYIqTdVI4YdZDzIssy_8bpsh-lKt5VSMyDXEuc9h7aW6e7Ef-esXotsfHwUzcayTfKrnlx1wlo7TBsc0KiSW4y4ZC0NOw3BmgCxCeun3q7xXaUrLs69s/w640-h360-rw/Screenshot+from+2021-07-30+14-56-06.png" width="640" /></span></a></div><span style="font-size: x-small;"><br /></span><p></p><div><span style="font-size: x-small;">now if we want to import <b>ComponetA</b> inside <b>SubComponentB</b>,<b> </b>the import will look something like this.</span></div><div><span style="font-size: x-small;"><br /></span></div><div style="text-align: center;"><span><span style="font-size: x-small;">   import {componentA} from '../../componentA/componentA';</span></span></div><div style="text-align: center;"><span><span style="font-size: x-small;"><br /></span></span></div><div style="text-align: left;"><span style="font-size: x-small;">now we move on to the next step of adding babel module resolver in order to get rid of this.</span></div><div style="text-align: left;"><span style="font-size: x-small;"><br /></span></div><h2 style="text-align: left;"><b><span style="font-size: large;">Step 3 : </span></b></h2><div><span style="font-size: x-small;"><span style="font-weight: bold;">    </span><b>    </b>create a folder in the root folder of a project called config and create a file called craco.config.js inside the config folder and add the following configuration file.<br /></span></div><div><span style="font-size: x-small;"><br /></span></div><div><span style="font-size: x-small;"><br /></span></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Courier New", "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; line-height: 27px; white-space: pre;"><div><span style="font-size: x-small;"><span style="color: #66d9ef; font-style: italic;">module</span>.<span style="color: #66d9ef; font-style: italic;">exports</span> <span style="color: #f92672;">=</span> {</span></div><div><span style="font-size: x-small;"> babel: {</span></div><div><span style="font-size: x-small;"> presets: [<span style="color: #e6db74;">"@babel/preset-react"</span>, <span style="color: #e6db74;">"@babel/preset-typescript"</span>],</span></div><div><span style="font-size: x-small;"> plugins: [</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-object-rest-spread"</span>],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-transform-spread"</span>],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-export-default-from"</span>],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-decorators"</span>, { legacy: <span style="color: #ae81ff;">true</span> }],</span></div><div><span style="font-size: x-small;"> [<span style="color: #e6db74;">"@babel/plugin-proposal-class-properties"</span>, { loose: <span style="color: #ae81ff;">true</span> }],</span></div><div><span style="font-size: x-small;"> [</span></div><div><span style="font-size: x-small;"> <span style="color: #e6db74;">"module-resolver"</span>,</span></div><div><span style="font-size: x-small;"> {</span></div><div><span style="font-size: x-small;"> alias: {</span></div><div><span style="font-size: x-small;"> <span style="color: #e6db74;">"~"</span>: <span style="color: #e6db74;">"./src"</span>,</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> ],</span></div><div><span style="font-size: x-small;"> ],</span></div><div><span style="font-size: x-small;"> <span style="color: #a6e22e;">loaderOptions</span>: (<span style="color: #fd971f; font-style: italic;">babelLoaderOptions</span>) <span style="color: #66d9ef; font-style: italic;">=></span> <span style="color: #fd971f; font-style: italic;">babelLoaderOptions</span>,</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> jest: {</span></div><div><span style="font-size: x-small;"> configure: { coverageProvider: <span style="color: #e6db74;">"v8"</span> },</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> webpack: {</span></div><div><span style="font-size: x-small;"> loaders: [{ test:<span style="color: #e6db74;"> /</span><span style="color: #ae81ff;">\.</span><span style="color: #e6db74;">tsx</span><span style="color: #f92672;">?$</span><span style="color: #e6db74;">/</span>, loader: <span style="color: #e6db74;">"ts-loader"</span> }],</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;">};</span></div></div></div><div><span style="font-size: x-small;"><br /></span></div><span style="font-size: x-small;"><br /></span><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MeVObcCzr8UhZLR7bKr5GjBBljuaYdbzV9tCn5gbWjjOWMtX1vR4hur2GLX5lUmiJgwRMGVLWY7rct69IhBs6e1MPTGAILU3rm-_ScW5EgotdZaov-t_s2kjEJHTmT3HUkOjzk4sscXm/s1920/Screenshot+from+2021-07-30+15-10-42.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MeVObcCzr8UhZLR7bKr5GjBBljuaYdbzV9tCn5gbWjjOWMtX1vR4hur2GLX5lUmiJgwRMGVLWY7rct69IhBs6e1MPTGAILU3rm-_ScW5EgotdZaov-t_s2kjEJHTmT3HUkOjzk4sscXm/w640-h360-rw/Screenshot+from+2021-07-30+15-10-42.png" width="640" /></span></a></div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: x-small;"><br /></span></div></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;">create a file called <b>tsconfig_extends.json</b> in root direcotry of project with the following configuration.</span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Courier New", "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; line-height: 27px; white-space: pre;"><div><span style="font-size: x-small;">{</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"compilerOptions"</span>: {</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"target"</span>: <span style="color: #cfcfc2;">"es5"</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"lib"</span>: [<span style="color: #cfcfc2;">"dom"</span>, <span style="color: #cfcfc2;">"dom.iterable"</span>, <span style="color: #cfcfc2;">"esnext"</span>],</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"allowJs"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"paths"</span>: {</span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"skipLibCheck"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"esModuleInterop"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"allowSyntheticDefaultImports"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"strict"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"forceConsistentCasingInFileNames"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"noFallthroughCasesInSwitch"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"module"</span>: <span style="color: #cfcfc2;">"esnext"</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"moduleResolution"</span>: <span style="color: #cfcfc2;">"node"</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"resolveJsonModule"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"isolatedModules"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"noEmit"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"baseUrl"</span>: <span style="color: #cfcfc2;">"."</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"jsx"</span>: <span style="color: #cfcfc2;">"react-jsx"</span></span></div><div><span style="font-size: x-small;"> },</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"exclude"</span>: [<span style="color: #cfcfc2;">"build"</span>, <span style="color: #cfcfc2;">"scripts"</span>, <span style="color: #cfcfc2;">"acceptance-tests"</span>, <span style="color: #cfcfc2;">"webpack"</span>],</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"include"</span>: [<span style="color: #cfcfc2;">"src"</span>],</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"ts-node"</span>: {</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"pretty"</span>: <span style="color: #ae81ff;">true</span>,</span></div><div><span style="font-size: x-small;"> <span style="color: #66d9ef; font-style: italic;">"transpileOnly"</span>: <span style="color: #ae81ff;">true</span></span></div><div><span style="font-size: x-small;"> }</span></div><div><span style="font-size: x-small;">}</span></div></div></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyFXSKxcIZaCZfcepoXLR9fI07fkeEI0FycZePTFIsh5sIO7EZffv3QOZ-Yh9FlvgjLUQcOETncmQ2_3Q7DlkXnwTurcsl2MpPU-EXuLZJEGh_aHXDr0XvSqg4iHW7Zi7TyNFK8dEuI2D/s1920/Screenshot+from+2021-07-30+15-17-07.png" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: x-small;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyFXSKxcIZaCZfcepoXLR9fI07fkeEI0FycZePTFIsh5sIO7EZffv3QOZ-Yh9FlvgjLUQcOETncmQ2_3Q7DlkXnwTurcsl2MpPU-EXuLZJEGh_aHXDr0XvSqg4iHW7Zi7TyNFK8dEuI2D/w640-h360-rw/Screenshot+from+2021-07-30+15-17-07.png" width="640" /></span></a></div><span style="font-size: x-small;"><br /></span><div class="separator" style="clear: both; text-align: left;">add the tsconfig_extends path to the tsconfig file as follows.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71n3OKzWP3c2o4I9i3PAxsEwPrZU_MEhcypy9PuB8f8z-zclHB5JKWlp5kEtsJ2IFBJVfwONktHxxeEtoPATfPZ2PdrXdhCcMN8ZbPOasO7ILbjhGBlzxFEt2N4UtiRa8Of8UoF14G2W4/s1920/Screenshot+from+2021-07-30+15-18-33.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71n3OKzWP3c2o4I9i3PAxsEwPrZU_MEhcypy9PuB8f8z-zclHB5JKWlp5kEtsJ2IFBJVfwONktHxxeEtoPATfPZ2PdrXdhCcMN8ZbPOasO7ILbjhGBlzxFEt2N4UtiRa8Of8UoF14G2W4/w640-h360-rw/Screenshot+from+2021-07-30+15-18-33.png" width="640" /></a></div><br /><h2 style="clear: both; text-align: left;">Step 4 : </h2><div>    add the craco configuration file path to react strating script inside package.json </div><div><br /></div><div style="text-align: center;"><span>    </span><span>    <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span></span><span face="ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" style="background-color: #0d1117; color: #a5d6ff; font-size: 12px; white-space: pre;">craco start --config config/craco.config.js</span></div><div style="text-align: center;"><span face="ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" style="background-color: #0d1117; color: #a5d6ff; font-size: 12px; white-space: pre;"><br /></span></div><div style="text-align: center;"><span face="ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace" style="background-color: #0d1117; color: #a5d6ff; font-size: 12px; white-space: pre;"><br /></span></div><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vBz2M1_Lrc5W5YShliRim_RyirKtFytngefAbLwVlSkbjQ6HrtbsFcG6qDpa8RL6yLzAD4KbD0GsXQh0dDnG-Li8ZvtR9YlsCy9pFWV6dsP2m3ksdrr_TA7Xti-BmlTpnh8bPv5_-k_W/s1920/Screenshot+from+2021-07-30+15-22-12.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vBz2M1_Lrc5W5YShliRim_RyirKtFytngefAbLwVlSkbjQ6HrtbsFcG6qDpa8RL6yLzAD4KbD0GsXQh0dDnG-Li8ZvtR9YlsCy9pFWV6dsP2m3ksdrr_TA7Xti-BmlTpnh8bPv5_-k_W/w640-h360-rw/Screenshot+from+2021-07-30+15-22-12.png" width="640" /></a></div></div><div style="text-align: center;"><br /></div><div style="text-align: left;">now exerything is setup all the remaining part is adding installing dependencies and start working with the paths.</div><h2 style="text-align: left;"><b>Step 5 : </b></h2><div style="text-align: left;">    install the following dependencies with one command using yarn add a <b>dependency</b>.</div><div style="text-align: left;"><span><br /></span></div><div style="text-align: left;"><span>    -</span>@babel/preset-typescript</div><div style="text-align: left;"> <span>   </span>- @babel/plugin-proposal-object-rest-spread</div><div style="text-align: left;">    - @babel/plugin-transform-spread </div><div style="text-align: left;">     - @babel/plugin-proposal-export-default-from </div><div style="text-align: left;">     - @babel/plugin-proposal-decorators </div><div style="text-align: left;">    - @babel/plugin-proposal-class-properties </div><div style="text-align: left;">    - module-resolver </div><div style="text-align: left;">     -  babel-module-resolver  </div><div style="text-align: left;">     - craco</div><div style="text-align: left;">after installing all the dependencies now. we can add paths to the craco config file and tsconfig_extend file to make the imports cleaner.</div><h3 style="text-align: center;">tsconfig_extend file</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh472rUPkndaxE1Fzfwn-xu_JzjY6fovhrRcgEY2mr9ZuOXsS8VbMbW9dso4QqnNVl-UAm6mua-EM7FG6mFHoTED7ahtaKZRcGNcfKp2VAv06ymNK7YlgefihyphenhyphenLmZHdTxuvtRadsvIorLKa/s1920/Screenshot+from+2021-07-30+15-39-45.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh472rUPkndaxE1Fzfwn-xu_JzjY6fovhrRcgEY2mr9ZuOXsS8VbMbW9dso4QqnNVl-UAm6mua-EM7FG6mFHoTED7ahtaKZRcGNcfKp2VAv06ymNK7YlgefihyphenhyphenLmZHdTxuvtRadsvIorLKa/w640-h360-rw/Screenshot+from+2021-07-30+15-39-45.png" width="640" /></a></div><div style="text-align: left;"><h3 style="text-align: center;">craco file</h3><h3 style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPHlc0m73HSYXm0lzTZnEMm1SU0HTST8rnrx43R5QdafZFAaE8DHtnRd6iRU1QSQROjnOy09TNz_BhguE5sm-VjoAbpK5d-bySqSRXieq0Jarx7e7vzD4JCyUa4HoDA_B-Da3MV9V1h5U3/s1920/Screenshot+from+2021-07-30+15-41-00.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPHlc0m73HSYXm0lzTZnEMm1SU0HTST8rnrx43R5QdafZFAaE8DHtnRd6iRU1QSQROjnOy09TNz_BhguE5sm-VjoAbpK5d-bySqSRXieq0Jarx7e7vzD4JCyUa4HoDA_B-Da3MV9V1h5U3/w640-h360-rw/Screenshot+from+2021-07-30+15-41-00.png" width="640" /></a></div></h3><h3 style="text-align: center;"><br /></h3>index.ts file<div>add an index.ts file inside components and export all components using the following code.</div><h3 style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJs5NJwACQkceeLBd53IVBE7aFajuOypxf_tkDnMQpEZNcXhahUdkXrA6MLgIpE7tAwD8uBjm-o-WJjq5kUIDKItImP9Oy-ANTyN9WLy4ZtNesNHyxZacpReIxpT4dwxyEOyre4C2n7OVR/s1920/Screenshot+from+2021-07-30+15-43-07.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJs5NJwACQkceeLBd53IVBE7aFajuOypxf_tkDnMQpEZNcXhahUdkXrA6MLgIpE7tAwD8uBjm-o-WJjq5kUIDKItImP9Oy-ANTyN9WLy4ZtNesNHyxZacpReIxpT4dwxyEOyre4C2n7OVR/w640-h360-rw/Screenshot+from+2021-07-30+15-43-07.png" width="640" /></a></div></h3><div>now we can import componentA using the following command.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8v6nAO1SDIWPt4Zi1SDE7ahYAZlfwBRx7tVwQDFJm2fXbzYdOMjY7w8mdjC6IGXYJt0Qxe-m_DiQ3gtWy3NTuozSmShmleYGZsUPLzvsV8EZ67wQB1oi7bNr3Cg-zVPZYzcO05SQNVYnW/s1920/Screenshot+from+2021-07-30+15-44-36.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8v6nAO1SDIWPt4Zi1SDE7ahYAZlfwBRx7tVwQDFJm2fXbzYdOMjY7w8mdjC6IGXYJt0Qxe-m_DiQ3gtWy3NTuozSmShmleYGZsUPLzvsV8EZ67wQB1oi7bNr3Cg-zVPZYzcO05SQNVYnW/w640-h360-rw/Screenshot+from+2021-07-30+15-44-36.png" width="640" /></a></div><br /><div><br /></div><div>Thank you for reading out. Do share it with fellow developers.</div></div>

How to setup babel module resolver in React with typescript ( Working Example )

  Craco Configuration Craco :     Craco stands for creating react app configuration override. It's a tool for configuring the create rea...

View Complete »

HTML Basics

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-mQ52oT9Z1Hm003W34I88fcnIBtkvvjIcomkfK1Pm9RHZuoW1AQQEuUwXASDL5tjxZEt_B5vuhi7WdfMh6h1Y-mIb3yl3PQ-w8woeWrq_VmDecht_LhQ3Hr5k5XdM889UFfvGC_sRk6P/s600/HTML+BASICS.png" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Basics" border="0" data-original-height="400" data-original-width="600" height="426" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-mQ52oT9Z1Hm003W34I88fcnIBtkvvjIcomkfK1Pm9RHZuoW1AQQEuUwXASDL5tjxZEt_B5vuhi7WdfMh6h1Y-mIb3yl3PQ-w8woeWrq_VmDecht_LhQ3Hr5k5XdM889UFfvGC_sRk6P/w640-h426-rw/HTML+BASICS.png" title="HTML" width="640" /></a></div><div><br /></div><div><br /></div><div><br /></div><h2 style="text-align: left;"><span style="font-weight: normal;"><u>HTML</u> :</span></h2><div><span style="font-weight: normal;"><span> HTML means HyperText Markup Language. It is used to create the markup for the websites. Most of the websites are structured using HTML. Then content can be structured using different kinds of elements in the websites. The elements can be wrapped inside and nested to make a perfect structure for the content of the website. The simple structure of the website looks like this :</span><br /></span></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><br /></div><div><!<span style="color: #f92672;">DOCTYPE</span> <span style="color: #a6e22e;">html</span>></div><div><<span style="color: #f92672;">html</span> <span style="color: #a6e22e;">lang</span>=<span style="color: #e6db74;">"en"</span>></div><div><<span style="color: #f92672;">head</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">charset</span>=<span style="color: #e6db74;">"UTF-8"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">http-equiv</span>=<span style="color: #e6db74;">"X-UA-Compatible"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"IE=edge"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">name</span>=<span style="color: #e6db74;">"viewport"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"width=device-width, initial-scale=1.0"</span>></div><div>  <<span style="color: #f92672;">title</span>>Document</<span style="color: #f92672;">title</span>></div><div></<span style="color: #f92672;">head</span>></div><div><<span style="color: #f92672;">body</span>>  </div><div></<span style="color: #f92672;">body</span>></div><div></<span style="color: #f92672;">html</span>></div><div><br /></div></div></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><span style="font-weight: normal;"><span>Don't overwhelm yourself. you will understand it as you go. most of the developers don't understand the basic structure as it is created by most extensions with a single character like emmet "!". By writing a single exclamation mark in VSCode and pressing enter. you will get this boilerplate code ready for you.</span></span></div><div><span style="font-weight: normal;"><span><br /></span></span></div><div><span style="font-weight: normal;"><span>The important tags here are :</span></span></div><div><ul style="text-align: left;"><li><span style="font-weight: normal;"><span>head</span></span></li><li><span style="font-weight: normal;"><span>title</span></span></li><li><span style="font-weight: normal;"><span>body</span></span></li></ul>head tag contains a title tag that displays the title of the website in the web browser tab just like this :</div><div><div class="separator" style="clear: both; text-align: center;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXA6_ZKY-EI_o3jcRx1B8-XlMr-BjSPE7HMHvDQYmcLbBxOy-jZe3O-8yNT3nvz_rf6hIu_Z2IcEnw6WtTKzOsEceGRWDAhkgT4AVBNR-dgXBSHVoEZy5ZVSZMUOEbjMiS3FWHF-aJ0PH/s574/Capture.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="html title tag" border="0" data-original-height="54" data-original-width="574" height="30" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXA6_ZKY-EI_o3jcRx1B8-XlMr-BjSPE7HMHvDQYmcLbBxOy-jZe3O-8yNT3nvz_rf6hIu_Z2IcEnw6WtTKzOsEceGRWDAhkgT4AVBNR-dgXBSHVoEZy5ZVSZMUOEbjMiS3FWHF-aJ0PH/w320-h30-rw/Capture.PNG" title="title" width="320" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div>head also contains links and other third-party APIs which we will explain in a later article.</div><div><br /></div><div>The body contains all the markup and content for the website. It is the most important tag in HTML as it represents all the structured content inside a website <br /><br /></div><h2 style="text-align: left;">HTML Elements :</h2><div> <span>    HTML elements are the building block of any website. These elements serve as a basic foundational structure for any website. HTML elements are of two types (i) self-closing tags (ii) normal tags.</span></div><div>self-closing tags do not require an ending tag e.g. <input type="text " >, <img  src="image URL" > and many other tags. while the normal tags have an ending tag along with the content inside the tags.</div><div><br /></div><h3 style="text-align: left;">Nesting HTML Elements :</h3><div><span>    HTML elements are nested inside in order to create the structure of the website. e.g. the head title and the body tags are nested inside the HTML tag. </span></div><div><span><br /></span></div><div><b><span style="color: red;">NOTE</span>: Never forget </b>to<b> </b>close<b> </b>the tag with its ending tags as HTML is a markup language, it won't generate any errors rather it would <b>disturb the structure of your website.</b></div><div><span><b><br /></b></span></div><h3 style="text-align: left;"><span><b><u>Types of HTML Elements</u></b></span></h3><div><b><u><br /></u></b></div><div><b><span style="color: #999999;"><u>P tag</u></span> :  </b>p tag also known as paragraph tag is used to create paragraphs inside the website. It is a block-level element which means that it occupies the whole available width of the web page. </div><div><span>  </span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span style="color: #2b00fe;">  <p> this is a paragraph </p></span></span></div><div><span><span style="color: #2b00fe;"><br /></span></span></div><div><div><b><span style="color: #999999;"><u>a tag</u></span>:  </b>a tag also known as an anchor tag is used to create links inside the website. It is an inline-level element which means that it occupies the only available width occupied by the text inside the tag. This tag an attribute of href which points to the link on the text. </div><div>  </div><div>                      <span style="color: #2b00fe;"><a href="https://www.zonatsolutions.com/</span><span style="color: #2b00fe;">"> Zonat Solutions</a></span></div></div><div><span style="color: #2b00fe;"><br /></span></div><div>By clicking on the Zonat Solutions link. Users would be taken to this link <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>"https://www.zonatsolutions.com".  </div><div><u><b><span style="background-color: white;"><span style="color: #999999;"><br /></span></span></b></u></div><div><u><b><span style="background-color: white;"><span style="color: #999999;">h tag</span></span></b></u>:</div><div><span>    h tag also known as heading tag is used to create headings for the website. it has six different tags from h1 to h6. Where h1 is the most bolder and bigger in font and h6 is the least in size.</span><br /></div><div><span> </span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    <h1> this is a heading </h1></span><br /></span></div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>   </span><h2> this is a heading </h2></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    .</span></span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    .</span></span></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    .</span>    </span><span>    </span><span>    </span><span>    </span><span>   </span></div><div><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><h6> this is a heading </h6></div><div><u><b><span style="color: #999999;"><br /></span></b></u></div><div><u><b><span style="color: #999999;">br tag</span></b></u> : </div><div><span>    br tag also known as break-line tag is used to add a line break for proper formatting of the content. it is a self-closing tag.</span><br /></div><div><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><br /></span></div><div><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    <p> Website <br > Zonat Solutions </p></span><br /></span></span></div><div><span><span><span>It will result in :</span></span></span></div><div><span><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>   <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span> Website</span><br /></span></span></span></div><div><span><span><span><span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>Zonat Solutions.</span></span></span></span></span></div><div><span><span><span><span><b><u><span style="color: #999999;"><br /></span></u></b></span></span></span></span></div><div><span><span><span><span><b><u><span style="color: #999999;">hr tag</span></u></b> : </span></span></span></span></div><div><span><span><span><span><span>    </span>hr tag also known as horizontal-line tag is used to create a horizontal line for separating a section from other sections. it is a self-closing tag.</span></span></span></span></div><div><span><span><span><span><br /></span></span></span></span></div><div><span><span><span><u><b><span style="color: #999999;">img tag</span></b></u> :</span></span></span></div><div><span><span><span><span>    IMG tag is a self-explanatory tag that is used for images in HTML. It has an src attribute that requires the path of the image.</span></span></span></span></div>

HTML Basics

HTML :  HTML means HyperText Markup Language. It is used to create the markup for the websites. Most of the websites are structured using H...

View Complete »

How to check whether an HTML element is inline or block level element

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0BqIRvI6BUbCaEJku-UjkJQoDMq_9CKJUvYYT1Lz7sdv2E9FPiJuuJtxbqkRQAXCnNc-oLFUEncLaCsW7GNY3o4mL2O1EtMb8nSlquNtGsFNj29z2TJ_Qa8ZGl7VRpljw5hFxg1xTAR3/s600/Add+a+heading.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Inline or block level element" border="0" data-original-height="400" data-original-width="600" height="266" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0BqIRvI6BUbCaEJku-UjkJQoDMq_9CKJUvYYT1Lz7sdv2E9FPiJuuJtxbqkRQAXCnNc-oLFUEncLaCsW7GNY3o4mL2O1EtMb8nSlquNtGsFNj29z2TJ_Qa8ZGl7VRpljw5hFxg1xTAR3/w400-h266-rw/Add+a+heading.png" title="HTML inline or block-level element" width="400" /></a></div><h2 style="text-align: left;"><br /></h2><h2 style="text-align: left;">How to Check the element type </h2><p>you can check the element type by applying the border using CSS. if the border appears on the whole page. The element will be a block-level element and if the border wraps around the content of the element only. then the element will be an inline-level element</p><h3 style="text-align: left;"><u>example</u></h3><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><!<span style="color: #f92672;">DOCTYPE</span> <span style="color: #a6e22e;">html</span>></div><div><<span style="color: #f92672;">html</span> <span style="color: #a6e22e;">lang</span>=<span style="color: #e6db74;">"en"</span>></div><div><<span style="color: #f92672;">head</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">charset</span>=<span style="color: #e6db74;">"UTF-8"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">http-equiv</span>=<span style="color: #e6db74;">"X-UA-Compatible"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"IE=edge"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">name</span>=<span style="color: #e6db74;">"viewport"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"width=device-width, initial-scale=1.0"</span>></div><div>  <<span style="color: #f92672;">title</span>>Document</<span style="color: #f92672;">title</span>></div><div>  <<span style="color: #f92672;">style</span>></div><div>  <span style="color: #f92672;">p</span>{</div><div>    <span style="color: #66d9ef; font-style: italic;">border</span>: <span style="color: #ae81ff;">1</span><span style="color: #f92672;">px</span> <span style="color: #66d9ef;">solid</span> <span style="color: #66d9ef;">black</span>;</div><div>  }</div><div>  </<span style="color: #f92672;">style</span>></div><div></<span style="color: #f92672;">head</span>></div><div><<span style="color: #f92672;">body</span>></div><div>  <<span style="color: #f92672;">p</span>></div><div>  This is a paragraph</div><div>  </<span style="color: #f92672;">p</span>></div><br /><div></<span style="color: #f92672;">body</span>></div><div></<span style="color: #f92672;">html</span>></div></div></div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh13kKCpYtymyfw1lDMW7qq6yb6v6udv7ZHKofmNttAjp_qVDnLv762qryVOc0p3kM02JRdHvH0ylkXViMmgU9dwRsHjVTCBwvsGgFoyKjOXMz0lmZKInTZGBM09fL9H6KxQnQVuosB0Rh/s520/block.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="57" data-original-width="520" height="70" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh13kKCpYtymyfw1lDMW7qq6yb6v6udv7ZHKofmNttAjp_qVDnLv762qryVOc0p3kM02JRdHvH0ylkXViMmgU9dwRsHjVTCBwvsGgFoyKjOXMz0lmZKInTZGBM09fL9H6KxQnQVuosB0Rh/w640-h70-rw/block.PNG" width="640" /></a></div><br /></div><div>In the above example, we have used a p tag. when we applied border on the p tag. the border covered all the page. so which shows that it is a block-level element.</div><h3 style="text-align: left;"><br /></h3><h3 style="text-align: left;"><u>example</u> </h3><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><!<span style="color: #f92672;">DOCTYPE</span> <span style="color: #a6e22e;">html</span>></div><div><<span style="color: #f92672;">html</span> <span style="color: #a6e22e;">lang</span>=<span style="color: #e6db74;">"en"</span>></div><div><<span style="color: #f92672;">head</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">charset</span>=<span style="color: #e6db74;">"UTF-8"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">http-equiv</span>=<span style="color: #e6db74;">"X-UA-Compatible"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"IE=edge"</span>></div><div>  <<span style="color: #f92672;">meta</span> <span style="color: #a6e22e;">name</span>=<span style="color: #e6db74;">"viewport"</span> <span style="color: #a6e22e;">content</span>=<span style="color: #e6db74;">"width=device-width, initial-scale=1.0"</span>></div><div>  <<span style="color: #f92672;">title</span>>Document</<span style="color: #f92672;">title</span>></div><div>  <<span style="color: #f92672;">style</span>></div><div>  <span style="color: #f92672;">span</span>{</div><div>    <span style="color: #66d9ef; font-style: italic;">border</span>: <span style="color: #ae81ff;">1</span><span style="color: #f92672;">px</span> <span style="color: #66d9ef;">solid</span> <span style="color: #66d9ef;">black</span>;</div><div>  }</div><div>  </<span style="color: #f92672;">style</span>></div><div></<span style="color: #f92672;">head</span>></div><div><<span style="color: #f92672;">body</span>></div><div>  <<span style="color: #f92672;">span</span>></div><div>  This is a span</div><div>  </<span style="color: #f92672;">span</span>></div><br /><div></<span style="color: #f92672;">body</span>></div><div></<span style="color: #f92672;">html</span>></div></div></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFqcm2-CXCdhXKkE9sSiSUnefRK6csfN-C4L_edTro9eWuE-wZi6E5zPvNi8o8jBrUDT-bopVZL5OoGjyG5eJuIbxVWoISMnCi4jjD_BaceM92YLE3IcXWPTzroujs3_Q9bunhsHSonGy/s182/inline.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="53" data-original-width="182" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFqcm2-CXCdhXKkE9sSiSUnefRK6csfN-C4L_edTro9eWuE-wZi6E5zPvNi8o8jBrUDT-bopVZL5OoGjyG5eJuIbxVWoISMnCi4jjD_BaceM92YLE3IcXWPTzroujs3_Q9bunhsHSonGy/s0-rw/inline.PNG" /></a></div><br /><div><br /></div><div>In the above example. we have used a span element and applied a border on it. The border covered the content part of the element which shoes that is an inline-level element</div><div><br /></div><div><br /></div><div><br /></div><br />

How to check whether an HTML element is inline or block level element

How to Check the element type  you can check the element type by applying the border using CSS. if the border appears on the whole page. The...

View Complete »