DEV Community: Maria Mendonca

The Evolution of React: A Guide to Class vs. Functional Components

Maria Mendonca — Tue, 23 Sep 2025 06:30:15 +0000

Hey guys!

It's great to be back! After a short break, I'm thrilled to dive back into the world of React with a topic that's central to modern web development: the big shift from class components to functional ones.

The evolution of React from class components to functional components isn't just a simple facelift or a change in syntax—it represents a profound shift in how we approach component design and manage complexity. It's an intentional move toward making React codebases more predictable, understandable, and reusable.

The Problem with Class Components

Before the introduction of Hooks, the primary way to build stateful, complex components was through the class component model. While powerful, they introduced several pain points that often led to confusion and verbose code:

Complex this Context: Class components rely heavily on the JavaScript class syntax, which brings with it the tricky concept of the this keyword. Developers constantly had to worry about correctly binding methods in the constructor to ensure this referred to the component instance inside event handlers. This was a frequent source of bugs, especially for developers new to React or JavaScript.
Confusing Lifecycle Methods: To manage side effects (like data fetching, setting up subscriptions, or manual DOM manipulation), you had to spread related logic across several specialized lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount. For example, setting up a subscription in componentDidMount and tearing it down in componentWillUnmount meant two pieces of related logic were physically separated, making components difficult to read and maintain.
Logic Reuse Difficulty: Sharing non-visual, stateful logic between components was cumbersome. It typically required implementing advanced patterns like Higher-Order Components (HOCs) or Render Props. While effective, these patterns often resulted in a deeply nested "wrapper hell" in the component tree, hurting code readability and making it difficult to trace data flow.

Image generated using Gemini

The Rise of Functional Components

Initially, functional components were a simple alternative, sometimes called "stateless functional components." They were just JavaScript functions that accepted props and returned JSX. They were excellent for presentational logic but couldn't hold their own state or manage side effects—they were functionally incomplete for complex tasks.

This changed everything.

The modern functional component is the intended future of React. It provides a cleaner, simpler, and more direct way to express component logic. By embracing functions as the primary building block, React can optimize rendering and allow developers to collocate related logic, regardless of whether it’s state management or a side effect.

The Magic of Hooks: Enabling Stateful Functions

The key to the entire evolution is Hooks. Hooks are special functions that let you "hook into" React features like state and the component lifecycle from within a functional component. They are what finally gave functional components parity with—and eventually superiority over—class components. We will be learning about Hooks in Part 2 of the series.

The Comparison

Let us see the code comparison of class based and functional based components with a simplest example of "Hello, World" since we are currently working with the program basics.

Class Component
This approach uses a JavaScript class that extends React.Component. It must include a render() method that returns the JSX you want to display.

import React from 'react';

class Welcome extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

export default HelloWorld;

Key Points:

It's a JavaScript class.
You must import React and extend React.Component.
The JSX is returned from a render() method.

Functional Component
This is a standard JavaScript function that accepts props as an argument and returns JSX. This is the modern and recommended approach for writing React components.

import React from 'react';

function Welcome({name}) {
  return (
    <h1>Hello, {name}!</h1>
  );
}

export default HelloWorld;

Key Points:

It's a simple JavaScript function.
It takes no arguments in this simple case.
The JSX is returned directly by the function.

Homework Challenge:

To make sure these concepts stick, here is a small challenge for you:

Image created using Canva

This hands-on exercise will make the transition from class to functional components crystal clear.

How to Submit Your Solution
If you want to share your work or get feedback, you can share a screenshot of your finished project in the comments below. You can also paste your updated App.jsx code directly into the discussion to get feedback from me and the community. The next article will have the answer to this homework problem.

The Upcoming Article will cover the topic of reusability and event handling. Stay tunes and See you on Friday!

Reference

React Official Documentation: Legacy Documentation

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation:

LinkedIn: linkedin.com/in/mariamendonca/
GitHub: github.com/mendoncamaria
X: @mmendonca0610
Mastodon Social: @mendoncamaria

Passing Data with Props: Building Parent-Child Components

Maria Mendonca — Tue, 09 Sep 2025 06:30:00 +0000

Hey!

If you've been following along, you've successfully created your first React component—the one that says "Hello, World!" It was a great first step, but that component is static. It will always say the same thing, no matter what.

In this article, we're going to unlock the real magic of React. We'll dive into props, which are the key to making your components dynamic and reusable. Think of props as a way to pass data into a component, just like you pass arguments into a function.

By the end of this article, you'll know how to create one component and then use it over and over with different data to display whatever you want.

Answer to previous Homework Problem

import './App.css'

function App() {

  return (
    <>
      <h1>Hello, World!</h1>
      // Replace The below code with your real name
      <h1>Your Name</h1>
    </>
  )
}

export default App

Let's dive in and start passing data!

The Problem with Static Components

In the last article, you successfully created your first React component—a simple <h1> tag that proudly says "Hello, World!". Congratulations! It was an amazing first step, but that component is static. It's hard-coded to always display the same text, no matter where you put it in your application.

This is a problem for building a real-world application. Think about a social media feed. Every post has a different username, profile picture, and text. You wouldn't want to create a brand new component for every single post. That would be incredibly inefficient and messy.

So, how do we solve this? How do we build one component and then use it over and over again with different data?

The answer is props.

You can think of a React component without props as being like a simple JavaScript function with no arguments; it always returns the same value. Props, which stand for "properties," are like the arguments you pass into a function. They allow you to customize a component's output without changing its core code, making it reusable and dynamic.

Just as a function can take different arguments to produce a different result, a component can take different props to render different data. This simple concept is the key to building powerful, flexible applications.

What Exactly Are Props?

Let's get a clear, concise definition of props.

The term props is short for properties. At their most basic, they are a mechanism for passing data from a parent component down to a child component.

Think of your components as a family tree. Data can flow down from the parent (App) to its children (Welcome), but not the other way around. A component can receive props from its parent and use that information to decide what to render.

A crucial rule to remember about props is that they are read-only. A child component receives the data, but it cannot change it. You can't modify props inside the component that receives them. This rule is a core part of React's design philosophy, as it ensures that your data flow is predictable and easy to reason about.

In short, props are how you give your components instructions about what they should display and how they should behave.

Your First Component with Props

It's time for the hands-on part! We're going to build a reusable Welcome component that can display a greeting with any name we give it.

Create a New File:
Inside your src folder, create a new file and name it Welcome.jsx. This is where we will write the code for our new component.

Add the Component Code:
Open the Welcome.jsx file and paste the following code into it.

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

Understanding the Code:

The Welcome function now takes an argument called props. This is a JavaScript object that will contain all the data passed to our component. Inside the return statement, we use curly braces {} to embed JavaScript directly into our JSX. When React renders this, it will replace {props.name} with the actual value of the name property.
We also added an export default statement. This makes our Welcome component available for other files (like App.jsx or similar) to import and use.

You have now successfully created a reusable component that is ready to receive and display data! In the next step, we'll see how to pass that data to it from the App component.

Using Your New Prop-Powered Component

Now that we have our Welcome component ready to receive data, let's see how we use it. We will work inside the App.jsx file, as this is the parent component that will pass data down to its children.

Import the New Component: At the top of your App.jsx file, add an import statement for our new component.

import Welcome from './Welcome';

Call the Component with Props: Now, clear out the existing content inside the return statement in your App.jsx file. We will replace it with our new Welcome component and pass it a name prop.

<Welcome name="World" />

Your App.jsx should look like this:

import './App.css'
import Welcome from './Welcome.jsx'

function App() {
  return (
    <>
      <Welcome name="World" />
    </>
  )
}

export default App

The Result:
The Browser should look like this:

Let's Check Reusability:
This is where you see the power of props! You can reuse your Welcome component as many times as you like, passing a different name prop each time. Try it yourself by adding a few more lines. Update the App.jsx file with the following code:

import './App.css'
import Welcome from './Welcome'

function App() {
  return (
    <>
      <Welcome name="John Doe" />
      <Welcome name="React" />
      <Welcome name="Friend" />
    </>
  )
}

export default App;

The results should look like this:

Most Common mistakes with props (Even I made this, sometimes do it now)

1. Trying to Change a Prop
A key rule of React is that props are read-only. You cannot change a prop's value inside the component that receives it. Trying to do so will result in an error or unexpected behavior.

Incorrect Way:

// In the child component
function Welcome(props) {
  // This is a big no-no!
  props.name = "New Name"; 
  return <h1>Hello, {props.name}</h1>;
}

Correct Way:
If a component needs to change its own data, that data should be managed with state, not props.

2. Passing Numbers and Booleans as Strings
When I first started using props, I made a very common mistake: I passed everything as a string. One day, I had a component that was supposed to render only when a prop was true, but it kept rendering even when I passed it "false".

After a lot of head-scratching, I found my mistake: in JavaScript, all non-empty strings are considered truthy. That means "false", "0", and " " are all treated as true in a boolean context. This is a crucial lesson to learn early on.

In JSX, anything you put inside double quotes "" is treated as a string literal. If you want to pass a JavaScript value—like a number, a boolean, an array, or an object—you must wrap it in curly braces {}.

Here's a comparison of the incorrect and correct ways to pass these values.

Incorrect Way:

// App.jsx
<UserCard age="25" /> 

// UserCard.jsx
// props.age will be the string "25", not the number 25.
function UserCard(props) {
  return <p>Age: {props.age}</p>;
}

Correct Way:

// App.jsx
<UserCard age={25} /> 

// UserCard.jsx
// props.age is the number 25.
function UserCard(props) {
  return <p>Age: {props.age}</p>;
}

3. Not Destructuring Props
While not technically a mistake, this is a common pattern that makes code verbose and less readable.

I remember my first component that took more than two props. The component needed to display the user's name, age, location, and a short bio.

I started writing the code using props.name, props.age, props.location, and props.bio. The code worked, but it started to feel messy. The repetition was tedious, and I constantly had to look at the top of the file to remember the exact prop names. I'd sometimes type props.userLocation instead of props.location, leading to a quick, confusing bug.

The code worked, but it was just a lot of mess. This is where destructuring comes in as a cleaner, more efficient solution.

Old way:

const UserProfile = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.bio}</p>
    </div>
  );
};

New Way:

const UserProfile = ({ name, bio }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{bio}</p>
    </div>
  );
};

The Takeaway:

We just did something powerful. We took our simple, static "Hello, World" program and made it dynamic and reusable. This is the core magic of React. Instead of writing a new component for every single piece of content, we can use a single component and simply pass in different props to customize it.

You've now learned that:

Props are like arguments for your components.
They are passed from a parent component to a child component.
They are read-only, meaning the child component can use them but cannot change them.

This concept of passing data down is the foundation of building complex React applications.

Homework Challenge:

To make sure these concepts stick, here is a small challenge for you:

Image created using Canva

This exercise will help you get comfortable with passing multiple props to a single component and seeing the power of reusability firsthand.

How to Submit Your Solution

If you want to share your work or get feedback, you can share a screenshot of your finished project in the comments below. You can also paste your updated App.jsx code directly into the discussion to get feedback from me and the community. The next article will have the answer to this homework problem.

Upcoming Article

Congratulations on finishing Props! You're now a pro at using props to make your components dynamic. Now that you understand the fundamental building blocks, it's the perfect time to explore the history and future of React.

In the next article, "The Evolution of React: A Guide to Class vs. Functional Components", we'll dive into how React has changed over the years. We'll compare the old way of building components (class components) with the modern approach (functional components), so you understand why the community has moved in this direction.

See you on Friday!

Reference

Props by NetNinja: youtube.com/watch
React Official Documentation: Legacy Documentation

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation:

LinkedIn: linkedin.com/in/mariamendonca/
GitHub: github.com/mendoncamaria
X: @mmendonca0610
Mastodon Social: @mendoncamaria

The Syntax Scroll by Maria: A Developer's Weekly Digest

Maria Mendonca — Sat, 06 Sep 2025 09:50:00 +0000

Welcome to The Syntax Scroll!

In a world where tech news moves at the speed of light, it's easy to miss the most important stories. That's why I'm here to do the scrolling for you.

In this inaugural edition, we'll quickly catch you up on the top headlines from the past two weeks. From a major shake-up in the AI world to significant product releases from tech giants and important updates for developers, this is your bi-weekly dose of the tech news that actually matters.

Let's dive in.

OpenAI Launches New 'AI-Powered Jobs Platform' to Compete with LinkedIn

In a major move, OpenAI has announced plans to enter the professional networking space with a new AI-driven hiring service. The platform is designed to connect employers with AI-skilled talent, using advanced matching algorithms to pair candidates with job opportunities. This news signals a direct challenge to LinkedIn's dominance in the tech hiring market and highlights the growing importance of certified AI fluency.

OpenAI plans to take on LinkedIn with AI-powered jobs platform - The Times of India

Tech News News: ChatGPT creator OpenAI is now all set to take on professional social networking platform LinkedIn. OpenAI has announced its plans to launch OpenAI Job.

timesofindia.indiatimes.com

Google Cloud Study Reveals Over Half of All Executives Are Deploying AI Agents

A new report from Google Cloud reveals that more than half (52%) of executives surveyed have already deployed AI agents in their organizations. The study highlights that early adopters are seeing significant ROI in areas like customer service, marketing, and software development, with a growing focus on data privacy and security when choosing AI providers.

Google Cloud Study Reveals 52% of Executives Say Their Organizations Have Deployed AI Agents, Unlocking a New Wave of Business Value - Sep 4, 2025

Second-annual ROI of AI Study highlights a new group of 'agentic AI early adopters' achieving higher returns in agentic AI use cases, including those related to customer experience, marketing,...

googlecloudpresscorner.com

Apple's Record-Breaking $9 Billion Sales in India Signal Growing Importance

Apple has achieved record sales in India, with revenues reaching $9 billion. The strong performance highlights India's emergence as a key consumer market and a growing production hub for the iPhone maker.

Apple’s India sales hit record $9 billion after big retail push - The Economic Times

Apple's sales in India surged to a record $9 billion last fiscal year, driven by strong iPhone and MacBook demand. This growth, a 13% increase, comes as Apple navigates plateauing global sales and geopolitical uncertainties in China. The company is expanding its Indian retail presence with new stores and strategic initiatives like student discounts to overcome high taxes.

economictimes.indiatimes.com

Microsoft Launches Free AI-Skilling Initiatives in Collaboration with the White House

In a major push for AI education, Microsoft announced a series of new commitments to support the Presidential AI Challenge. This includes making Copilot free for college students for 12 months, offering free LinkedIn Learning AI courses for teachers and students, and providing grants to educators. The initiative aims to close the AI skills gap and prepare the workforce for the future.

New White House commitments empower teachers, students, and job seekers through AI skilling and learning  - Microsoft On the Issues

Microsoft unveils new commitments that support the Presidential AI Challenge and the AI Education Executive Order to empower teachers and students, build AI skills, and create economic opportunity.

blogs.microsoft.com

React Native 0.81 Released with Android 16 Support and Faster iOS Builds

For the mobile development community, the React Native team announced the release of version 0.81. This update includes support for Android 16 (API 36), experimental precompiled iOS builds for faster development, and stability improvements to the JavaScript API. The update marks a continued push for performance and developer experience in the cross-platform framework.

Blog · React Native

Blog

reactnative.dev

That's all for this week's Syntax Scroll! I hope this roundup helped you stay on top of the latest in tech. I'll be back next Saturday at 6 PM IST with another curated list of headlines. Until then, happy coding!

Your First React Component: JSX, Components, and the "Hello, World" Program

Maria Mendonca — Fri, 05 Sep 2025 06:30:00 +0000

Hey there!

If you've been following along, you've successfully completed the first and most important step: setting up your React project. Congratulations! You now have a blank canvas, and this is where the real fun begins.

In this article, we're going to take our first practical steps into the world of building UIs. We'll demystify JSX—the special syntax that makes React so powerful—and you'll learn how to create your very first component. By the end of this post, you'll have a running "Hello, World" program, and you'll understand the core pieces that make it work.

Ready to start coding? Let's go!

What Exactly Is a React Component?

At its heart, React is all about building with components. Think of it like a set of digital LEGO bricks. Instead of building your entire website from a single, giant block, you create small, self-contained pieces—like a button, a search bar, or a user profile card. You can then assemble and rearrange these pieces to create complex, interactive user interfaces. This modular approach is a fundamental shift in how we build for the web.

A component is simply a JavaScript function that returns a piece of UI. It's a fundamental concept that can be intimidating at first, but once you grasp it, you'll see why it's so powerful. As Alex Banks and Eve Porcello state in their book, Learning React, components are "the functional foundation of React’s architecture." They are the core building blocks that encapsulate both the logic and the presentation of your UI.

Here is an example of a simple React component named WelcomeMessage. It's just a standard JavaScript function that returns some JSX (the HTML-like code) to be rendered on the page.

import React from 'react';

// This is our WelcomeMessage component. 
// It's a JavaScript function.
function WelcomeMessage() {
  return (
    // It returns a piece of UI (JSX).
    <h1>Hello, React Learners!</h1>
  );
}

export default WelcomeMessage;

As you can see, a component is a reusable function that, when called, renders a part of your user interface. This simple concept is the foundation for everything we will build in this series.

Introducing JSX- HTML in Your JavaScript

The problem with building complex user interfaces is that the UI logic (the structure and content) and the business logic (what the app does) often become tangled. Writing all your UI elements using JavaScript can quickly become messy and difficult to read. It's like trying to draw a detailed picture using only written instructions instead of a pencil.

This is where JSX comes in. JSX (which stands for JavaScript XML) is a syntax extension for JavaScript. It allows you to write HTML-like code directly inside your JavaScript files, making your code much more readable and intuitive. It might look like a template language, but it’s actually the full power of JavaScript.

Consider this simple example. Without JSX, creating a heading element would look like this:

const element = React.createElement("h1", null, "Hello, world!");

With JSX, that same code becomes much cleaner and more familiar:

const element = <h1>Hello, world!</h1>;

As you can see, this syntax is much easier to read and write.

It’s important to remember a key rule: JSX is not HTML. It's a syntax that gets converted into regular JavaScript function calls behind the scenes. This conversion happens during the build process of your application.

Mistake I made while writing JSX for the first time

A crucial rule is that a React component can only return a single root element. This means all your JSX elements must be wrapped inside a single parent tag, like a <div> or a <main> tag. For example, this will not work:

A common and simple solution is to use a div tag, as you see below. This works because both elements are wrapped inside a single parent div:

However, a better solution is to use a React Fragment. A fragment lets you group children without adding an extra div to the HTML output. You can use the full <React.Fragment> tag or its shorthand, <>.

This is the recommended approach for a cleaner, more efficient component.

Your First "Hello, World" Program

You've successfully set up your development environment. Now, let's write our first lines of code.

Open Your Project in the Editor: Go to your code editor (like VS Code) and open the my-react-app folder you created.
Find the App.jsx File: In the project's file explorer, navigate to the src folder and open the App.jsx file. This is the main component file that Vite set up for you.
Review the Initial Code: Take a moment to look at the code. You'll see a JavaScript function called App that returns some HTML-like code (this is JSX!). This is your first component. Don't worry about understanding every line just yet.
Write Your First Code: We're going to make a simple change. Clear all the data inside the return and replace it with <h1>Hello, World!</h1>.

Before:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

After:

import './App.css'

function App() {

  return (
    <>
      <h1>Hello, World!</h1>
    </>
  )
}

export default App

See It in Action: Save the file. Your browser, which is running your development server, should automatically update to reflect your change. This is the magic of React's hot-reloading feature.

The Result
Congratulations! You've just created and rendered your first React component. The page in your browser should look like this:

The Takeaway

Kudos on completing your first hands-on dive into React! Before we wrap up, let's quickly recap the key concepts you've just learned and applied.

You've successfully created your first component. Remember that the App.jsx file we worked in is a component—the fundamental building block of any React application.
You used JSX. That HTML-like syntax you wrote directly inside your JavaScript file is called JSX. It's what makes React code so readable and easy to write.
You saw it in the browser! You told React what to render (<h1>Hello, World!</h1>) and it took care of the rest. This is the power of React’s declarative nature.

You are now officially a React developer! 🚀

Homework of the day

Now that you've seen how easy it is to make a change, it's time for a small challenge to solidify your new skills. Your Homework is:

Image created using Canva

How to Submit Your Solution

What's Next?

In our next article, we'll dive into an even more powerful concept: props. Props are how we make our components reusable and dynamic.

Think of it this way: the "Hello, World!" component you just created is a static template. It can only ever say "Hello, World!". In the next article, you'll learn how to use props as a way to send information from a parent component to a child component. This will allow you to create one Welcome component that can say "Hello, Alice!", "Hello, Bob!" or any other name, simply by passing in different data.

Get ready to learn how to pass data to components to build more flexible and powerful user interfaces. See you then! 👋

Reference

React Official Documentation: react.dev

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation:

LinkedIn: linkedin.com/in/mariamendonca/
GitHub: github.com/mendoncamaria
X: @mmendonca0610

I have recently joined Mastodon Social. Consider giving me a follow there: @mendoncamaria

React Fundamentals: What It Is, Why We Use It, and How to Get Started

Maria Mendonca — Mon, 01 Sep 2025 07:30:00 +0000

Hey there!

If you've been following along with our series, you've already seen the roadmap for our journey into the world of React. We've talked about the "why" and the "what," and now it's time to get our hands dirty.

In this article, we're making the exciting leap from theory to practice. We'll start with a simple, jargon-free explanation of what React is, explore why it has become the go-to choice for developers everywhere, and then walk you through the simple steps of setting up your very first React project. By the end of this post, you will have a live, running application on your computer.

Let's not wait any longer. Let's get started!

What Exactly Is React?

React isn't a full-fledged framework; it's a JavaScript library for building user interfaces (UIs) or the "view layer" of an application. It was created by Facebook to solve a big problem: making it easy to build complex, interactive UIs where the data changes all the time.

At its core, React is all about components. Think of a website like a Lego model. Instead of building the entire thing from a single block, you create smaller, self-contained pieces—like a button, a navigation bar, or a user profile card. You can then reuse and arrange these components to build your entire application. This modular approach makes your code cleaner and more manageable.

React also follows a declarative approach. Instead of telling the app how to change the UI (e.g., "find this button, change its color, then add text"), you simply tell it what the UI should look like for a given state (e.g., "when the user is logged in, show the profile button"). React handles all the complex updates behind the scenes.

Image generated using Gemini

Why Do Developers Use React?

So, why has React become so incredibly popular? It boils down to a few key advantages:

Reusability and Efficiency: Components can be reused across different parts of your application, saving you time and effort. This is the cornerstone of modern web development.
The Virtual DOM: When you update a React component, it doesn't immediately change the browser's Document Object Model (DOM). Instead, it updates a "virtual" representation of the DOM in memory. React then calculates the most efficient way to apply these changes to the real DOM, making your app incredibly fast.
Performance: The efficient updates from the Virtual DOM, combined with React's streamlined architecture, lead to highly performant and responsive applications.
Huge Ecosystem: React has a massive, active community. This means there's a huge library of tutorials, tools (like Next.js and Redux), and components available to help you solve almost any problem.

How to Get Started: Setting Up a React Project

Ready to get your hands dirty? The best way to start with React is by using a tool that sets up the entire project for you. We'll use Vite, a modern and very fast build tool.

Prerequisites
Ensure you have Node.js and a code editor, such as VS Code, installed on your machine. You can check if you have Node.js by running node -v in your terminal. If you do not have it, you can install it from the following links:
Install VS Code from here
Install Node.js from here

The Commands
Open your terminal and run the following command to create a new React project:

npm create vite@latest my-react-app

npm create vite@latest: This command uses npm (Node Package Manager) to run the latest version of the Vite project creation tool.
my-react-app: This is the name of your new project's folder. You can name it whatever you want.

The installation will look something like this:

Next, navigate into your new project folder and run the command to install all the necessary dependencies:

cd my-react-app
npm install

Now, it's time to run your application! Use the following command:

npm run dev

Your terminal will show you a local address where your app is running (usually http://localhost:5173). Open this URL in your browser.

This is going to be your folder structure:

├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── node_modules/
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

The Result:
Congratulations! You've successfully created your first React application. You should see a page like this in your browser:

Your First Homework

Congratulations on getting your first React app up and running! Now it's time to take the next step and make your first change to the code.

For this homework project, your task is simple:

Image created using Canva

This is a small but important first step that shows you how changes in your code instantly reflect in the browser.

What's Coming Next?

In our next article, we'll dive into the core of what makes React so powerful. We'll explore JSX, the special syntax that lets us write HTML-like code inside our JavaScript. Then, we'll use it to build our very first component and create our "Hello, World" program.

References

Official React Documentation: react.dev
MDN Javascript Documentation: developer.mozilla.org/JavaScript

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation:

LinkedIn: linkedin.com/in/mariamendonca/
GitHub: github.com/mendoncamaria
X: @mmendonca0610

See you in the next article! 👋

Part 1: The Absolute Basics - Your Roadmap to Getting Started

Maria Mendonca — Fri, 29 Aug 2025 12:30:00 +0000

Welcome back! In our last post, I introduced myself and outlined the purpose of this series: to simplify React and guide you through the common pitfalls I faced. This article is our roadmap for Part 1: The Absolute Basics.

Roadmap for Part 1: The Absolute Basics

This section will cover the essential building blocks of React, taking you from a complete beginner to someone who understands how to create and manage basic components.

Here’s a look at what we'll be diving into:

React Fundamentals & Your First Program. We’ll start with the very core of React and walk through writing your first program.
Parent-Child Relationships. This is a crucial concept. We'll explore how components interact and share data with one another.
The Evolution of React. We'll look at how React has evolved from class-based to function-based components and why this change is so important.
Component Reusability. Learn how to write flexible and reusable components to avoid repetitive code and make your applications more scalable.
A Primer on the Component Lifecycle. We'll get a foundational understanding of how components are created, updated, and destroyed. (Don't worry, we'll have an entire part dedicated to hooks later on!)
Debugging and Best Practices. I'll share some of my favorite tips and tricks for debugging and writing clean, maintainable code.
Your First Coding Challenge. We'll wrap up the section with a final project to test everything you've learned.

Image generated using Gemini

What You Should Know Before We Start

To get the most out of this series, you should have a basic understanding of HTML and CSS. A foundational knowledge of JavaScript is also helpful, but not required, as we’ll cover the necessary concepts as we go.

How We'll Learn

Each article will introduce a new concept, provide clear code examples, and include snippets you can easily copy and paste. At the end of each major concept, we'll build a mini-project together. I'll also give you a separate mini-project as homework to practice your new skills. You'll be able to submit your solutions in the comments for feedback.

The journey begins this Tuesday, where we'll dive into the core concepts of React, including why it's so popular and how to set up our first project.

Let's Connect!

If you're excited to begin your journey into the world of React, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation as we go on this journey together:

LinkedIn: linkedin.com/in/mariamendonca/
GitHub: github.com/mendoncamaria
X: @mmendonca0610

Everything React: From Basics to Advanced - Introduction to the Series

Maria Mendonca — Tue, 26 Aug 2025 06:30:00 +0000

Hi everyone! My name is Maria Mendonca, and I've been a ReactJS Developer for three years. Over that time, I've faced my share of challenges and celebrated my share of victories. Now, I'm excited to share everything I've learned with you. I'm starting this series to be your personal guide, helping you navigate the world of React and overcome the same hurdles I once did.

Why I'm Creating This Tutorial Series

There are countless React tutorials out there, but many can feel overwhelming or leave you stuck on a specific problem. I'm creating this series for two main reasons: to simplify complex concepts and to help people who feel stuck. I'll be sharing not just the "how" but also the "why," including the common pitfalls I encountered and how I overcame them. My hope is that by sharing my personal journey, you'll feel less alone in your struggles and more empowered to push through them.

Image generated using Gemini

Who Will Benefit from This Series?

This series is for two types of people: students who are just starting their React journey and developers who want to refresh their knowledge. While knowing the basics of JavaScript is a bonus, it's not a requirement—we'll be starting from scratch. As we go, I encourage you to ask questions in the comments, and I'll do my best to help you solve them.

How We'll Learn Together

This series is structured into six parts, with each part containing 7-8 articles. We'll progress from the basics to advanced concepts, and along the way, I'll give you "food for thought"—small projects to help you practice what you've learned. By the end of each part, you'll feel more confident in your skills. We'll also have recap articles dedicated to solving common pitfalls, so you'll be well-equipped to handle real-world challenges. By the end of the entire series, you'll have a solid foundation in React and the confidence to build your own projects.

Stay Tuned!

The journey begins this Friday! Make sure to follow me here so you don't miss any updates. I'll be posting new articles every Tuesday at 12:00 PM IST and Friday at 6:00 PM IST. We'll also be revisiting previous concepts, answering frequently asked questions, and even sharing bonus articles on tech trends. Our first article, "The Basics, Part 1: Roadmap," is coming this Friday. I can't wait to start this journey with you!

Let's Connect!

LinkedIn: linkedin.com/in/mariamendonca/
GitHub: github.com/mendoncamaria
X: @mmendonca0610

Hacktoberfest 2024 for Beginners: A Step-by-Step Guide

Maria Mendonca — Mon, 07 Oct 2024 12:43:54 +0000

Have you seen all the excitement around Hacktoberfest on social media? This annual event is a fantastic opportunity for developers of all levels, especially newcomers like myself, to jump into the world of open-source contributions. Here's a quick guide to get you registered and ready to participate!

Useful Links:

Signing Up for Hacktoberfest

As a first-time participant, I found the registration process straightforward. Here's how to sign up:

Head to the official Hacktoberfest website.
Click on "Start Hacking" in the navigation bar.
Alternatively, click on "Register"

Choosing Your Authentication Method

After clicking "Start Hacking" or "Register," you'll be prompted to choose an authentication method to link your Hacktoberfest account. Both GitHub and GitLab are popular options for open-source contributions.

In this example, we'll use GitHub for authentication.

Granting Access (Authorization)

Once you choose your authentication method (GitHub in this case), you'll be redirected to a secure authorization page from GitHub. This page asks your permission to allow Hacktoberfest to access your GitHub account information.

Why is this important? By granting access, Hacktoberfest can track your pull requests (contributions to open-source projects) during the event. These contributions will then be reflected in your Hacktoberfest profile, allowing you to see your progress towards earning the coveted Hacktoberfest badge!

Welcome to Your Hacktoberfest Profile!

This section walks you through completing your Hacktoberfest profile, which acts as your central hub for the event.

Here's a breakdown of the information you'll provide:

4.1 Details Confirmation:

Review your name and email address: Ensure these details match your preferred public identity and your linked account (GitHub/GitLab). You can choose to display your username or a different name.

4.2 Experience Level (Optional):

Share your experience with open-source contributions: This section is optional, but it helps organizers understand the participant pool. Choose "Newbie" if this is your first time, "Familiar" for some experience, or "Experienced" if you're a seasoned contributor.

4.3 Contribution Preferences (Optional):

Showcase your skills beyond coding: Hacktoberfest values all forms of contributions. You can contribute to code or no-code(Blogs, Video and Blog tutorials, Design documents, etc)

4.4 Student Status (Optional):

Identify yourself as a student if applicable: This information is optional but may be relevant for certain programs or resources offered during Hacktoberfest.

4.5 Primary Environment:

Tell us your role in the tech world: Select your primary environment from a list that includes options like Developer, QA, Designer, and more. Choose "Others" if your role isn't listed, or "Prefer not to say" if you'd rather not share.

4.6 Country of Participation:

Show your global presence: Select your country from the provided list to represent your location during Hacktoberfest.

4.7 Marketing Opt-Ins (Optional):

Choose your communication preferences: Decide if you want to receive emails from Hacktoberfest's main sponsors (DigitalOcean, Quira, and Cloudflare).

4.8 Terms and Conditions:

Review and agree to the terms: Hacktoberfest has guidelines for participation. Ensure you've read and agree to the Terms and Conditions before submitting your profile details.

4.9 Submit Your Profile:

Finalize your registration: Once you've reviewed and confirmed all the information, click the submit button to complete your Hacktoberfest profile.

Congratulations! You're now officially registered for Hacktoberfest and ready to start exploring open-source projects and making your contributions.

Here are some additional points to consider adding to your Hacktoberfest 2024 sign-up guide:

1. Benefits of Participating:

Gain valuable experience: Contribute to real-world projects and learn new skills.
Build your network: Connect with other developers and mentors.
Boost your resume: Showcase your open-source contributions.
Earn a Hacktoberfest badge: Show off your participation and dedication.

2. Finding Suitable Projects:

Explore popular platforms: GitHub, GitLab, and other open-source hosting platforms.
Use project search features: Filter based on keywords, programming languages, or difficulty level.
Look for projects with "Hacktoberfest" labels: These indicate projects that are actively welcoming contributions.

3. Making Contributions:

Read the project's documentation carefully: Understand the project's goals, guidelines, and expectations.
Ask questions if needed: Don't hesitate to reach out to project maintainers or other contributors for clarification.
Follow the project's coding style and conventions: Adhere to the established guidelines to ensure your contributions are consistent with the project's overall quality.
Create a pull request: Submit your changes for review by the project maintainers.

4. Additional Tips:

Encourage readers to join the Hacktoberfest community: Participate in discussions, ask questions, and support other contributors.
Mention any specific resources or tools that can be helpful: For example, GitHub's "Issues" tab is a great place to find potential contribution opportunities.
Remind readers to check the official Hacktoberfest website for updates and announcements.

DEV Community: Maria Mendonca

The Evolution of React: A Guide to Class vs. Functional Components

The Problem with Class Components

The Rise of Functional Components

The Magic of Hooks: Enabling Stateful Functions

The Comparison

Homework Challenge:

Reference

Let's Connect!

Passing Data with Props: Building Parent-Child Components

Answer to previous Homework Problem

The Problem with Static Components

What Exactly Are Props?

Your First Component with Props

Using Your New Prop-Powered Component

Most Common mistakes with props (Even I made this, sometimes do it now)

The Takeaway:

Homework Challenge:

How to Submit Your Solution

Upcoming Article

Reference

Let's Connect!

The Syntax Scroll by Maria: A Developer's Weekly Digest

OpenAI Launches New 'AI-Powered Jobs Platform' to Compete with LinkedIn

OpenAI plans to take on LinkedIn with AI-powered jobs platform - The Times of India

Google Cloud Study Reveals Over Half of All Executives Are Deploying AI Agents

Google Cloud Study Reveals 52% of Executives Say Their Organizations Have Deployed AI Agents, Unlocking a New Wave of Business Value - Sep 4, 2025

Apple's Record-Breaking $9 Billion Sales in India Signal Growing Importance

Apple’s India sales hit record $9 billion after big retail push - The Economic Times

Microsoft Launches Free AI-Skilling Initiatives in Collaboration with the White House

New White House commitments empower teachers, students, and job seekers through AI skilling and learning - Microsoft On the Issues

React Native 0.81 Released with Android 16 Support and Faster iOS Builds

Blog · React Native

Your First React Component: JSX, Components, and the "Hello, World" Program

What Exactly Is a React Component?

Introducing JSX- HTML in Your JavaScript

Mistake I made while writing JSX for the first time

Your First "Hello, World" Program

The Takeaway

Homework of the day

How to Submit Your Solution

What's Next?

Reference

Let's Connect!

React Fundamentals: What It Is, Why We Use It, and How to Get Started

What Exactly Is React?

Why Do Developers Use React?

How to Get Started: Setting Up a React Project

Your First Homework

What's Coming Next?

References

Let's Connect!

Part 1: The Absolute Basics - Your Roadmap to Getting Started

Roadmap for Part 1: The Absolute Basics

What You Should Know Before We Start

How We'll Learn

Let's Connect!

Everything React: From Basics to Advanced - Introduction to the Series

Why I'm Creating This Tutorial Series

Who Will Benefit from This Series?

How We'll Learn Together

Stay Tuned!

Let's Connect!

Hacktoberfest 2024 for Beginners: A Step-by-Step Guide

Useful Links:

Signing Up for Hacktoberfest

Choosing Your Authentication Method

Granting Access (Authorization)

Welcome to Your Hacktoberfest Profile!

4.1 Details Confirmation:

4.2 Experience Level (Optional):

4.3 Contribution Preferences (Optional):

4.4 Student Status (Optional):

4.5 Primary Environment:

4.6 Country of Participation:

4.7 Marketing Opt-Ins (Optional):

4.8 Terms and Conditions:

4.9 Submit Your Profile:

Here are some additional points to consider adding to your Hacktoberfest 2024 sign-up guide:

New White House commitments empower teachers, students, and job seekers through AI skilling and learning  - Microsoft On the Issues