<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Darshancodes</title>
    <description>The latest articles on Forem by Darshancodes (@darshancodes).</description>
    <link>https://forem.com/darshancodes</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F795528%2F662b39bc-1355-432b-b0dd-931422e493db.png</url>
      <title>Forem: Darshancodes</title>
      <link>https://forem.com/darshancodes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/darshancodes"/>
    <language>en</language>
    <item>
      <title>Right way to use Blockchain</title>
      <dc:creator>Darshancodes</dc:creator>
      <pubDate>Sun, 27 Feb 2022 05:22:38 +0000</pubDate>
      <link>https://forem.com/darshancodes/right-way-to-use-blockchain-1cfe</link>
      <guid>https://forem.com/darshancodes/right-way-to-use-blockchain-1cfe</guid>
      <description>&lt;p&gt;Hey there everyone, today we're going to learn about how you can use blockchain in right way, like what are some of the major ways, tips to use it and what actions does it performs. So, let's get started with an introduction about it!&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Blockchain?
&lt;/h2&gt;

&lt;p&gt;Blockchain technology is a structure that stores transactional records, also known as the block, of the public in several databases, known as the “chain,” in a network connected through peer-to-peer nodes. Typically, this storage is referred to as a ‘digital ledger.’&lt;/p&gt;

&lt;p&gt;Every transaction in this ledger is authorized by the digital signature of the owner, which authenticates the transaction and safeguards it from tampering. Hence, the information the digital ledger contains is highly secure.&lt;/p&gt;

&lt;p&gt;In simpler words, the digital ledger is like a Google spreadsheet shared among numerous computers in a network, in which, the transactional records are stored based on actual purchases. The fascinating angle is that anybody can see the data, but they can’t corrupt it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is Blockchain so popular?
&lt;/h2&gt;

&lt;p&gt;Record keeping of data and transactions are a crucial part of the business. Often, this information is handled in house or passed through a third party like brokers, bankers, or lawyers increasing time, cost, or both on the business. Fortunately, Blockchain avoids this long process and facilitates the faster movement of the transaction, thereby saving both time and money.&lt;/p&gt;

&lt;p&gt;Most people assume Blockchain and Bitcoin can be used interchangeably, but in reality, that’s not the case. Blockchain is the technology capable of supporting various applications related to multiple industries like finance, supply chain, manufacturing, etc., but Bitcoin is a currency that relies on Blockchain technology to be secure.&lt;/p&gt;

&lt;h2&gt;
  
  
  Advantages of using Blockchain?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Highly Secure&lt;/strong&gt; - It uses a digital signature feature to conduct fraud-free transactions making it impossible to corrupt or change the data of an individual by the other users without a specific digital signature.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Decentralised System&lt;/strong&gt; - Conventionally, you need the approval of regulatory authorities like a government or bank for transactions; however, with Blockchain, transactions are done with the mutual consensus of users resulting in smoother, safer, and faster transactions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Automation Capability&lt;/strong&gt; - It is programmable and can generate systematic actions, events, and payments automatically when the criteria of the trigger are met.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some Right way to use Blockchain?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1) Sharing records securely&lt;/strong&gt; - Blockchain could be a solution for sharing the records/transactions securely if not then that’s not the right way to use blockchain.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2) Level up your supply chain management&lt;/strong&gt; - One of the greatest challenges facing manufacturers today is the increasingly complex and opaque global supply chain.  “With blockchain, however, you can easily access supplier records, information from government agencies and insurers, and prior verifications completed by trusted parties, all in one place.”&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Prevend Fraud and Streamline accounting&lt;/strong&gt; - Blockchain — which initially helped prevent fraud in banking — can also be used for media buying. With blockchain’s open and distributed ledger, advertisers can track their investments throughout the process. But advertisers won’t realize this perk unless all parties in a transaction agree to use the technology.&lt;/p&gt;

&lt;p&gt;Blockchain can also streamline accounting practices in more areas than advertising spend. The technology can lighten the load for financial auditors, meaning they have more time to focus on anomalies. “Blockchain’s transparency gives visibility to all transactions for approved users, and this may decrease auditors’ work with sampling and validating transactions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This technology has the potential to disrupt nearly every industry and solve your business’s greatest challenges. By strategically implementing some new solutions, you can make your business more secure, more transparent, and more prepared for whatever’s next.&lt;/p&gt;

&lt;p&gt;Thanks!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>blockchain</category>
      <category>web3</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Organize large React Applications like this</title>
      <dc:creator>Darshancodes</dc:creator>
      <pubDate>Sun, 20 Feb 2022 05:38:37 +0000</pubDate>
      <link>https://forem.com/darshancodes/organize-large-react-applications-like-this-1pgk</link>
      <guid>https://forem.com/darshancodes/organize-large-react-applications-like-this-1pgk</guid>
      <description>&lt;p&gt;Hey there guys, Welcome to this blog. In today's blog we'll be going to see how we can organize our large &lt;strong&gt;ReactJS Apps&lt;/strong&gt;, so as we've seen that most of peoples are now using ReactJS as there primary frontend library to create different kinds of websites and web applications.&lt;/p&gt;

&lt;p&gt;Also, One of the best features of React is how it gets out of your way and is anything but descriptive when it comes to file structure. Therefore, you’ll find a lot of questions on Stack Overflow and similar sites asking how to structure applications. This is a very opinionated topic, and there’s no one right way. &lt;/p&gt;

&lt;p&gt;In this article, I’ll talk you through the decisions I make when building React applications: picking tools, structuring files, and breaking components up into smaller pieces, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Folder Structure
&lt;/h2&gt;

&lt;p&gt;Let's view the folder structure of the react application:&lt;br&gt;
&lt;a href="https://media.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%2F9v2r50ex24dvoe0a88ij.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.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%2F9v2r50ex24dvoe0a88ij.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see in this image, there's a folder structure of your react app. &lt;/p&gt;

&lt;p&gt;Well, So your all the code is present in &lt;strong&gt;&lt;code&gt;src&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
To keep things organized, I’ll place all application code in a folder called src. This contains only code that ends up in your final bundle, and nothing more. &lt;/p&gt;

&lt;p&gt;This is useful because you can tell Babel (or any other tool that acts on your app code) to just look in one directory and make sure it doesn’t process any code it doesn’t need to. Other code, such as webpack config files, lives in a suitably named folder. For example, my top-level folder structure often contains:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;src&lt;/strong&gt; =&amp;gt; app code here&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;webpack&lt;/strong&gt; =&amp;gt; webpack configs&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;scripts&lt;/strong&gt; =&amp;gt; any build scripts&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;tests&lt;/strong&gt; =&amp;gt; any test specific code (API mocks, etc.)
Also, the one file named &lt;code&gt;index.html&lt;/code&gt;, &lt;code&gt;package.json&lt;/code&gt;, and any &lt;code&gt;dotfiles&lt;/code&gt; are configuration files.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  React Components
&lt;/h2&gt;

&lt;p&gt;Once you’ve got a src folder, the tricky bit is deciding how to structure your components. In the past, I’d put all components in one large folder, such as src/components, but I’ve found that on larger projects this gets overwhelming very quickly.&lt;/p&gt;

&lt;p&gt;The one thing to get this understanding easier is to group the components, it means categorizing the components based on their commom properties like where it should be &amp;amp; why it should be there makes the component look clean, neat, and understandable. For example, you have an component that renders the buy product cost, let's call it &lt;code&gt;BuyProduct&lt;/code&gt;, you might simply prefer to use it as &lt;code&gt;Product&lt;/code&gt;, cuz you'll then import it from the &lt;code&gt;Buy&lt;/code&gt; folder.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;import Product from '../buy/product&lt;br&gt;
// VS&lt;br&gt;
import BuyProduct from '../buy/buy-product'&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Prefer &lt;code&gt;JSX&lt;/code&gt; Extension
&lt;/h2&gt;

&lt;p&gt;A lot of people name React components with a capital letter in the file, to distinguish them from regular JavaScript files. So in the above imports, the files would be BuyProduct.js, or Product.js. I tend to prefer to stick to lowercase files with dashes as separators, so in order to distinguish I use the .jsx extension for React components. Therefore, I’d stick with BuyProduct.jsx.&lt;br&gt;
You can enforce this .jsx convention using a rule from &lt;a href="https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-filename-extension.md" rel="noopener noreferrer"&gt;eslint-plugin-react.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Prefer using &lt;code&gt;Prop-Types&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;React allows you to document the names and types of properties that you expect a component to be given using its &lt;a href="https://www.npmjs.com/package/prop-types" rel="noopener noreferrer"&gt;prop-types package&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;By declaring the names and types of expected props, along with whether or not they’re optional, you can have more confidence that you’ve got the right properties when working with components, and you can spend less time debugging if you’ve forgotten a property name or have given it the wrong type. You can enforce this using the &lt;a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md" rel="noopener noreferrer"&gt;eslint-plugin-react PropTypes rule&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Hope you have understood ow you can manage your larger react applications with this short &amp;amp; simple article. One of the best features of the framework is how it lets you make most of the decisions around tooling, build tools and folder structures, and you should embrace that. This article has given you some ideas on how you might approach your larger React applications, but you should take my ideas and tweak them to suit your own and your team’s preferences. Let's connect on &lt;a href="https://twitter.com/Darshanshub" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; :D &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>react</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Roadmap to become a web3 developer</title>
      <dc:creator>Darshancodes</dc:creator>
      <pubDate>Sun, 13 Feb 2022 05:13:52 +0000</pubDate>
      <link>https://forem.com/darshancodes/roadmap-to-become-a-web3-developer-412j</link>
      <guid>https://forem.com/darshancodes/roadmap-to-become-a-web3-developer-412j</guid>
      <description>&lt;p&gt;Hello there everyone, I'm Darshan and i'm here today to explain you a complete fresh roadmap about web3.0. &lt;/p&gt;

&lt;p&gt;So, lot of you guys have heard about web3.0 as it is in the trend right now, and each and everyone is trying the space of web3.0. So, Let's start with this complete roadmap.&lt;/p&gt;

&lt;p&gt;Let's goo!!&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn the fundamentals&lt;/strong&gt;&lt;br&gt;
So, first of all you need to understand the basics of web3.0 like what technologies it has, what is it and this basic things, once the fundamentals are clear you can start observing some latest technologies it has to work with like Blockchain, Solidity, Solana and etc. You also need to learn about backend for next-generation decentralised applications. (DApps)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn decentralised web&lt;/strong&gt;&lt;br&gt;
After learning about the blockchain, the nodes, the consensus, and all the major components of this technology, you will start to ask yourself, "What kind of applications can I develop using blockchain?" &lt;br&gt;
The applications built on top of Blockchain are called Decentralized applications, or DApps, &lt;a href="https://www.coursera.org/learn/decentralized-apps-on-blockchain"&gt;Learn more here&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn about Smart Contracts&lt;/strong&gt;&lt;br&gt;
Smart contract is simply a program that runs on the Ethereum blockchain. It's a collection of code (its functions) and data (its state) that resides at a specific address on the Ethereum blockchain.&lt;br&gt;
It means they have a balance &amp;amp; they can send transactions over the network. However, if they're not controlled by a user then they are deployed to the network.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn Frontend &amp;amp; Backend web development&lt;/strong&gt;&lt;br&gt;
Alright, so as for the development of your web3 app we'd need to work on the frontend with technologies like ReactJS or NextJS and you should be able to work on them. Also, decentralized application backends are very different from “standard” application backends, starting with the fact that blockchain technology is used as the main source of decentralized data storage, while standard backends often use databases or data storage.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn Solidity&lt;/strong&gt;&lt;br&gt;
Solidity is an object-oriented, high-level programming language used to create smart contracts that automate transactions on the blockchain. Solidity is statically typed, supports inheritance, libraries and complex user-defined types among other features&lt;br&gt;
With Solidity you can create contracts for uses such as voting, crowdfunding, blind auctions, and multi-signature wallets.&lt;br&gt;
&lt;a href="https://www.youtube.com/watch?v=M576WGiDBdQ&amp;amp;ab_channel=freeCodeCamp.org"&gt;Here you go with the better understanding of it&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn how you can connect decentralised app ether.js or web3.js&lt;/strong&gt;&lt;br&gt;
The ethers.js library aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem. It keeps your private keys in your client, safe and sound. While web3.js is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To do so you can choose between the two JavaScript Libraries.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtube.com/watch?v=t3wM5903ty0"&gt;Introduction to web3.js&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.reddit.com/r/ethdev/comments/k6s48s/introduction_to_ethers_js_alternative_to_web3/"&gt;Introduction to ether.js&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Also, one more last thing that you never want to forgot is that &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Practice, Practice, and Practice&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you find this article helpful make sure to like this and send this with you friends whom this article would be helpful! And if you want to read even more content, feel free to visit me on &lt;a href="https://twitter.com/Darshanshub"&gt;twitter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank You!&lt;br&gt;
-Darshan&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>web3</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
