A Quick Intro to React.js
React is used to build websites that run entirely in the browser. The main thing in React.js is JSX. JSX is similar to HTML or XML. Language Full Form Use Tags HTML Hyper Text Markup Language Build websites Predefined set of tags like H1, H2, P etc. XML Extensible Markup Language Build data Custom Tags JSX JavaScript XML Write HTML mixed with JavaScript HTML Tags + Custom Tags Examples HTML This is heading 1 This is an example paragraph in HTML XML XML Example This is a note Example Data Example Data JSX function ExampleReactComponent() { return ( This is heading 1 This is an example paragraph in JSX ) } As you can see, HTML, XML and JSX are all very similar. JSX is writing HTML mixed with JavaScript. So it is called JSX - Javascript XML. The advantage of mixing HTML with Javascript is, we can make the HTML dynamic. For example toggle a class name, when a button is clicked. React Components React allows us to define own components that return JSX. A react component is just a regular JavaScript function that returns JSX. When a root React Component renders, it automatically converts JSX into HTML and adds it the webpage. With React you can create your own custom components (similar to custom tags) and include them in other React Components. Here is an example component that uses the above ExampleReactComponent. function RootReactComponent() { return ( This is the main Component ) } Props Similar to how HTML tags have attributes. React components have props. function PropsExample(props) { // Prints { exampleValue: "example-value" } console.log(props); return ( Props Example {props.exampleValue} ); } function MainComponent() { return ( This is the Main Component ); } When we render the MainComponent, it calls PropsExample component with props argument being { exampleValue: "example-value" }. As you might have noticed, displaying variables in JSX, is done using {}. Anything withing the braces is treated as javascript. State Usually we store data in variables. We use variables to display the stored data. In React, we use something called state to store data. state can be thought of as getter and setter for variables. The reason for using state to get and set data is when data is set using state setter, React understands that it needs to update the HTML for the component. For example, look at the below example that automatically updates the HTML when state is set. import { useState } from 'react'; function IncrementDecrement(){ // use value for getting the data // use setValue for setting the data // Intial value is set to 0 // React automatically re-renders whenever the setter is called // This array syntax is called array destructoring const [ value, setValue ] = useState(0); function increment(e){ setValue(value + 1); } function decrement(e){ setValue(value - 1); } return ( Increment Increment {value} ); } Writing React Apps With Vite Tools like Vite should be used to build React components and JSX into a javascript bundle that can be executed in the browser. Follow the instructions below to setup your first React.js project. # Run this in your project folder, which will generate the needed files npm create vite@latest my-react-app -- --template react # Once the project is setup cd my-react-app npm install npm run dev Conclusion I hope this gave you an intro of React.js. Once you setup a project using Vite, you can create more React components and play around to understand more. You can learn more about React from https://react.dev/learn.
React is used to build websites that run entirely in the browser.
The main thing in React.js is JSX. JSX is similar to HTML or XML.
| Language | Full Form | Use | Tags |
|---|---|---|---|
| HTML | Hyper Text Markup Language | Build websites | Predefined set of tags like H1, H2, P etc. |
| XML | Extensible Markup Language | Build data | Custom Tags |
| JSX | JavaScript XML | Write HTML mixed with JavaScript | HTML Tags + Custom Tags |
Examples
HTML
This is heading 1
This is an example paragraph in HTML
XML
</span>XML Example<span class="nt"></to></span>
<span class="nt"><note></span>This is a note<span class="nt"></note></span>
<span class="nt"><data1></span>Example Data<span class="nt"></data1></span>
<span class="nt"><data2></span>Example Data<span class="nt"></data2></span>
<span class="nt"></example></span>
</code></pre>
</div>
<h3>
JSX
</h3>
<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="kd">function</span> <span class="nf">ExampleReactComponent</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>This is heading 1<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="p"><</span><span class="nt">p</span><span class="p">></span>This is an example paragraph in JSX<span class="p"></</span><span class="nt">p</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">)</span>
<span class="p">}</span>
</code></pre>
</div>
<p>As you can see, HTML, XML and JSX are all very similar. JSX is writing HTML mixed with JavaScript. So it is called JSX - Javascript XML.
<p>The advantage of mixing HTML with Javascript is, we can make the HTML dynamic. For example toggle a class name, when a button is clicked.
<h2>
React Components
</h2>
<p>React allows us to define own components that return JSX. A react component is just a regular JavaScript function that returns JSX.
<p>When a root React Component renders, it automatically converts JSX into HTML and adds it the webpage.
<p>With React you can create your own custom components (similar to custom tags) and include them in other React Components.
<p>Here is an example component that uses the above <code>ExampleReactComponent</code>.<br>
<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="kd">function</span> <span class="nf">RootReactComponent</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>This is the main Component<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="p"><</span><span class="nc">ExampleReactComponent</span> <span class="p">/></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">)</span>
<span class="p">}</span>
</code></pre>
</div>
<h2>
Props
</h2>
<p>Similar to how HTML tags have attributes. React components have props.<br>
<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="kd">function</span> <span class="nf">PropsExample</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Prints { exampleValue: "example-value" }</span>
<span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
<span class="k">return </span><span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>Props Example<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="si">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">exampleValue</span><span class="si">}</span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nf">MainComponent</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return </span><span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>This is the Main Component<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="p"><</span><span class="nc">PropsExample</span> <span class="na">exampleValue</span><span class="p">=</span><span class="si">{</span><span class="dl">"</span><span class="s2">example-value</span><span class="dl">"</span><span class="si">}</span> <span class="p">/></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
</code></pre>
</div>
<p>When we render the MainComponent, it calls PropsExample component with <code>props</code> argument being <code>{ exampleValue: "example-value" }</code>.
<p>As you might have noticed, displaying variables in JSX, is done using <code>{}</code>. Anything withing the braces is treated as javascript.
<h2>
State
</h2>
<p>Usually we store data in variables. We use variables to display the stored data.
<p>In React, we use something called <code>state</code> to store data. <code>state</code> can be thought of as getter and setter for variables. The reason for using state to <code>get</code> and <code>set</code> data is when data is set using <code>state</code> setter, React understands that it needs to update the HTML for the component.
<p>For example, look at the below example that automatically updates the HTML when state is set.<br>
<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nf">IncrementDecrement</span><span class="p">(){</span>
<span class="c1">// use value for getting the data</span>
<span class="c1">// use setValue for setting the data</span>
<span class="c1">// Intial value is set to 0</span>
<span class="c1">// React automatically re-renders whenever the setter is called</span>
<span class="c1">// This array syntax is called array destructoring</span>
<span class="kd">const</span> <span class="p">[</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">setValue</span> <span class="p">]</span> <span class="o">=</span> <span class="nf">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="kd">function</span> <span class="nf">increment</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="nf">setValue</span><span class="p">(</span><span class="nx">value</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nf">decrement</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="nf">setValue</span><span class="p">(</span><span class="nx">value</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return </span><span class="p">(</span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">increment</span><span class="si">}</span><span class="p">></span>Increment<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="p">=</span><span class="si">{</span><span class="nx">decrement</span><span class="si">}</span><span class="p">></span>Increment<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="si">{</span><span class="nx">value</span><span class="si">}</span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p">);</span>
<span class="p">}</span>
</code></pre>
</div>
<h2>
Writing React Apps With Vite
</h2>
<p>Tools like <a href="https://vite.dev/" rel="noopener noreferrer">Vite</a> should be used to build React components and JSX into a javascript bundle that can be executed in the browser.
<p>Follow the instructions below to setup your first React.js project.<br>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code><span class="c"># Run this in your project folder, which will generate the needed files</span>
npm create vite@latest my-react-app <span class="nt">--</span> <span class="nt">--template</span> react
<span class="c"># Once the project is setup</span>
<span class="nb">cd </span>my-react-app
npm <span class="nb">install
</span>npm run dev
</code></pre>
</div>
<h2>
Conclusion
</h2>
<p>I hope this gave you an intro of React.js. Once you setup a project using Vite, you can create more React components and play around to understand more.
<p>You can learn more about React from <a href="https://react.dev/learn" rel="noopener noreferrer">https://react.dev/learn</a>. </div>
<div class="d-flex flex-row-reverse mt-4">
<a href="https://dev.to/mohansandesh/a-quick-intro-to-reactjs-2n73" class="btn btn-md btn-custom" target="_blank" rel="nofollow">
Read More <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="m-l-5" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
</div>
<div class="d-flex flex-row post-tags align-items-center mt-5">
<h2 class="title">Tags:</h2>
<ul class="d-flex flex-row">
</ul>
</div>
<div class="post-next-prev mt-5">
<div class="row">
<div class="col-sm-6 col-xs-12 left">
<div class="head-title text-end">
<a href="https://botdialogue.com/adam-mosseri-says-instagram-profile-grids-will-display-content-as-rectangles-instead-of-squares-as-part-of-a-change-rolling-out-over-the-weekend-jay-petersthe-verge">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
</svg>
Previous Article </a>
</div>
<h3 class="title text-end">
<a href="https://botdialogue.com/adam-mosseri-says-instagram-profile-grids-will-display-content-as-rectangles-instead-of-squares-as-part-of-a-change-rolling-out-over-the-weekend-jay-petersthe-verge">Adam Mosseri says Instagram profile grids will display content as rectangles ins...</a>
</h3>
</div>
<div class="col-sm-6 col-xs-12 right">
<div class="head-title text-start">
<a href="https://botdialogue.com/icymi-the-weeks-7-biggest-tech-news-stories-from-apple-and-samsung-phone-leaks-to-nintendos-switch-2-reveal">
Next Article <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>
</div>
<h3 class="title text-start">
<a href="https://botdialogue.com/icymi-the-weeks-7-biggest-tech-news-stories-from-apple-and-samsung-phone-leaks-to-nintendos-switch-2-reveal">ICYMI: the week's 7 biggest tech news stories from Apple and Samsung phone leaks...</a>
</h3>
</div>
</div>
</div>
<section class="section section-related-posts mt-5">
<div class="row">
<div class="col-12">
<div class="section-title">
<div class="d-flex justify-content-between align-items-center">
<h3 class="title">Related Posts</h3>
</div>
</div>
<div class="section-content">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="post-item">
<div class="image ratio">
<a href="https://botdialogue.com/i-dropped-blazingly-fast-url-shortener-ever-its-open-source">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAAEYAQMAAAD1c2RPAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACVJREFUaN7twQEBAAAAgqD+r26IwAAAAAAAAAAAAAAAAAAAACDoP3AAASZRMyIAAAAASUVORK5CYII=" data-src="https://media2.dev.to/dynamic/image/width%3D1000,height%3D500,fit%3Dcover,gravity%3Dauto,format%3Dauto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F49u8lt4hq1ei1ngc6fmy.png" alt="i dropped blazingly fast url shortener ever... it's open source" class="img-fluid lazyload" width="269" height="160"/>
</a>
</div>
<h3 class="title fsize-16"><a href="https://botdialogue.com/i-dropped-blazingly-fast-url-shortener-ever-its-open-source">i dropped blazingly fast url shortener ever... it's ope...</a></h3>
<p class="small-post-meta"> <span>Jan 17, 2025</span>
</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="post-item">
<div class="image ratio">
<a href="https://botdialogue.com/how-to-design-a-stylus-pen-using-3d-cad-software">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAAEYAQMAAAD1c2RPAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACVJREFUaN7twQEBAAAAgqD+r26IwAAAAAAAAAAAAAAAAAAAACDoP3AAASZRMyIAAAAASUVORK5CYII=" data-src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwyf8eyjb9pkfqmud4ud9.png" alt="How to Design a Stylus Pen Using 3D CAD Software" class="img-fluid lazyload" width="269" height="160"/>
</a>
</div>
<h3 class="title fsize-16"><a href="https://botdialogue.com/how-to-design-a-stylus-pen-using-3d-cad-software">How to Design a Stylus Pen Using 3D CAD Software</a></h3>
<p class="small-post-meta"> <span>Jan 17, 2025</span>
</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="post-item">
<div class="image ratio">
<a href="https://botdialogue.com/custom-software-development-a-strategic-solution-for-unique-industry-demands">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAAEYAQMAAAD1c2RPAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACVJREFUaN7twQEBAAAAgqD+r26IwAAAAAAAAAAAAAAAAAAAACDoP3AAASZRMyIAAAAASUVORK5CYII=" data-src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn6csr7clu56r2w1q9ywy.png" alt="Custom Software Development: A Strategic Solution for Unique Industry Demands" class="img-fluid lazyload" width="269" height="160"/>
</a>
</div>
<h3 class="title fsize-16"><a href="https://botdialogue.com/custom-software-development-a-strategic-solution-for-unique-industry-demands">Custom Software Development: A Strategic Solution for U...</a></h3>
<p class="small-post-meta"> <span>Jan 17, 2025</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="col-sidebar sticky-lg-top">
<div class="row">
<div class="col-12">
<div class="sidebar-widget">
<div class="widget-head"><h4 class="title">Popular Posts</h4></div>
<div class="widget-body">
<div class="row">
<div class="col-12">
<div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/introducing-vulne-soldier-a-modern-aws-ec2-vulnerability-remediation-tool">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwbcgjn6cux6hnuplbhq9.png" alt="Introducing vulne-soldier: A Modern AWS EC2 Vulnerability Remediation Tool" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/introducing-vulne-soldier-a-modern-aws-ec2-vulnerability-remediation-tool">Introducing vulne-soldier: A Modern AWS EC2 Vulner...</a></h3>
<p class="small-post-meta"> <span>Jan 14, 2025</span>
</p>
</div>
</div> </div>
<div class="col-12">
<div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/best-monitors-2025-gaming-4k-hdr-and-more">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://www.pcworld.com/wp-content/uploads/2025/01/alienware-aw3423dw-1-1.jpg?quality=50&strip=all#" alt="Best monitors 2025: Gaming, 4K, HDR, and more" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/best-monitors-2025-gaming-4k-hdr-and-more">Best monitors 2025: Gaming, 4K, HDR, and more</a></h3>
<p class="small-post-meta"> <span>Jan 15, 2025</span>
</p>
</div>
</div> </div>
<div class="col-12">
<div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/microsoft-is-axing-support-for-its-own-apps-on-windows-10">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://www.digitaltrends.com/wp-content/uploads/2024/07/surface-laptop-7-06.jpg?resize=440,292&p=1#" alt="Microsoft is axing support for its own apps on Windows 10" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/microsoft-is-axing-support-for-its-own-apps-on-windows-10">Microsoft is axing support for its own apps on Win...</a></h3>
<p class="small-post-meta"> <span>Jan 15, 2025</span>
</p>
</div>
</div> </div>
<div class="col-12">
<div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/diagramming-react-code">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvu0sb2j88jdhqzs0197.png" alt="Diagramming React code" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/diagramming-react-code">Diagramming React code</a></h3>
<p class="small-post-meta"> <span>Jan 18, 2025</span>
</p>
</div>
</div> </div>
<div class="col-12">
<div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/the-differences-in-truthiness-and-falsiness-in-javascript-vs-php">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media2.dev.to/dynamic/image/width%3D1000,height%3D500,fit%3Dcover,gravity%3Dauto,format%3Dauto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9q76xujb9brqodt5ggx.jpg" alt="The Differences in Truthiness and Falsiness in JavaScript vs PHP" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/the-differences-in-truthiness-and-falsiness-in-javascript-vs-php">The Differences in Truthiness and Falsiness in Jav...</a></h3>
<p class="small-post-meta"> <span>Jan 18, 2025</span>
</p>
</div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</section>
<style>
.post-text img {
display: none !important;
}
.post-content .post-summary {
display: none;
}
</style>
<script type="application/ld+json">[{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://botdialogue.com",
"logo": {"@type": "ImageObject","width": 190,"height": 60,"url": "https://botdialogue.com/uploads/logo/logo_677b9f710aa678-03517893.png"},"sameAs": []
},
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://botdialogue.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://botdialogue.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}]
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://botdialogue.com/a-quick-intro-to-reactjs"
},
"headline": "A Quick Intro to React.js",
"name": "A Quick Intro to React.js",
"articleSection": "Programming",
"image": {
"@type": "ImageObject",
"url": "https://media2.dev.to/dynamic/image/width%3D1000,height%3D500,fit%3Dcover,gravity%3Dauto,format%3Dauto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmecxv9wh8goeg9pwtdc6.jpg",
"width": 750,
"height": 500
},
"datePublished": "2025-01-18T08:58:03+0100",
"dateModified": "2025-01-18T08:58:03+0100",
"inLanguage": "en",
"keywords": ", Quick, Intro, React.js",
"author": {
"@type": "Person",
"name": "tedwalid"
},
"publisher": {
"@type": "Organization",
"name": "BotDialogue - Conversing with Technology, Decoding Digital Intelligence",
"logo": {
"@type": "ImageObject",
"width": 190,
"height": 60,
"url": "https://botdialogue.com/uploads/logo/logo_677b9f710aa678-03517893.png"
}
},
"description": "React is used to build websites that run entirely in the browser.
The main thing in React.js is JSX. JSX is similar to HTML or XML.
Language
Full Form
Use
Tags
HTML
Hyper Text Markup Language
Build websites
Predefined set of tags like H1, H2, P etc.
XML
Extensible Markup Language
Build data
Custom Tags
JSX
JavaScript XML
Write HTML mixed with JavaScript
HTML Tags + Custom Tags
Examples
HTML
This is heading 1
This is an example paragraph in HTML
XML
XML Example
This is a note
Example Data
Example Data
JSX
function ExampleReactComponent() {
return (
This is heading 1
This is an example paragraph in JSX
)
}
As you can see, HTML, XML and JSX are all very similar. JSX is writing HTML mixed with JavaScript. So it is called JSX - Javascript XML.
The advantage of mixing HTML with Javascript is, we can make the HTML dynamic. For example toggle a class name, when a button is clicked.
React Components
React allows us to define own components that return JSX. A react component is just a regular JavaScript function that returns JSX.
When a root React Component renders, it automatically converts JSX into HTML and adds it the webpage.
With React you can create your own custom components (similar to custom tags) and include them in other React Components.
Here is an example component that uses the above ExampleReactComponent.
function RootReactComponent() {
return (
This is the main Component
)
}
Props
Similar to how HTML tags have attributes. React components have props.
function PropsExample(props) {
// Prints { exampleValue: "example-value" }
console.log(props);
return (
Props Example
{props.exampleValue}
);
}
function MainComponent() {
return (
This is the Main Component
);
}
When we render the MainComponent, it calls PropsExample component with props argument being { exampleValue: "example-value" }.
As you might have noticed, displaying variables in JSX, is done using {}. Anything withing the braces is treated as javascript.
State
Usually we store data in variables. We use variables to display the stored data.
In React, we use something called state to store data. state can be thought of as getter and setter for variables. The reason for using state to get and set data is when data is set using state setter, React understands that it needs to update the HTML for the component.
For example, look at the below example that automatically updates the HTML when state is set.
import { useState } from 'react';
function IncrementDecrement(){
// use value for getting the data
// use setValue for setting the data
// Intial value is set to 0
// React automatically re-renders whenever the setter is called
// This array syntax is called array destructoring
const [ value, setValue ] = useState(0);
function increment(e){
setValue(value + 1);
}
function decrement(e){
setValue(value - 1);
}
return (
Increment
Increment
{value}
);
}
Writing React Apps With Vite
Tools like Vite should be used to build React components and JSX into a javascript bundle that can be executed in the browser.
Follow the instructions below to setup your first React.js project.
# Run this in your project folder, which will generate the needed files
npm create vite@latest my-react-app -- --template react
# Once the project is setup
cd my-react-app
npm install
npm run dev
Conclusion
I hope this gave you an intro of React.js. Once you setup a project using Vite, you can create more React components and play around to understand more.
You can learn more about React from https://react.dev/learn."
}
</script>
<footer id="footer">
<div class="footer-inner">
<div class="container-xl">
<div class="row justify-content-between">
<div class="col-sm-12 col-md-6 col-lg-4 footer-widget footer-widget-about">
<div class="footer-logo">
<img src="https://botdialogue.com/uploads/logo/logo_677b9f710ab112-23930273.png" alt="logo" class="logo" width="240" height="90">
</div>
<div class="footer-about">
BotDialogue is an innovative technology platform focused on exploring and explaining the evolving world of artificial intelligence, programming, and digital communication technologies, cybersecurity and web development. </div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 footer-widget">
<h4 class="widget-title">Most Viewed Posts</h4>
<div class="footer-posts">
<div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/11-must-know-websites-every-developer-should-bookmark">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A700%2F1%2Ac7xXlqwzpTFAQxbCGiQqdg.png" alt="11 Must-Know Websites Every Developer Should Bookmark" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/11-must-know-websites-every-developer-should-bookmark">11 Must-Know Websites Every Developer Should Bookmark</a></h3>
<p class="small-post-meta"> <span>Jan 14, 2025</span>
</p>
</div>
</div> <div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/the-intelligence-age-by-sam-altman">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://static1.squarespace.com/static/62ec2bc76a27db7b37a2b32f/t/66f33e1ba41fb006596e7230/1727217188415/ai-podcast-the-intelligence-age.mp3?#" alt="The Intelligence Age by Sam Altman" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/the-intelligence-age-by-sam-altman">The Intelligence Age by Sam Altman</a></h3>
<p class="small-post-meta"> <span>Jan 14, 2025</span>
</p>
</div>
</div> <div class="tbl-container post-item-small">
<div class="tbl-cell left">
<div class="image">
<a href="https://botdialogue.com/spicychat-alternatives">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://ai2people.com/wp-content/uploads/2025/01/spicychat-alternatives2.jpg" alt="Spicychat Alternatives" class="img-fluid lazyload" width="130" height="91"/>
</a>
</div>
</div>
<div class="tbl-cell right">
<h3 class="title"><a href="https://botdialogue.com/spicychat-alternatives">Spicychat Alternatives</a></h3>
<p class="small-post-meta"> <span>Jan 14, 2025</span>
</p>
</div>
</div> </div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 footer-widget">
<h4 class="widget-title">Newsletter</h4>
<div class="newsletter">
<p class="description">Join our subscribers list to get the latest news, updates and special offers directly in your inbox</p>
<form id="form_newsletter_footer" class="form-newsletter">
<div class="newsletter-inputs">
<input type="email" name="email" class="form-control form-input newsletter-input" maxlength="199" placeholder="Email">
<button type="submit" name="submit" value="form" class="btn btn-custom newsletter-button">Subscribe</button>
</div>
<input type="text" name="url">
<div id="form_newsletter_response"></div>
</form>
</div>
<div class="footer-social-links">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container-xl">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6">
<div class="copyright text-start">
Copyright 2024 BotDialogue .com- All Rights Reserved. </div>
</div>
<div class="col-sm-12 col-md-6">
<div class="nav-footer text-end">
<ul>
<li><a href="https://botdialogue.com/terms-conditions">Terms & Conditions </a></li>
<li><a href="https://botdialogue.com/news-source">News Source </a></li>
<li><a href="https://botdialogue.com/cookies-policy">Cookies Policy </a></li>
<li><a href="https://botdialogue.com/privacy-policy">Privacy Policy </a></li>
<li><a href="https://botdialogue.com/publish-with-us">Publish With Us </a></li>
<li><a href="https://botdialogue.com/download-app">Download App </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<a href="#" class="scrollup"><i class="icon-arrow-up"></i></a>
<div class="cookies-warning">
<button type="button" aria-label="close" class="close" onclick="closeCookiesWarning();">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<div class="text">
<p>This site uses <a href="https://botdialogue.com/cookies-policy">cookies</a>. By continuing to browse the site you are agreeing to our use of <a href="https://botdialogue.com/cookies-policy">cookies</a>.</p> </div>
<button type="button" class="btn btn-md btn-block btn-custom" aria-label="close" onclick="closeCookiesWarning();">Accept Cookies</button>
</div>
<script src="https://botdialogue.com/assets/themes/magazine/js/jquery-3.6.1.min.js "></script>
<script src="https://botdialogue.com/assets/vendor/bootstrap/js/bootstrap.bundle.min.js "></script>
<script src="https://botdialogue.com/assets/themes/magazine/js/plugins-2.3.js "></script>
<script src="https://botdialogue.com/assets/themes/magazine/js/script-2.3.min.js "></script>
<script>$("form[method='post']").append("<input type='hidden' name='sys_lang_id' value='1'>");</script>
<script>if ('serviceWorker' in navigator) {window.addEventListener('load', function () {navigator.serviceWorker.register('https://botdialogue.com/pwa-sw.js').then(function (registration) {}, function (err) {console.log('ServiceWorker registration failed: ', err);}).catch(function (err) {console.log(err);});});} else {console.log('service worker is not supported');}</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4BNKK5GSMX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4BNKK5GSMX');
</script> </body>
</html>