<?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>DEV Community: Munir Abdullahi</title>
    <description>The latest articles on DEV Community by Munir Abdullahi (@iamaamunir).</description>
    <link>https://dev.to/iamaamunir</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%2F761117%2Fdd1aac07-924d-4a8b-b657-70271c6e9f7e.jpg</url>
      <title>DEV Community: Munir Abdullahi</title>
      <link>https://dev.to/iamaamunir</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/iamaamunir"/>
    <language>en</language>
    <item>
      <title>Rust Vs. Other Programming Languages: What Sets Rust Apart?</title>
      <dc:creator>Munir Abdullahi</dc:creator>
      <pubDate>Fri, 14 Jun 2024 16:02:00 +0000</pubDate>
      <link>https://dev.to/strapi/rust-vs-other-programming-languages-what-sets-rust-apart-1hc5</link>
      <guid>https://dev.to/strapi/rust-vs-other-programming-languages-what-sets-rust-apart-1hc5</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flh9f5ki19bxnksv8qbph.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flh9f5ki19bxnksv8qbph.jpg" alt="Cover image for article" width="800" height="403"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;The rapid emergence of different programming languages in the technology landscape may affect the programming language/tool choice while building a software product. Despite this, some programming languages stand out, and Rust is one of them. Rust is a systems language designed to solve challenging software problems.&lt;/p&gt;

&lt;p&gt;Since its announcement in 2010, Rust has witnessed tremendous growth. Its modern syntax and thriving community are quite attractive, so it is no wonder it was referred to as the "most loved" programming language in the 2023 StackOverflow Developer's survey.&lt;/p&gt;

&lt;p&gt;This article covers an overview of Rust programming language. It starts with its historical background. Then, it explores its fantastic and unique features, application areas, and how it compares to other programming languages. We will see why companies love Rust and how they use it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Historical Background of Rust and its Rise in Popularity
&lt;/h2&gt;

&lt;p&gt;It started when the creator, Graydon Hoare, had an elevator-crashing experience and realized this was a problem of poor memory management. So, in 2006, Hoare designed Rust as a side project to handle pitfalls such as memory management in C and C++ while offering type safety, high performance, and concurrency. Mozilla further sponsored the language and released it in 2010.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdzl1ps9tn7el9c9ffjci.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdzl1ps9tn7el9c9ffjci.png" alt="photo from Google Trends showing Rust's internet trend over the past five years" width="800" height="227"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;photo from Google Trends showing Rust's internet trend over the past five years&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In 2012, Rust underwent a significant evolution, marked by the introduction of versions 0.2 and 0.3. These versions brought with them a host of new features, including classes, polymorphism, and destructors, which significantly enhanced the language's functionality. This evolution was not a solitary effort, but a testament to the collective progress of the Rust community.&lt;br&gt;
In its early days, the Rust team gradually consolidated several memory management techniques. However, in 2013, the team removed the garbage collector and maintained ownership rules.&lt;br&gt;
The team released the first stable version, version 1.0, in 2015 after several versions.&lt;/p&gt;

&lt;p&gt;2017 saw the integration of Rust components into Firefox 57. In 2020, the massive layoff at Mozilla raised concerns for the future of Rust. However, the Rust Foundation was formed, and its establishment was announced in 2021. Some companies, like AWS, Google, Microsoft, etc., founded the foundation and took ownership of the associated domain names.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3tn0x7vhd3tez956vgsr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3tn0x7vhd3tez956vgsr.png" alt="photo from 2023 StackOverflow Survey showing Rust as the most admired language with 84.66%" width="800" height="485"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;photo from 2023 StackOverflow Survey showing Rust as the most admired language with 84.66%&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Features of Rust
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Concurrency and Parallelism&lt;br&gt;
Concurrency is the ability for different parts of a program to run independently. The Rust concurrency model is called the fearless concurrency. It enables developers to write bug-free and easy-to-refactor code. &lt;br&gt;
Threading is a method for implementing concurrency in Rust. It is a core feature of the concurrency model. With threads, tasks are subdivided and run in multiple processes simultaneously. &lt;br&gt;
The std::thread module in Rust is a powerful resource for creating and managing threads. It provides functions like 'spawn ', which not only create a thread but also execute a specific function within that thread, offering developers a high level of control over their concurrent processes. &lt;br&gt;
Parallelism improves performance and efficiency in the codebase. Multiple CPU cores execute processes. Rayon is a library that implements parallelism in Rust. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Performance and Efficiency&lt;br&gt;
Zero-cost abstraction in Rust achieves good performance and efficiency. Abstractions such as closures and iterators prevent runtime overhead. Features like concurrency and parallelism also contribute to the overall performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Memory Safety and Ownership&lt;br&gt;
A program manages memory through memory safety to prevent errors. The ownership system ensures memory safety in Rust and dictates memory management in the program. Every value in the program has an owner. When the current context is no longer accessible to the owner, the memory associated with the value is deallocated or freed. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Strong Package Manager with Cargo&lt;br&gt;
Cargo is Rust's package manager, making handling package dependencies and distribution easier. Package versions and dependencies can be added and specified when working on a project. Cargo also offers a range of commands to automate tasks such as running tests and compiling code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Community and Documentation&lt;br&gt;
The Rust community commits to welcoming and supporting new members. It has various platforms and forums where users can communicate and gain support. Since Rust is an open-source project, community members actively contribute to and maintain it. &lt;br&gt;
Industry experts organize events to enhance learning and stay up-to-date with new versions. The community is friendly and inclusive, making it safe for everyone of different diversities to participate and engage.&lt;br&gt;
The Rust official documentation is a robust and well-detailed guide for the language, including its syntax and libraries. The following are different sections of the documentation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://doc.rust-lang.org/book/"&gt;The Rust Book&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://doc.rust-lang.org/rust-by-example/"&gt;Rust by example&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://doc.rust-lang.org/reference/"&gt;Rust reference&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://doc.rust-lang.org/nomicon/"&gt;Rustonomicon&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.toThe%20standard%20library"&gt;The standard library&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Modern and Clean Syntax&lt;br&gt;
Rust is known for its modern and clean syntax, which balances complexity and readability. Its syntax offers closure and pattern matching, which help make complex code readable. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Safety and Reliability&lt;br&gt;
Safety and reliability are core principles of Rust in its design and syntax. This feature is a result of the removal of the garbage collector.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  How Does Rust Compare to other Programming Languages
&lt;/h2&gt;

&lt;p&gt;This section compares Rust with other programming languages, discussing its strengths and weaknesses in areas of software development.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffym24zk9kscbprt1elwd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffym24zk9kscbprt1elwd.png" alt="photo from 2023 StackOverFlow Survey showing Rust as the 14th most popular language with 13.05%" width="800" height="493"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;photo from 2023 StackOverFlow Survey showing Rust as the 14th most popular language with 13.05%&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Rust Vs. Python
&lt;/h2&gt;

&lt;h3&gt;
  
  
  When is Rust better than Python?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Concurrency&lt;br&gt;
Due to its ownership feature, Rust is more efficient in concurrent programming. It helps developers write multi-threaded programs without introducing bugs. Python is limited in concurrent programming due to the Global Interpreter Lock (GIL). Thus, Rust does concurrent programming better than Python. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Performance&lt;br&gt;
Rust is a system programming language suitable for high-performance applications. In some cases, It can run twice as well as Python. Rust's memory management feature also adds to its performance. Python is an interpreted language that runs processes slower due to compilation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Security&lt;br&gt;
The Rust language is designed to provide optimal security for applications. Rust’s programs are statically typed, detecting errors before compilation. Memory safety also enhances the security of the code.&lt;br&gt;
Python, on the other hand, interprets its program just before execution, which can lead to runtime errors and potential vulnerabilities. This means that developers using Python must be diligent in managing memory, a task that can consume both time and resources.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Garbage collection&lt;br&gt;
The Rust ownership system eliminates garbage collection. Python uses garbage collection to check for unused memory and manage it. However, this may cause hitches in its performance.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  When is Python better than Rust?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Learning Curve&lt;br&gt;
Python is very beginner-friendly. The code structure is more readable, and the syntax is simple. Developers at all levels can learn quickly. Complex features, such as concurrency, make Rust’s learning curve steeper.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Flexibility&lt;br&gt;
Python is applicable in many areas of technology. It supports several domains, like web development, machine learning, etc., with many libraries. While Rust is great for system programming, it offers less flexibility than Python.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Documentation&lt;br&gt;
Due to its longevity, Python's documentation is extensive, user-friendly, and easier to understand. Rust's documentation is comprehensive but more technical and not user-friendly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Community&lt;br&gt;
Python has a larger community. It is an open-source project with a wide range of domains and applications. Rust has a growing community with active contributors and users. However, it is considered smaller than that of Python.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Rust Vs. JavaScript
&lt;/h2&gt;

&lt;h3&gt;
  
  
  When is Rust better than JavaScript
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Memory Management&lt;br&gt;
One key difference between Rust and JavaScript is how they handle memory. JavaScript uses garbage collection to free up memory automatically. Rust uses ownership system rules to deallocate memory, resulting in better performance and minimal errors.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Type System and Compiled-time Checks&lt;br&gt;
In Rust, developers can define variables alongside their data type. This feature ensures security and error handling before program execution. JavaScript is a dynamically typed programming language whose variables can be any data type. While this makes JavaScript flexible, it may lead to runtime errors.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Performance&lt;br&gt;
Rust outperforms JavaScript. Rust programs are highly optimized and suitable for heavy tasks. JavaScript is applicable for web-based applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Error Handling&lt;br&gt;
JavaScript uses the &lt;code&gt;try-catch&lt;/code&gt; technique to catch errors at runtime. While this guarantees error handling, unhandled exceptions may occur at runtime and cause breaks in the code. Rust uses the &lt;code&gt;result-match&lt;/code&gt; technique to catch errors before code execution.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  When is JavaScript better than Rust
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Ecosystem and Community&lt;br&gt;
Due to its longevity, JavaScript has a larger ecosystem and community. It has a range of active frameworks and libraries, and it is easy to find solutions to problems in the community. Rust has a smaller and growing community, although it strives to help new learners. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Rapid Prototyping&lt;br&gt;
JavaScript’s dynamic typing feature and flexibility make writing and testing code easy, especially for small projects. Rust is statically typed and can slow down the prototyping process.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cross-platform Development&lt;br&gt;
JavaScript versatility allows developers to build applications across different operating systems and environments with minimal adjustment. While Rust has cross-platform functionality, it doesn’t surpass JavaScript.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Web Development&lt;br&gt;
JavaScript is the language of the web. No programming language comes close to this functionality. Rust also applies in web development but has problems writing async request handlers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Rust Vs. C++
&lt;/h2&gt;

&lt;h3&gt;
  
  
  When is Rust better than C++
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Memory Safety&lt;br&gt;
Rust ensures efficient memory safety functionality through its ownership system. C++ lacks memory safety, thus making it vulnerable to memory-related errors. In C++, developers need to manage memory by themselves. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Concurrency&lt;br&gt;
Developers achieve concurrency in Rust without synchronization bugs. Although C++ offers concurrent programming through libraries like threads, it lacks Rust safety features. Manual synchronization primitives can provide safety in C++, but they are error-prone.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Modern Syntax&lt;br&gt;
Rust offers a more modern and expressive syntax compared to C++, which has a more complex syntax. Rust has a smaller feature set compared to C++, which enhances a developer’s productivity. C++ may offer flexibility due to its numerous features, but it also increases complexity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ecosystem and Community&lt;br&gt;
The vibrant and growing Rust community is devoted to improving code quality. A growing ecosystem of libraries and frameworks makes development easier.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  When is C++ better than Rust
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Fine-grained Control&lt;br&gt;
C++ allows developers to manage system memory in their own way. The program's resources are free to use. Based on the specific performance target, developers can implement optimizations and fine-tuning.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Large Standard Library&lt;br&gt;
C++ has an extensive list of standard libraries packed with functionality to solve various tasks. These libraries provide built-in components to execute tasks such as data structures, algorithms, and input/output operations. Developers can then build high-performance applications with the aid of these libraries.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Legacy Systems&lt;br&gt;
C++ is compatible with legacy systems, especially since it is an extension of C. Thus, developers can easily integrate it into legacy codebases, easing migration processes. Because Rust is a newer language, incorporating it into legacy codebases might pose a challenge.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Learning Curve&lt;br&gt;
C++ shares similarities with some Object-Oriented Programming (OOP) languages, such as C and Java. Developers with experience with OOP languages can quickly learn C++. In addition, there are abundant learning resources and tutorials to aid learning.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Applications of Rust
&lt;/h2&gt;

&lt;p&gt;Rust is applicable in various fields due to its unique and dominant features. This section explores the areas where Rust is applicable.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Systems Development
Rust's efficiency and memory safety make it a top language for developing operating systems. Since safety in modern applications is essential to prevent cyber attacks, companies and developers tend to use Rust in systems programming.&lt;/li&gt;
&lt;li&gt;Web Development
While some languages are popular in web development, Rust is also applicable due to its high performance and safety. Rust WebAssembly enables developers to compile Rust code into a binary format and execute it in the browser.&lt;/li&gt;
&lt;li&gt;Game Development
Aside from C# and C++, Rust is also a language developers use in game development. Game engines like Amethyst offer efficiency and faster runtimes. Since C++ is similar to Rust, it is easier for C++ developers to expand their knowledge and use Rust in development.&lt;/li&gt;
&lt;li&gt;Embedded System
Rust is beginning to dominate the field of embedded systems. Memory management is a common challenge in embedded systems, making Rust a better technology for programming embedded systems. &lt;/li&gt;
&lt;li&gt;Blockchain and Cryptography
Blockchain technology requires cryptographic operations and demands high performance and security. Blockchain projects such as Solana and Parity Ethereum have adopted Rust in their technology.&lt;/li&gt;
&lt;li&gt;Data science and Machine Learning
Rust is considered the next big thing in data science and machine learning. While there are popular languages like Python and R, Rust’s outstanding efficiency and ownership system make it a good option for handling large datasets. &lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Popular Companies that use Rust
&lt;/h2&gt;

&lt;p&gt;Companies worldwide have found Rust programming language applicable to their products, and developers love the language as it increases productivity. This section explores the top applications that use Rust, how top companies use Rust, and why these companies like Rust.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fncij8435xy3p5a6wdalm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fncij8435xy3p5a6wdalm.png" alt="Popular companies that use Rust" width="800" height="470"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Popular companies that use Rust&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Top Applications that Use Rust
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Dropbox&lt;br&gt;
Dropbox is a collaboration and cloud storage platform that uses Rust to improve its infrastructure reliability and performance. Dropbox Capture, a visual communication tool, has benefited from Rust in ways such as better error handling. Currently, Dropbox uses Rust in the core file-storage system that serves over 500 million users.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Figma&lt;br&gt;
Figma is a web-based design collaborative tool that utilizes Rust in its backend infrastructure. The team at Figma has witnessed incredible improvements in their server-side performance. Figma rewrote their multiplayer server in Rust using TypeScript.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Discord&lt;br&gt;
The Discord team switched from Go to Rust when they discovered that Go always forced garbage collection. Today, they use Rust on the client side for the video encoding pipeline and Elixer NIFS on the server side. Also, Discord switched from Go to Rust in their Read State service.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cloudflare&lt;br&gt;
Cloudflare is a leading internet service security provider. The Cloudflare application uses Rust in DDoS detection. The team also developed an open-source Rust framework called Pingora that builds services for traffic on Cloudflare. Cloudflare's Data Loss Prevention team uses Rust in the data and control plane.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Big companies that use Rust
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Amazon&lt;br&gt;
Amazon is an e-commerce company that owns Amazon Web Services (AWS) but uses AWS independently by providing cloud computing services to individuals and companies. Firecracker was Amazon's first notable product implementation using Rust. They also use Rust to deliver services such as Amazon Simple Storage Service (Amazon S3), Amazon Elastic Compute Cloud (Amazon EC2), and Amazon CloudFront. &lt;br&gt;
Amazon's commitment to Rust is unwavering. They recognize its potential to help them build and deliver robust services faster. This commitment is further demonstrated by their sponsorship of the Rust open-source project since 2019.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Microsoft&lt;br&gt;
Microsoft is a founding member of Rust’s foundation. The company has since dedicated itself to the development and success of the programming language. Microsoft built its core Windows libraries with Rust and plans to write future projects with Rust. Microsoft’s Windows 11 boots with Rust and passes Graphic Device Interface (GDI) tests. Microsoft may not be rewriting Windows with Rust soon.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The Mozilla developer team built the Firefox CSS engine, Stylo, with Rust. Rust also occupies 11.4% of the code in Firefox and other languages. Mozilla was the first founding member of the Rust project. The company’s commitment to seeing the language grow to success is a priority. Rust is considered one of Mozilla’s main contributions to the industry.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Meta&lt;br&gt;
Rust is a primarily supported server-side language in Meta for its ability to provide performance-sensitive backend services. Meta-child company Facebook has since adopted Rust and became one of the members of the Rust Foundation. The early use of Rust on Facebook is where the team rewrote the Mononoke. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why do companies like Rust
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Efficient Memory Management and Safety
Companies like Rust's memory management. It improves software application performance and effectively manages memory. Due to the low risk of memory-related issues, companies can save resources by implementing costly maintenance. Memory safety is guaranteed, and sensitive data is also protected. &lt;/li&gt;
&lt;li&gt;Thriving Community and Documentation
Developers contribute to and support the language daily by building frameworks and tools. These tools reduce development time and enhance productivity. Developers can easily find solutions to bugs and learn the language through documentation.&lt;/li&gt;
&lt;li&gt;Cybersecurity Capabilities
Rust's memory safety helps prevent malicious attacks. Reducing security attacks and data theft ensures the company's credibility.&lt;/li&gt;
&lt;li&gt;Developer Productivity
Rust-language features aid in reducing debugging time. Improvements occur in the development process and development time. Product quality is improved, and product versions can be released quickly for software applications.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;With the rising number of programming languages, choosing the right one for the task is necessary. Rust programming language has proven to be an efficient and reliable tool. Its distinction from other languages sets it apart, making it the most admired language eight times in a row.&lt;/p&gt;

&lt;p&gt;This article has explored Rust as a programming language, starting with how it made it to the scene and how companies find it appealing.  We learned about its unique features. We have also looked at Rust Vs. JavaScript, Rust Vs. Python, and Rust Vs. C++ how it compares to other languages, and its various applications.&lt;/p&gt;

&lt;p&gt;We have seen how Rust’s ownership system and performance, amongst other top features, have set it above many programming languages. Rust is a top pick to build high-performance applications; however, it may not solve every software problem. However, It will continue to pave the way to breaking boundaries in software development.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>A Guide to Passing Data Using Props in React</title>
      <dc:creator>Munir Abdullahi</dc:creator>
      <pubDate>Fri, 08 Sep 2023 09:21:18 +0000</pubDate>
      <link>https://dev.to/iamaamunir/a-guide-to-passing-data-using-props-in-react-38kh</link>
      <guid>https://dev.to/iamaamunir/a-guide-to-passing-data-using-props-in-react-38kh</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1693686192186%2F8392ec92-6cff-44e9-bf87-560a3ac2156f.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp" 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%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1693686192186%2F8392ec92-6cff-44e9-bf87-560a3ac2156f.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp" alt="Cover Photo"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The React framework is very popular for this is its ability to build dynamic user interfaces. In your journey of learning React, you will encounter the concept of Components and how they communicate. Think of components as the foundation on which react user interfaces are built.&lt;/p&gt;

&lt;p&gt;In this tutorial, you will learn about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;React and its Component.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The concept of props and data transfers between React Components.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Effective components communicate using props.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All code examples can be accessed &lt;a href="https://github.com/HalalTechBro/react-props-tutorial" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites.
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Basic knowledge of JavaScript ES6 syntax.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Basic command line knowledge.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Basic knowledge of HTML.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Nice to have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Basic React knowledge.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;React and Its Components&lt;/strong&gt;
&lt;/h1&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;What is React?&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;React is an open-source front-end JavaScript framework containing reusable functions used for creating dynamic user interfaces. Created by Facebook in 2013, it has become the most widely-used front-end framework.&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;What is a React Component?&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;React components are isolated blocks of functions used to implement specific functionalities and build user interfaces. To achieve the dynamic state required, they need to receive data to interact with themselves. They can be created and updated by the developer. Updating the component model updates the user browser. Think of a component model as a tree with a component at the top. The component at the top is called the root/parent component.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FA2Mh6TfeCnreAgF6qoiuMZcbr5Hg38WM_LKi2FDWQPyYJ_eqaSKsshWNlDSOOUpaMqCYeIKQGRGllBayF8al3LV2YJXimU3UqEblPcrTaKTp_MGtMBs78j0Vc4mJQKzSh7HNHzh7jr7EMg8ryzBTwPI" 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%2Flh3.googleusercontent.com%2FA2Mh6TfeCnreAgF6qoiuMZcbr5Hg38WM_LKi2FDWQPyYJ_eqaSKsshWNlDSOOUpaMqCYeIKQGRGllBayF8al3LV2YJXimU3UqEblPcrTaKTp_MGtMBs78j0Vc4mJQKzSh7HNHzh7jr7EMg8ryzBTwPI" alt="Simple to-do list React App Component Structure"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The diagram above represents a simple Todo list component tree structure.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;App&lt;/strong&gt; component at the top represents the root/parent component. It oversees everything. It contains two children components: &lt;strong&gt;Add Item&lt;/strong&gt; and &lt;strong&gt;Todo Items.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;Add Item&lt;/strong&gt; contains two components: Text-Input- a text field where you can write a new item, and &lt;strong&gt;Add Button&lt;/strong&gt; - a button that adds what you have written to your Todo list.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;Todo items&lt;/strong&gt; also contain two components. The components are the Todo list items added. Note that it could be more than two in this case.&lt;/p&gt;

&lt;p&gt;When you click on a button, events happen at a component and they can affect other parts of the codebase. For instance, when the &lt;strong&gt;Add Button&lt;/strong&gt; is clicked, it tells the &lt;strong&gt;App&lt;/strong&gt; component to add a new task. The text entered is sent to the &lt;strong&gt;Todo Items&lt;/strong&gt; through the &lt;strong&gt;App&lt;/strong&gt; component. This action adds a new item, and then the UI updates as the component changes.&lt;/p&gt;

&lt;p&gt;In conclusion, React components are building blocks that help us create dynamic websites and applications. They work together to ensure the application displays and functions well.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Why do we need to Pass Data between Components?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;React relies majorly on its component model. But how will these components be reactive to each other? For instance, from the example above, how will the &lt;strong&gt;Add Button&lt;/strong&gt; component know that data should be sent to the &lt;strong&gt;Todo Items&lt;/strong&gt; component when an event is triggered? Here is where the passing of data comes in. It is a crucial aspect of building efficient and dynamic user interfaces. It enables you to build complex UIs that can be made simpler by creating reusable and modular components.&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;Understanding Props in React&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;To use Props effectively, it is important to understand how it works, including how it is used to pass data between components.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The Concept of props in React&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Props(properties) is a technique of passing data from one component to another. With props, the parent component can share data with the child component. The child component then renders this data to the UI.&lt;/p&gt;

&lt;p&gt;Props are immutable. When passed to the child component, they cant be updated but can still be accessed and used. This attribute helps maintain a clear separation between parent and child components.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;How do props fit into the data flow in React?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In React, data flows in a unidirectional manner. It travels from the parent component to the child component only. Here is a step-by-step process of how data flows in React components.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Data flow starts from the parent component. This data can be from an API&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The data in the parent component is transferred to its child component by props.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The child component receives, accesses, and uses the data. Here is where the data consumption takes place. The data is rendered as UI elements or for other functions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The data is then dynamically rendered as content on the UI. It is interpolated with &lt;a href="https://react.dev/learn/writing-markup-with-jsx" rel="noopener noreferrer"&gt;Javascript XML(JSX)&lt;/a&gt; to display the data as an output on the screen.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Data changes in the parent component result in new data inflow to the child component, making the application re-render.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Since data flow is unidirectional, the flow stops at the child component.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FqYTHGAt_tKT4LEMZCjIdlICeMs444ViP2TJj2ezzSJ1NGFnKc0azUj5PKWuvvHuLbUsV0Zjl43b4Y6VEQLmbiIjb18cifZGpy0N-U5p3GOdWTuoYrW5cQdJoDcGyOQcrUJQhsEU3ICGV-HeOZ3jhDX4" 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%2Flh4.googleusercontent.com%2FqYTHGAt_tKT4LEMZCjIdlICeMs444ViP2TJj2ezzSJ1NGFnKc0azUj5PKWuvvHuLbUsV0Zjl43b4Y6VEQLmbiIjb18cifZGpy0N-U5p3GOdWTuoYrW5cQdJoDcGyOQcrUJQhsEU3ICGV-HeOZ3jhDX4" alt="A Schematic Diagram Describing the Flow of Data in React Components."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;Transferring Data from Parent to Child Component&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;As discussed, passing data between components is an essential feature in React. To master it, start by making a simple React application with the Vite tool in your terminal and type in &lt;code&gt;npm create vite@latest reactProps -- --template react.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Navigate to the directory with this command &lt;code&gt;cd reactProps&lt;/code&gt; &lt;strong&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Next is to install all the dependencies by executing this command &lt;code&gt;npm install&lt;/code&gt; &lt;strong&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The file tree should look like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FTFMZxdH8h1dmQ1buzsG5zrKheFVzZ1s7oSq3RseI4t4aKj7GaxR8abvc-t84w8sM2qUG37qg49kduKGWhujPON71TP97DqwxlY4MDOVuGZYwPJcASZeogOBxXnxqftc4RXhBvCGPilZE6_pFFmj1zLI" 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%2Flh5.googleusercontent.com%2FTFMZxdH8h1dmQ1buzsG5zrKheFVzZ1s7oSq3RseI4t4aKj7GaxR8abvc-t84w8sM2qUG37qg49kduKGWhujPON71TP97DqwxlY4MDOVuGZYwPJcASZeogOBxXnxqftc4RXhBvCGPilZE6_pFFmj1zLI" alt="Code File tree structure"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Creating Components&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Firstly, open the &lt;em&gt;App.jsx&lt;/em&gt; file in the src folder and replace the code there with the one below. All code examples will run on this file.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const App = () =&amp;gt; {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;Hello world&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  )
}
export default App

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This code defines a functional React component named &lt;code&gt;App.&lt;/code&gt; This component renders a &lt;code&gt;div&lt;/code&gt; containing an &lt;code&gt;h1&lt;/code&gt; element with the text &lt;strong&gt;&lt;em&gt;Hello world&lt;/em&gt;&lt;/strong&gt; and a &lt;code&gt;p&lt;/code&gt; element with the text &lt;strong&gt;&lt;em&gt;I am a React Component&lt;/em&gt;.&lt;/strong&gt; To make it available in other parts of the codebase, the file must be exported.&lt;/p&gt;

&lt;p&gt;In the &lt;em&gt;src&lt;/em&gt; folder's &lt;em&gt;main.jsx&lt;/em&gt; file, the following code block imports the &lt;code&gt;App&lt;/code&gt; component from the &lt;em&gt;App.jsx&lt;/em&gt; file and renders the content of the &lt;code&gt;App&lt;/code&gt; component in the &lt;code&gt;div&lt;/code&gt; element with the &lt;code&gt;id&lt;/code&gt; value of &lt;code&gt;root&lt;/code&gt; defined in the &lt;em&gt;public/index.html&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  &amp;lt;React.StrictMode&amp;gt;
    &amp;lt;App /&amp;gt;
  &amp;lt;/React.StrictMode&amp;gt;,
)

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is what the code outputs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FJwnYRY1T8ZHdb5_k2W5-10Yw9UJH56A8dpeCgWR7TLiROdjKNjoMu-2pL1_mPKy444fbc0K5sQEjd5Yl78z9TqTYSMdp-BRvzi4iuNFc-i_NzP5KY7VH_TUD5UyCOYv-y2iNVgy3Q9F8psT-S9Ykhs4" 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%2Flh6.googleusercontent.com%2FJwnYRY1T8ZHdb5_k2W5-10Yw9UJH56A8dpeCgWR7TLiROdjKNjoMu-2pL1_mPKy444fbc0K5sQEjd5Yl78z9TqTYSMdp-BRvzi4iuNFc-i_NzP5KY7VH_TUD5UyCOYv-y2iNVgy3Q9F8psT-S9Ykhs4" alt="Code output"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can remove &lt;em&gt;App.css&lt;/em&gt; and &lt;em&gt;index.css&lt;/em&gt; files from the project folder since all code examples are executed on the &lt;em&gt;src/App.jsx&lt;/em&gt; file.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Passing Props to a Component&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To begin, import &lt;code&gt;propTypes&lt;/code&gt; from the &lt;code&gt;'prop-types'&lt;/code&gt; library. This library ensures that the correct type of props are passed to a component.&lt;/p&gt;

&lt;p&gt;Afterward, build a component named &lt;code&gt;Message&lt;/code&gt; that will accept a prop named &lt;code&gt;greeting&lt;/code&gt; and display a message within it. Using the return statement, tell the component what to render.&lt;/p&gt;

&lt;p&gt;Finally, indicate that the &lt;code&gt;greeting&lt;/code&gt; component can accept any React node and make it a requirement when employing the &lt;code&gt;Message&lt;/code&gt; component. A React node can be a variety of things, such as a string, number, JSX, and more.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import propTypes from 'prop-types'

const Message = (props) =&amp;gt; {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;{props.greeting}&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  )
}

Message.propTypes = {
  greeting: propTypes.node.isRequired
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the &lt;em&gt;src/App.jsx&lt;/em&gt; file, replace the code inside the div element with the code below in the &lt;code&gt;App&lt;/code&gt; component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Message greeting="Greetings from the Child Component" /&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is what the code outputs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FKyU5ebSNQ8pwHWlEBhSKpL-LDKNJooXVemUKzyLxd0HoWWrLDvrpjmxLjwUa94mGinPMW8nPUSDdXJpY74ugzexkV31__-FDVJg_j3cirJO0phDYW15biucTJFr1CjqCMFm5WwfCxAn9-nmwwB6LXQ8" 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%2Flh4.googleusercontent.com%2FKyU5ebSNQ8pwHWlEBhSKpL-LDKNJooXVemUKzyLxd0HoWWrLDvrpjmxLjwUa94mGinPMW8nPUSDdXJpY74ugzexkV31__-FDVJg_j3cirJO0phDYW15biucTJFr1CjqCMFm5WwfCxAn9-nmwwB6LXQ8" alt="code output"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Destructuring Props Object&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The JavaScript ES6 destructuring syntax can extract specific props from the props object. Here, the name and age props are directly removed.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const Profiles = ({ name, age }) =&amp;gt; {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;
        Hello {name}. Your age is {age}
      &amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  )
}

Profiles.propTypes = {
  name: propTypes.node.isRequired,
  age: propTypes.node.isRequired
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace the code inside the &lt;code&gt;div&lt;/code&gt; element in the parent component with the code below.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Profiles name={name} age={age} /&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Setting Default Value for a Prop&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Default values can be set to props in the child component, providing a fallback when nothing is specified. For instance, in the Profile component, you can set a default value of "John Doe" to the name prop. If not defined, the name prop will assume the value of "John Doe". Check out the code below for an example of how this works.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const Profiles = ({ name = 'John Doe', age }) =&amp;gt; { 
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Propagate Props with JSX Spread Syntax&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;JSX spread syntax is a technique for passing properties from parent and child components. This involves the parent component collecting and spreading the properties to the child component. You will examine this technique in the example below.&lt;/p&gt;

&lt;p&gt;Firstly, import the &lt;code&gt;PropTypes&lt;/code&gt; module from the &lt;code&gt;prop-types&lt;/code&gt; package. It defines the expected type of prop for the component.&lt;/p&gt;

&lt;p&gt;Then create a Component named &lt;code&gt;Avatar&lt;/code&gt; that receives a prop and displays information about a person. The received prop object is broken down into the &lt;code&gt;person&lt;/code&gt; prop. Then, the &lt;code&gt;div&lt;/code&gt; element in the component gets displayed on the screen.&lt;/p&gt;

&lt;p&gt;Finally, for this component, assign a &lt;code&gt;propTypes&lt;/code&gt; property to it. This property confirms the incoming &lt;code&gt;person&lt;/code&gt; prop. The &lt;code&gt;person&lt;/code&gt; prop can be of various types and is required when the component is being utilized.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import PropTypes from "prop-types"

const Avatar = (props) =&amp;gt; {
  const { person } = props

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;Name: {person.name}&amp;lt;/p&amp;gt;
      &amp;lt;p&amp;gt;Age: {person.age}&amp;lt;/p&amp;gt;
      &amp;lt;p&amp;gt;Occupation: {person.occupation}&amp;lt;/p&amp;gt;
      &amp;lt;p&amp;gt;Country: {person.country}&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  )
}

Avatar.propTypes = {
  person: PropTypes.node.isRequired,
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a new component called &lt;code&gt;Profile&lt;/code&gt;. This component will receive the prop and display the &lt;code&gt;Avatar&lt;/code&gt; component using the spread syntax instead of passing individual items to be displayed separately.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function Profile(props) {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;Avatar {...props} /&amp;gt;
    &amp;lt;/div&amp;gt;
  )
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To complete this setup, it is necessary to create the final component named &lt;code&gt;App&lt;/code&gt;. This component defines an object that includes the &lt;code&gt;avatarProps&lt;/code&gt; object with multiple properties. The &lt;code&gt;App&lt;/code&gt; component displays the &lt;code&gt;Profile&lt;/code&gt; component that accepts the &lt;code&gt;avatarProps&lt;/code&gt; through the spread syntax.&lt;/p&gt;

&lt;p&gt;Always remember to export the parent component to ensure proper functionality.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export default App

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is what the code outputs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2F-GgMBi9wGsKcvO-TGB_lzkVMHDR9TOBAkgETFFQUAHXCNk0Vg9FzmbSmze8GrdmWpTUM_Ue3tciGwNZSnWjKd3c3ahVcb2Pi5I6m11Tnk77ZLqzZ3n9pqEhN_w7FOd4t0Zwmbb4Sv9fjPxNUeuTMgDE" 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%2Flh3.googleusercontent.com%2F-GgMBi9wGsKcvO-TGB_lzkVMHDR9TOBAkgETFFQUAHXCNk0Vg9FzmbSmze8GrdmWpTUM_Ue3tciGwNZSnWjKd3c3ahVcb2Pi5I6m11Tnk77ZLqzZ3n9pqEhN_w7FOd4t0Zwmbb4Sv9fjPxNUeuTMgDE" alt="code output"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the example above, the spread syntax was used twice. This syntax allows all props received to be passed from the &lt;code&gt;Profile&lt;/code&gt; component to the &lt;code&gt;Avatar&lt;/code&gt; Component at once, eliminating the need to list them individually.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;avatarProps&lt;/code&gt; object is passed to the &lt;code&gt;Profile&lt;/code&gt; component using the spread syntax with its properties being transferred as separate props to the &lt;code&gt;Profile&lt;/code&gt; component. This approach offers the benefit of forwarding all props from the top component (i.e., the &lt;em&gt;App&lt;/em&gt; component) to the &lt;code&gt;Avatar&lt;/code&gt; component.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Passing JSX as Children Prop&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To render JSX content within a component, JSX is used as a child prop. It is placed between the opening and closing tags of the component, and it is treated as dynamic content by the component's rendering logic.&lt;/p&gt;

&lt;p&gt;To implement this, create a component named &lt;code&gt;Modal&lt;/code&gt;that uses the &lt;code&gt;children&lt;/code&gt; prop to receive and render JSX content passed between its tags. Note that the &lt;code&gt;children&lt;/code&gt; must be provided when using the Modal component. It is necessary to import &lt;code&gt;PropTypes&lt;/code&gt; for this purpose.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import PropTypes from "prop-types"

const Modal = ({ children }) =&amp;gt; {
  return &amp;lt;div&amp;gt;{children}&amp;lt;/div&amp;gt;
}

Modal.propTypes = {
  children: PropTypes.node.isRequired,
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;Modal&lt;/code&gt; component is rendered by the &lt;code&gt;App&lt;/code&gt; component with JSX elements defined between its opening and closing tags.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;src/App.jsx&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const App = () =&amp;gt; {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;Modal&amp;gt;
        &amp;lt;h2&amp;gt;Welcome to the Modal!&amp;lt;/h2&amp;gt;
        &amp;lt;p&amp;gt;This is some content within the modal.&amp;lt;/p&amp;gt;
      &amp;lt;/Modal&amp;gt;
    &amp;lt;/div&amp;gt;
  )
}

export default App

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is what the code outputs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FIcpW99T2vtbByJ3_qbOhB8hCs3uO00u7oaDPKhL8yctsxz8eDdMesKg9wHAMbHXFc9JIe3G_ZgX1fOdC7CUoLGcMmQlFfoAONPHNOgHfPK_45Rr1q3y7wVnR02ePpu8yR-0rf15YHHGJgbZ_V2EKtx8" 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%2Flh4.googleusercontent.com%2FIcpW99T2vtbByJ3_qbOhB8hCs3uO00u7oaDPKhL8yctsxz8eDdMesKg9wHAMbHXFc9JIe3G_ZgX1fOdC7CUoLGcMmQlFfoAONPHNOgHfPK_45Rr1q3y7wVnR02ePpu8yR-0rf15YHHGJgbZ_V2EKtx8"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;Conclusion.&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;This guide introduced you to the world of React Components and the role they play in displaying dynamic user interfaces. You were introduced to the world of props and clarified the concept behind it.&lt;/p&gt;

&lt;p&gt;Understanding how info and data are passed between parent and child components will come in handy in your React mastering journey. It gets more intricate than this going forward, so brace yourselves.&lt;/p&gt;

&lt;p&gt;The good news is that it builds upon the foundation already treated in this guide. What would you like to learn about next? Let me know in the comments.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Found this article helpful?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Feel free to find me around the web for questions and clarifications.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://twitter.com/iamaamunir?t=idkHdYacam5AHz5z1myBrQ&amp;amp;s=09" rel="noopener noreferrer"&gt;&lt;strong&gt;Follow on Twitter&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.linkedin.com/in/munir-a-abdullahi-917051203" rel="noopener noreferrer"&gt;&lt;strong&gt;Connect on LinkedIn&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/iamaamunir" rel="noopener noreferrer"&gt;&lt;strong&gt;Projects on&lt;/strong&gt;  &lt;strong&gt;GitHub&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for reading to the end.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>frontend</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Career Advice</title>
      <dc:creator>Munir Abdullahi</dc:creator>
      <pubDate>Wed, 02 Mar 2022 15:50:18 +0000</pubDate>
      <link>https://dev.to/iamaamunir/career-advice-3gg5</link>
      <guid>https://dev.to/iamaamunir/career-advice-3gg5</guid>
      <description>&lt;p&gt;Hello everyone. I just got enrolled in a software engineering school for a one-year diploma. I initially chose cloud engineering but I am having a second thought on it. The school also offers frontend and backend. What are the job opportunities in cloud engineering and easy is it for me to get a job in the cloud? Also is it mandatory I get certified in one of the cloud providers like aws?&lt;/p&gt;

&lt;h1&gt;
  
  
  cloudengineering #frontend #tech
&lt;/h1&gt;

</description>
    </item>
  </channel>
</rss>
