<p>React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div's. It is a Super fast and light react npm package for Zooming, Panning and Pinching html elements in easy way.</p><h2>Features</h2><ul><li><strong>Fast and easy to use</strong></li><li><strong>Light, without external dependencies</strong></li><li><strong>Mobile gestures, touchpad gestures and desktop mouse events support</strong></li><li><strong>Powerful context usage, which gives you a lot of freedom</strong></li><li><strong>Highly customizable</strong></li><li><strong>Animations and many options</strong></li></ul><p><a href="https://prc5.github.io/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank" style="color: rgb(255, 255, 250);">Demo</a></p><p><a href="https://github.com/prc5/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank">Github</a></p><h2>Install</h2><pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-zoom-pan-pinch
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false">yarn add react-zoom-pan-pinch
</pre><h2>Usage</h2><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      <span class="hljs-tag">&lt;<span class="hljs-name">TransformWrapper</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">TransformWrapper</span>&gt;</span>
    );
  }
}
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      &lt;<span class="hljs-title class_">TransformWrapperdefaultScale</span>={<span class="hljs-number">1</span>}defaultPositionX={<span class="hljs-number">200</span>}defaultPositionY={<span class="hljs-number">100</span>}
      &gt;
        {<span class="hljs-function">(<span class="hljs-params">{ zoomIn, zoomOut, resetTransform, ...rest }</span>) =&gt;</span> (
          <span class="hljs-tag">&lt;<span class="hljs-name">React.Fragment</span>&gt;&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"tools"</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomIn}</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomOut}</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{resetTransform}</span>&gt;</span>x<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;/<span class="hljs-name">div</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;<span class="hljs-name">div</span>&gt;</span>Example text<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">React.Fragment</span>&gt;</span>
        )}
      &lt;/<span class="hljs-title class_">TransformWrapper</span>&gt;
    );
  }
}
</pre><h2>Props of TransformWrapper</h2><p>PropsDefaultTypescale1numberpositionXautonumberpositionYautonumberdefaultPositionXnullnumberdefaultPositionYnullnumberdefaultScalenullnumberoptions{...}objectwheel{...}objectpan{...}objectpinch{...}objectzoomIn{...}objectzoomOut{...}objectdoubleClick{...}objectreset{...}objectscalePadding{...}objectonWheelStartnullFunctiononWheelnullFunctiononWheelStopnullFunctiononPanningStartnullFunctiononPanningnullFunctiononPanningStopnullFunctiononPinchingStartnullFunctiononPinchingnullFunctiononPinchingStopnullFunctiononZoomChangenullFunctionenablePaddingtrueBooleanenablePanPaddingtrueBoolean</p><h4>Options prop elements</h4><p>PropsDefaultTypedisabledfalsebooleantransformEnabledtruebooleanminPositionXnullnull, numbermaxPositionXnullnull, numberminPositionYnullnull, numbermaxPositionYnullnull, numberminScale1numbermaxScale8numberlimitToBoundstruebooleanlimitToWrapperfalsebooleancenterContenttrueboolean</p><h4>scalePadding prop elements</h4><p>PropsDefaultTypedisabledfalsebooleansize0.45numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Wheel prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep6.5numberwheelEnabledtruebooleantouchPadEnabledtruebooleanlimitsOnWheeltrueboolean</p><h4>Pan prop elements</h4><p>PropsDefaultTypedisabledfalsebooleandisableOnTarget[]array of class names or node tags (div,span...)lockAxisXfalsebooleanlockAxisYfalsebooleanvelocityfalsebooleanvelocityEqualToMovefalsebooleanvelocitySensitivity1numbervelocityMinSpeed1.2numbervelocityBaseTime1800numbervelocityAnimationTypeeaseOutstringpaddingtruebooleanpaddingSize40numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Pinch prop elements</h4><p>PropsDefaultTypedisabledfalseboolean</p><h4>zoomIn prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>zoomOut prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>doubleClick prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstringmodezoomInzoomIn / zoomOut / reset</p><h4>reset prop elements</h4><p>PropsDefaultTypedisabledfalsebooleananimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>Animations types</h4><p>ValueeaseOutlineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuint</p><h4>Double click modes</h4><p>ValuezoomInzoomOutreset</p><h2>Values returned from TransformWrapper component</h2><p>ValueDescriptionTypesetScale(scale, animationTime, animationType)Sets scaleNumbersetPositionX(positionX, animationTime, animationType)Sets position xNumbersetPositionY(positionY, animationTime, animationType)Sets position yNumberzoomIn()Zooming in function, used for controls button---zoomOut()Zooming out function, used for controls button---setTransform(positionX, positionY, scale, animationTime, animationType)Sets transformations of contentNumber or nullresetTransform()Reset transformations to the initial valuesNumber</p><h2>License</h2><p>MIT ©&nbsp;<a href="https://github.com/prc5" rel="noopener noreferrer" target="_blank">prc5</a></p><p>That's it. Feel free to leave a comment.</p>

React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div's. It is a Super fast and light react npm package...

React library to implement Zoom, Pan, Pinch on HTML Elements - TCMHACK

React library to implement Zoom, Pan, Pinch on HTML Elements

<p>In this example we will show how to implement the component scrolling via mouse drag &amp; drop like Google Map, Google Earth, Figma etc.</p>
<p>To implement the scrolling we will use the <code><a href="https://github.com/Norserium/react-indiana-drag-scroll" target="_blank" rel="noopener noreferrer">react-indiana-drag-scroll</a></code> library which is great library to Implement scroll on drag.</p>
<p>So let's get started.</p>
<h2>Demo</h2>
<p>Try it yourself! Go to&nbsp;<a href="https://norserium.github.io/react-indiana-drag-scroll/" target="_blank" rel="noopener noreferrer">demo website</a> / <a href="https://codesandbox.io/s/react-indiana-drag-scroll-default-iw9xh" target="_blank" rel="noopener noreferrer">sandbox</a></p>
<h2>Install</h2>
<pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-indiana-drag-scroll
</pre>
<p>or install via yarn</p>
<pre class="ql-syntax" spellcheck="false">yarn add react-indiana-drag-scroll
</pre>
<h2>Usage</h2>
<pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">ScrollContainer</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-indiana-drag-scroll'</span>;
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
    <span class="hljs-title function_">render</span> () {
        <span class="hljs-keyword">return</span> (
            <span class="hljs-tag">&lt;<span class="hljs-name">ScrollContainer</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"scroll-container"</span>&gt;</span>
                { ... }
            <span class="hljs-tag">&lt;/<span class="hljs-name">ScrollContainer</span>&gt;</span>
        )
    }
}
</pre>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Component properties</h2>
<a id="user-content-component-properties" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#component-properties" aria-label="Permalink: Component properties"></a></div>
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>vertical</td>
<td>Bool</td>
<td>Allow vertical drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>horizontal</td>
<td>Bool</td>
<td>Allow horizontal drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>hideScrollbars</td>
<td>Bool</td>
<td>Hide the scrollbars</td>
<td>true</td>
</tr>
<tr>
<td>activationDistance</td>
<td>Number</td>
<td>The distance that distinguish click and drag start</td>
<td>10</td>
</tr>
<tr>
<td>children</td>
<td>Node</td>
<td>The content of scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onScroll</td>
<td>Function</td>
<td>Invoked when user scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onEndScroll</td>
<td>Function</td>
<td>Invoked when user ends scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onStartScroll</td>
<td>Function</td>
<td>Invoked when user starts scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onClick</td>
<td>Function</td>
<td>Invoked when user clicks the scrolling container without dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>component</td>
<td>String</td>
<td>The component used for the root node.</td>
<td>'div'</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>The custom classname for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>draggingClassName</td>
<td>String</td>
<td>The classname for the container during dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>style</td>
<td>Number</td>
<td>The custom styles for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>innerRef</td>
<td>ElementType</td>
<td>The ref to the root node (experimental alternative to&nbsp;<code>getElement</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>ignoreElements</td>
<td>String</td>
<td>Selector for elements that should not trigger the scrolling behaviour (for example,&nbsp;<code>".modal, dialog"</code>&nbsp;or&nbsp;<code>"*[prevent-drag-scroll]"</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>nativeMobileScroll</td>
<td>Bool</td>
<td>Use native mobile drag scroll for mobile devices</td>
<td>true</td>
</tr>
<tr>
<td>buttons</td>
<td>Array</td>
<td>The list of mouse button numbers that will activate the scroll by drag</td>
<td>[0]</td>
</tr>
</tbody>
</table>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Static functions</h2>
<a id="user-content-static-functions" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#static-functions" aria-label="Permalink: Static functions"></a></div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>getElement</td>
<td>HTMLElement</td>
<td>Returns the HTML element</td>
</tr>
</tbody>
</table>
<h2>How to set the initial scroll?</h2>
<p>To set initial scroll you need get the ref to the root node of the&nbsp;<code>ScrollContainer</code>. It can be implemented by&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">using&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">innerRef</a></code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">property</a>&nbsp;or&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">the static function&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">getElement</a></code>. At the worst you can use the&nbsp;<code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-finddomnode-dvdop" target="_blank" rel="noopener noreferrer">ReactDOM.findDOMNode</a></code>&nbsp;method.</p>
<h2>License</h2>
<p>The source code is licensed under MIT, all images (except&nbsp;<a href="https://www.freepik.com/free-vector/ancient-egypt-hieroglyphics-background-with-flat-design_2754100.htm" target="_blank" rel="noopener noreferrer">hieroglyphs</a>) are copyrighted to their respective owner &copy;&nbsp;<a href="https://github.com/norserium" target="_blank" rel="noopener noreferrer">Norserium</a></p>
<p>That's it. Feel free to leave a comment below.</p>

Enhance your React applications by implementing intuitive mouse drag-and-drop scrolling. This article provides a comprehensive guide on creating reusable React components that enable users to scroll content effortlessly by clicking and dragging. Discover practical examples and best practices to elevate your project's user experience.

React component scrolling via Mouse Drag & Drop - TCMHACK

React component scrolling via Mouse Drag & Drop

<p>Many developers use <a href="https://github.com/facebook/create-react-app" target="_blank" rel="noreferrer noopener nofollow">create-react-app</a> to generate a boilerplate needed to quickly start developing a React application. It gives you the option to define Environment Variables is a special file named <code><strong>.env.</strong></code></p>

<p>All variables defined in this file are accessible in the code via <code><strong>process.env..</strong></code></p>

<h2>Define Environment Variable</h2>

<p>First, open the project and create <strong><code>.env</code></strong> file in the root directory:</p>
<p><img src="../../../../uploads/1744605242855-react-env-1.png" alt="" width="649" height="260"></p>

<p>To define Environment Variable, open the <strong>.env</strong> file and paste the following code:</p>

<pre class="wp-block-code"><code>MY_ENVIRONMENT_VARIABLE=test</code></pre>

<p>We have just defined our first variable, great.</p>

<p>Next, save the changes, close the file and navigate to <strong>App.js</strong> and read the variable:</p>

<pre class="wp-block-code"><code>const App = () =&gt; {
    console.log(process.env.MY_ENVIRONMENT_VARIABLE);
    return &lt;div className="App"&gt;Hello, world&lt;/div&gt;;
};</code></pre>

<p>Start the project: <code>NPM START</code></p>

<p>And note that <strong>undefined</strong> was output to the console:</p>
<p><img src="../../../../uploads/blogs/undefined-console-1024x106.png" alt="undefined console" width="1024" height="106"></p>

<p>Do you know why?</p>

<h2>Gotcha #1</h2>

<p>The first mistake we made is not reloading our app after defining an Environment Variable.</p>

<p>Remember that Environment Variables are embedded during build time.</p>

<p>Any change in the <strong>.env</strong> file requires an application to be reloaded.</p>

<p>Let's do this and try again:</p>
<p><img src="../../../../uploads/1744605424029-undefined-console-1-1024x106.png" alt="" width="1024" height="106"></p>

<p>Still no success, let's find out why.</p>

<h2>Gotcha #2</h2>

<p>The second thing to remember is that, for security reasons, create-react-app does not allow you to define Environment Variables that do not start with the <strong>REACT_APP_</strong> prefix.</p>

<p>Our variable name is definitely wrong and will not work.</p>

<p>Let's change it:</p>

<pre class="wp-block-code"><code>REACT_APP_MY_ENVIRONMENT_VARIABLE=test</code></pre>

<p>And in the <strong>App.js</strong>:</p>

<pre class="wp-block-code"><code>const App = () =&gt; {
    console.log(process.env.REACT_APP_MY_ENVIRONMENT_VARIABLE);
    return &lt;div className="App"&gt;Hello, world&lt;/div&gt;;
};

export default App;</code></pre>

<p>Reload an application and check the console:</p>
<p><img src="../../../../uploads/1744605467698-success-console-1024x104.png" alt="" width="1024" height="104"></p>

<p>Hooray, we got it to work.</p>

<h3>Summary</h3>

<p>The two most important things to remember when defining Environment Variables in a project bootstrapped with create-react-app are:</p>

<ul>
<li>Always reload your application after making a change to the <strong>.env</strong> file</li>
<li>Always prefix your variables with <strong>REACT_APP_</strong></li>
</ul>

<p>&nbsp;</p>

Many developers use create-react-app to generate a boilerplate needed to quickly start developing a React application. It gives you the option to...

Can't Read Environment Variables In React? - TCMHACK

Can't Read Environment Variables In React?

<h2>Prerequisites</h2>

<p>There are a few things you should know in advance before you start playing around with React.</p>

<p>Here are what I consider to be React prerequisites.</p>

<ul>
<li>Basic familiarity with HTML &amp; CSS.</li>
<li>Basic knowledge of JavaScript and programming.</li>
<li>Basic understanding of the <a href="https://www.w3schools.com/js/js_htmldom.asp" target="_blank" rel="noreferrer noopener" aria-label="DOM (opens in a new tab)">DOM</a>.</li>
<li>Familiarity with ES6 syntax and features.</li>
<li><a href="../../../../blog/how-to-install-and-manage-node-js-via-nvm/">Node.js and npm</a> installed globally.</li>
</ul>

<h2>Setup and Installation</h2>

<p><strong><em>npx create-react-app</em></strong> is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.</p>

<pre class="wp-block-code"><code>npx create-react-app react-app</code></pre>

<p>Here <strong><em>react-app</em></strong> is the folder name in which react config &amp; setup files will be created by react to run a react-app.</p>
<p>Go to newly created app and run the below command to run the app.</p>

<pre class="wp-block-code"><code>cd react-app
npm start</code></pre>

<p><strong><em>npm start</em></strong> will run your react app.</p>
<p>Now, Edit <strong><em>src/App.js</em></strong> and save to view the effect.</p>

<p><strong>Feel free to leave a comment for any questions and issues.</strong></p>

npx create-react-app is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.


There are a few things you should know in advance before you start playing around with React.



Here are what I consider to be ...

Getting Started with React 

<h2>What is React?</h2>

<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called &ldquo;components&rdquo;.</p>

<blockquote class="wp-block-quote">
<p>ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model &ndash; View &ndash; Controller).</p>
</blockquote>

<p>ReactJS was developed by Jordan Walke, a software engineer working at Facebook. Facebook implemented ReactJS in 2011 in its newsfeed section, but it was released to the public in May 2013. After the implementation of ReactJS, Facebook&rsquo;s UI underwent drastic improvement. This resulted in satisfied users and a sudden boost in its popularity.</p>

<h2>Why it is used?</h2>

<p>In ReactJS, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks components are integrated together to build one bigger and dynamic application.</p>

<p>The biggest advantage of using components is that you can change any component at any point in time without affecting the rest of the applications. This feature is most effective when implemented with larger and real-time applications where data changes frequently. Each time any data is added or updated, ReactJS automatically updates the specific component whose state has actually changed. This saves the browser from the task of reloading the whole application to reflect the changes.</p>

<h2>Features Of React</h2>

<p>Now that you have understood what is React and why it is used, lets now uncover few of its intriguing features.</p>

<h3>1. <strong>JSX</strong></h3>

<p>JSX stands for JavaScript XML. Its an XML/ HTML like syntax used by React. It extends the ECMAScript so that XML/ HTML like text can co-exist along with JavaScript react code. This syntax is used by the pre-processors like <em>Babel</em> to transform HTML like text found in JavaScript files into standard JavaScript objects. With JSX, we can go a step further by again embedding the HTML code inside the JavaScript. This makes HTML codes easy to understand and boosts JavaScript&rsquo;s performance while making our application robust.</p>
<p>Let&rsquo;s see how to write Hello World Program using JSX.</p>

<pre class="wp-block-code"><code>const MyComponent = React.createClass({
    render: function () {
        return(    
            &lt;h2&gt;Hello World&lt;/h2&gt;
        );
    }
});<br><br>ReactDOM.render(<br>    &lt;MyComponent/&gt;, document.getElementById('content')<br>);</code></pre>

<h3>2. <strong>Virtual DOM</strong></h3>

<p>Like an actual DOM, virtual DOM is also a node tree that lists the elements and their attributes and content as Objects and their properties. React&rsquo;s render function creates a node tree out of the React components. Then, it updates this tree in response to the mutations in data model caused by various actions done either by the user or by the system.</p>

<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p><strong>This <em>Virtual DOM</em> works in three simple steps.</strong></p>
<ol>
<li>Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.</li>
<li>Then the difference between the previous DOM representation and the new one is calculated.</li>
<li>Once the calculations are done, the real DOM will be updated with only the things that have actually changed.</li>
</ol>
</div>
</div>

<p>You can think of it as a patch. As patches are applied only to the affected area, similarly, the virtual DOM acts as patches and are applied to the elements which are updated or changed, in the real DOM.</p>
<p>This makes our application faster and there is no memory wastage.</p>

<h3>3. Testability</h3>

<p>React views can be used as functions of the state (state is an object which determines how a component will render and behave). Thus, we can easily manipulate with state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug.</p>

<h3>4. Server-Side Rendering(SSR)</h3>

<p>Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. With SSR, the server&rsquo;s response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript, creating the virtual DOM, linking events, etc. at the back end.</p>
<h3>5. One-Way Data Binding</h3>

<p>Unlike other frameworks, ReactJS follows unidirectional data flow or one-way data binding. The major advantage of One-Way-Data binding is that throughout the application the data flows in a single direction which gives you better control over it. Because of this, application&rsquo;s state is contained in specific stores and as a result, rest of the components remains loosely coupled. This makes our application more flexible leading to increased efficiency.</p>
<h3>6. Simplicity</h3>

<p>Use of JSX files makes the application really simple and easy to code as well as understand. Even though we can use plain JavaScript here, using JSX is easier. React&rsquo;s component-based approach along with distinct lifecycle methods also make it simple to learn.</p>

<h3>7. Learning Curve</h3>

<p>Learning curve of React is quite low as compared to other frameworks. Anyone having even basic knowledge of programming can easily learn React. So, if you have previous knowledge of HTML and JavaScript you can get your hands on it very quickly.</p>

<p>This brings us to the end of this blog on what is React. Hope I was able to clearly explain what is React and why you should use it.</p>

<p><strong>Please feel free to comment your questions. Thanks</strong></p>

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UI...

Introduction to React

<p>Today we're going to deploy a website to the google firebase. Google firebase is free &amp; easy to use. Google firebase provides the free hosting upto 1GB space, if you need more there are some plans provided by firebase. You can use as per your requirements.</p>

<p>Before starting, I assume you already have a google firebase account and a website ready to be host.</p>

<p>let's start hosting a website to google firebase.</p>

<h3>1. Create a Build</h3>

<p>Open cmd prompt in your website folder and run the below command</p>

<pre class="wp-block-code"><code>npm run build</code></pre>

<p>It will create a <strong>build</strong> folder which contains all the website data ready to be host. All website data means html, js, css, images files.</p>
<p><img src="../../../../uploads/1744736389804-create-build-1024x516.png" alt="" width="1024" height="516"></p>

<h3>2. Create Project in Firebase</h3>

<p>Login to your Firebase Console &amp; add a new project. If you have already created a project, just choose that.</p>
<p><img src="../../../../uploads/1744736425550-add-new-project-in-firebase-1024x470.png" alt="" width="1024" height="470"></p>

<h3>3. Open Hosting Page</h3>

<p>You can find a <strong>Hosting</strong> link in the left side menu. Click on it and open the hosting page.</p>
<p><img src="../../../../uploads/1744736456047-here.png" alt="" width="960" height="439"></p>

<h3>4. Set up firebase hosting.</h3>

<p>Open cmd in your project folder and install the Firebase CLI into website.</p>

<h4>1. Install Firebse CLI</h4>

<pre class="wp-block-code"><code>npm install -g firebase-tools</code></pre>

<h3><strong><img src="../../../../uploads/1744736520931-firebase-installation-1024x240.png" alt="" width="1024" height="240"></strong></h3>
<h4><strong>2.&nbsp;</strong>Initialize the Project</h4>

<p>Open a terminal window and navigate to or create a root directory for your web app</p>

<h5>A. Sign in to Google</h5>

<p>It will take you to Google Login page and log you in into the app.</p>

<pre class="wp-block-code"><code>firebase login</code></pre>

<h5>B. Initiate your project</h5>

<pre class="wp-block-code"><code>firebase init</code></pre>

<ul>
<li>Go to hosting by up-down arrow key</li>
<li>Select <strong>Hosting</strong> by clicking the <strong>space</strong> button on keyboard and hit <strong>Enter</strong></li>
<li>It will ask you to select the hosting folder, write <strong><em>build</em></strong></li>
<li>Next <em>Configure as a single-page app</em>, write <strong><em>Y</em></strong></li>
<li>Next <em>Overwrite the index.html, </em>write <strong><em>N</em></strong></li>
<li>Firebase initialisation is complete. Now, deploy the website in next step.</li>
</ul>
<p><img src="../../../../uploads/1744736581454-firebase-initialisation-1024x517.png" alt="" width="1024" height="517"></p>

<h4>3. Deploy to Firebase Hosting</h4>

<p>Run this command from your app&rsquo;s root directory:</p>

<pre class="wp-block-code"><code>firebase deploy</code></pre>

<h3><img src="../../../../uploads/1744736632941-firebase-deployemnt-1024x309.png" alt="" width="1024" height="309"></h3>
<h4>4. Open and run your website.</h4>

<p>After successful deployment, firebase will provide you a <strong>link</strong> and you can use it to see your live website in action.</p>

<p>This link will be a subdomain of google domains. It will be look like <strong>your-project-id.web.app</strong></p>

<p>If you want to add your custom domain to this website, you can follow the link <a href="../../../../blog/google-firebase-custom-domain-subdomain-mapping-with-godaddy">Map custom domain to firebase hosting.</a></p>

<p>Have any questions? Write into the comment section.</p>

Today we're going to deploy a website to the google firebase. Google firebase is free &amp; easy to use. Google firebase provides the free hostin...

How to deploy websites to Google Firebase - TCMHACK

How to deploy websites to Google Firebase

<p>This article introduces an experimental Vue feature called Hooks.</p>

<h2>Before you start</h2>

<p>This post is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.</p>

<p>You will need the following in your pc:</p>

<ul>
<li><a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener">Node.js version 10.x</a>&nbsp;and above installed. You can verify if you do by running the command below in your terminal/command prompt:</li>
</ul>

<pre class="wp-block-preformatted">node -v</pre>

<ul>
<li>A code editor: Visual Studio Code is highly recommended</li>
<li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue&rsquo;s latest version</a>, installed globally on your machine</li>
<li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue CLI 3.0</a>&nbsp;installed on your machine. To do this, uninstall the old CLI version first:</li>
</ul>

<pre class="wp-block-preformatted">npm uninstall -g vue-cli</pre>

<p>then install the new one:</p>

<pre class="wp-block-preformatted">npm install -g @vue/cli</pre>

<ul>
<li>Download a Vue starter project&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">here</a></li>
<li>Unzip the downloaded project</li>
<li>Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:</li>
</ul>

<pre class="wp-block-preformatted">npm install</pre>

<h2>Introduction: Hooks</h2>

<p>Initially, React components that contain state logic must be a class component. Even though there were already stateless functional components in React there was a need to create components that accommodate state logic without being classes. That was when Hooks was born. Hooks are a way to use state logic inside functional components, thereby eliminating the need for writing classes.</p>

<h2>What is wrong with classes?</h2>

<p>There is nothing wrong with classes, to begin with, but the React team found out that&nbsp;<a href="https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines" target="_blank" rel="noreferrer noopener">understanding how classes work has been a drawback to React adoption</a>. It can be difficult to understand and can become ambiguous as your project increases in size and complexity.</p>

<h3>But I don&rsquo;t normally use classes in Vue JS..</h3>

<p>If you are a Vue developer, you might wonder why classes are being discussed as you do not use classes by default in your Vue projects. While this is true, Vue JS lets you use functional components that are stateless with&nbsp;<a href="https://vuejs.org/v2/guide/mixins.html" target="_blank" rel="noreferrer noopener">mixins</a>. With Vue mixins you can define logic or a functionality in a particular file and use and even re-use it in a functional component.</p>

<h2>The problem with mixins</h2>

<p>In a&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">blog post</a>, some months back,&nbsp;<a href="https://twitter.com/sarah_edo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Sarah Drasner</a>&nbsp;a very popular Vue core team member wrote about her conversation with&nbsp;<a href="https://twitter.com/youyuxi?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Evan You</a>&nbsp;the creator of Vue JS. Sarah revealed that a mixin cannot consume or use state from another mixin, which makes chaining of encapsulated logic difficult to achieve. This is the mixin limitation that the Vue Hooks solves for.</p>

<h2>Introducing Vue Hooks</h2>

<p>Vue Hooks are basically an enhanced version of mixins, if you do not know what mixins are, they are a platform in Vue used to re-use logic between components (you will see a quick demo of mixins in this post). Vue Hooks lets you pass logic from one Hook to another and you can also use state in a Hook from another Hook. So just like in React, Hooks in Vue are defined in functions which can be a cleaner and more flexible way to define and share logic and can return state.</p>

<h2>Demo A: Vue mixins</h2>

<p>If you have followed this post from the start, you must have downloaded&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">the starter project file</a>&nbsp;and opened it up in your VS Code application. We are going to create a mixin that contains a counter logic and then import it into any component of choice. First, create a folder called mixins in the root directory and create a new file, call it&nbsp;<code>clickMixin.js</code>&nbsp;and copy the code block below inside it:</p>

<pre class="wp-block-preformatted">export default { 
    data (){
      return{
        count: 1,
        double: 2
      }
    },
    methods: {
      clicked(){
       this.count++; 
       this.double = this.count*2;
      }
    }
  }</pre>

<p>This mixin contains counter logic and also contains a variable that returns double the count, you see the export statement because it has to be imported into your component of choice. Open your&nbsp;<code>Test.vue</code>&nbsp;component and copy the code block below inside it:</p>

<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="clicked()"&gt;Button 1&lt;/button&gt;
    &lt;h2&gt;{{this.count}}&lt;/h2&gt;
    &lt;h2&gt;{{this.double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickMixin from '../Mixins/clickMixin'
export default {
  name: 'Test',
  mixins: [clickMixin]
}
&lt;/script&gt;</pre>

<p>Here you see how mixins are imported and registered under the name, it is a Vue instance property just like data or methods or computed properties. You also see that inside the template that you have access to this in JavaScript as it relates to the mixins (almost like the mixin was defined right inside the component). If you run the application in your dev server it should look like this:</p>

<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-453" src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/09/vuebutton1and2-1024x394.png" alt=""></figure>
</div>

<p>When you click button 1, the counter is increased by 1 and the lower figure is double the counter figure just as the template in your code suggests.</p>

<h2>Demo B: Vue Hooks</h2>

<p>You can recreate this logic with Vue Hooks easily, the point of the Hooks is to potentially replace mixins in the future. First of all, you have to install the vue-Hooks package with the node package manager. Open a new terminal in VS Code and run:</p>

<pre class="wp-block-preformatted">npm install vue-Hooks</pre>

<p>Then open up your&nbsp;<code>main.js</code>&nbsp;file and initialize Hooks with a line of command before the new Vue statement:</p>

<pre class="wp-block-preformatted">Vue.use(Hooks);</pre>

<p>Open the components folder and create a new file inside it, call it&nbsp;<code>Modal.vue</code>&nbsp;then navigate back to the root directory and create a new folder called Hooks. Inside the Hooks folder create a new file called&nbsp;<code>Hooks.js</code>&nbsp;and copy this code block below into it:</p>

<pre class="wp-block-preformatted">import { useData, useMounted, useEffect, useComputed, useUpdated} from 'vue-Hooks'
export default function clickedHook(){
const data = useData({ count:1 })
const double = useComputed(() =&gt; data.count * 2)
useMounted(()=&gt; {console.log('mounted')});
useUpdated(()=&gt; {console.log('updated')});
useEffect(()=&gt; {
     console.log('DOM re-renders....')
 });
return {
     data, double
   }
}</pre>

<p>Just like in React, Vue Hooks borrows the use-prefix syntax and uses it in the Vue way. You also notice that the lifecycle Hooks available for every Vue instance is accessible inside Vue Hooks, some of them are:</p>

<ul>
<li><code>useData</code>: handles initialization of data inside your Hook, so the count is initialized inside it</li>
<li><code>useComputed</code>: this is more like computed properties inside your Hook, so the double computation is done inside it</li>
<li><code>useMounted</code>: acts exactly like the mounted lifecycle Hook in your Vue instance but for Hooks</li>
<li><code>useUpdated</code>: acts exactly like the updated lifecycle Hook in your Vue instance but for Hooks</li>
<li><code>useEffect</code>: this handles logic on DOM re-render</li>
</ul>

<p>There are other properties you can import, the whole list can be found&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">here</a>&nbsp;on GitHub. You will notice it is exported as a function, open the&nbsp;<code>modal.vue</code>&nbsp;file you created earlier and copy this code block below inside it:</p>

<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="data.count++"&gt;Button 2&lt;/button&gt;
    &lt;h2&gt;{{data.count}}&lt;/h2&gt;
    &lt;h2&gt;{{double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickedHook from '../Hooks/Hooks'
export default {
  name: 'Modal',
  Hooks(){
    return clickedHook();
  }
}
&lt;/script&gt;</pre>

<p>Notice that after importing the Hooks file, you can access the data and the double constants earlier defined in the Hook inside this component. We also see that Hooks registration has the same syntax with data registration, with the function set up and the return object inside it.</p>

<h3><br>It is important to note that&hellip;</h3>

<ul>
<li>You can go ahead and use Vue Hooks right away (your Vue version must be 2.x)</li>
<li>There is&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/#article-header-id-5" target="_blank" rel="noreferrer noopener">speculation that Vue version 3.0 will ship with Vue</a>&nbsp;Hooks officially</li>
<li>It is experimental and so should not be used in production yet</li>
<li><a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">Read the Sarah Drasner blog post here</a>&nbsp;which contains even more examples too</li>
</ul>

<p>You can use npm or just go to&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener">GitHub with this link</a>&nbsp;to get the project repository.</p>

<h2>Conclusion</h2>

<p>This has been a quick overview of Hooks in Vue JS and how they might differ from the React Hooks that inspired it. We also highlighted mixins for readers who have not been introduced to the concept and we looked at an illustration using Hooks. Are you excited about Vue Hooks?</p>

This article introduces an experimental Vue feature called Hooks. This post is suited for developers of all stages includi...

Hooks are coming to Vue.js version 3.0 - TCMHACK

Hooks are coming to Vue.js version 3.0

<p>React's&nbsp;<code>useEffect</code>&nbsp;hooks combines&nbsp;<code>componentDidMount</code>,&nbsp;<code>componentDidUpdate</code>&nbsp;and&nbsp;<code>componentWillUnmount</code>&nbsp;lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple&nbsp;<code>useEffect</code>&nbsp;hooks to be called in a single component.</p>

<p>You can read more about the&nbsp;<code>useEffect</code>&nbsp;hook here:&nbsp;<a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">React docs</a></p>

<p>Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.</p>

<h2>componentDidMount eqivalent</h2>

<p>In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* ComponentDidMount code */
}, []);</code></pre>

<h2>componentDidUpdate eqivavlent</h2>

<p>In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case,&nbsp;<code>var1</code>&nbsp;and&nbsp;<code>var2</code>).</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* componentDidUpdate code */
}, [var1, var2]);</code></pre>

<h2>componentWillUnmount eqivavlent</h2>

<p>In order to have this hook run when the component is unmounted, we need to return a function from the hook. Dependency array doesn't affect this functionality.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<h2>All three combined</h2>

<pre class="wp-block-code"><code>useEffect(() =&gt; {

  /* componentWillMount code + componentDidUpdate code */

  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<p>Thank you for taking the time to read this post. If you've found this useful, please share and feel free to comment.</p>

Master React's useEffect hook with this cheat-sheet, showing how to replicate componentDidMount, componentDidUpdate, and componentWillUnmount behaviors with clean, concise code.

React: useEffect explained with lifecycle methods - TCMHACK

React: useEffect explained with lifecycle methods

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similar...