DEV Community: Victoria Lima De Carvalho

MUI Material Styling: How to Implement it in Your React App

Victoria Lima De Carvalho — Thu, 08 May 2025 19:23:54 +0000

Let’s face it—building sleek, responsive user interfaces can be a tedious. But Material UI (MUI) can make it easier. If you're working with React, MUI is one of the best libraries out there for whipping up beautiful UIs. With its ready-made components and powerful styling tools (based on Google’s Material Design), your app won’t just work well—it’ll look good too.

In this guide, we'll dive into how to use MUI's styling solution and implement it in your React project.

Why MUI Styling?
MUI’s styling solution is one of the standout features of the library. It allows developers to style components using JavaScript, enabling better maintainability, dynamic theming, and a more seamless integration with the React ecosystem. The primary benefits include:

Customizability:
Easily tweak components to suit your brand.
Theming: Create a consistent design language using a global theme.
Responsiveness: MUI makes it easy to build responsive layouts.
Simplicity: The syntax and concepts are easy to grasp, especially for those already familiar with CSS-in-JS.

Getting Started with MUI Styling
Step 1: Install MUI in Your React Project
Before diving into styling, make sure that MUI is installed in your project. You can add MUI and its required dependencies by running:

npm install @mui/material @emotion/react @emotion/styled

This will install the core Material UI components and the Emotion library for styling (Emotion is the default styling engine for MUI).

Step 2: Basic Usage with sx Prop
MUI comes with the sx prop, a powerful and flexible way to style components directly. The sx prop is a shorthand for adding custom styles to components and is a key feature of MUI 5.

For example, to style a button:

import { Button } from '@mui/material';

function MyButton() {
  return (
    <Button sx={{ backgroundColor: 'blue', color: 'white', padding: '10px 20px' }}>
      Click Me
    </Button>
  );
}

The sx prop accepts an object with CSS properties, making it simple to apply inline styles. You can also leverage theme values directly in this object, such as theme.palette.primary.main.

Step 3: Theming with ThemeProvider
One of MUI’s greatest strengths is its theming capabilities. You can create a global theme that applies consistent styles across your application.

To create a theme, use MUI's createTheme function and wrap your application with the ThemeProvider component. Here's an example of setting up a custom theme:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // Custom primary color
    },
    secondary: {
      main: '#dc004e', // Custom secondary color
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary Button</Button>
      <Button color="secondary">Secondary Button</Button>
    </ThemeProvider>
  );
}

In this example:

We created a theme with custom primary and secondary colors.

The ThemeProvider component makes the theme available to all child components, allowing them to access theme values.

Step 4: Using styled API for Custom Components
MUI also provides the styled utility, which enables you to define custom styled components with JavaScript. This works similarly to CSS-in-JS libraries but with the full power of the MUI theme.

For instance, let’s create a custom-styled Card component:

import { styled } from '@mui/system';
import { Card, CardContent, Typography } from '@mui/material';

const CustomCard = styled(Card)(({ theme }) => ({
  backgroundColor: theme.palette.primary.light,
  padding: theme.spacing(3),
  boxShadow: theme.shadows[3],
}));

function App() {
  return (
    <CustomCard>
      <CardContent>
        <Typography variant="h5">Custom Card</Typography>
        <Typography variant="body2">This is a custom-styled card using MUI's styled API.</Typography>
      </CardContent>
    </CustomCard>
  );
}

In this example:

We used the styled function to create a custom Card component.

The styles are dynamically generated using the MUI theme.

Step 5: Responsive Design with MUI’s Grid System
MUI also includes a powerful grid system, which allows you to create responsive layouts easily.

Here’s an example of a responsive layout using MUI's Grid components:

import { Grid, Paper } from '@mui/material';

function ResponsiveLayout() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 1</Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 2</Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>Item 3</Paper>
      </Grid>
    </Grid>
  );
}

In this layout:

The Grid component is used to create a flexible and responsive grid system.
The xs, sm, and md props define how the items behave on different screen sizes (e.g., full width on small screens and one-third width on medium screens).

Best Practices

Use the sx prop for simple customizations: If you're making minor tweaks to an MUI component, the sx prop is the way to go.
Leverage the theme: Use the theme to define global design standards (e.g., color palette, typography) and ensure consistency throughout your app.
Modular styling: For complex components, consider using the styled API to create reusable, custom-styled components.
Stay responsive: MUI's grid and responsive utilities help you build layouts that adapt well to various screen sizes.

Core Takeaways
MUI’s styling system brings the best of both worlds: design consistency and development flexibility. Whether you’re fine-tuning a button or creating a full design system, MUI gives you the tools to do it fast—and do it right.

Sources:
Material UI

Using Formik- Beginner’s Guide to Connecting a React Formik Form to a Flask Backend

Victoria Lima De Carvalho — Tue, 15 Apr 2025 16:45:56 +0000

If you're just getting started with building full-stack web apps using Flask (Python) for your backend and React for your frontend, you might be wondering how to handle forms smoothly. Don't worry, that’s where Formik comes in.

What is Formik?
It's a very useful library for managing forms in React.

What We’re Building...
A basic registration form where a user enters their email and password.

The form will:

Validate input using Formik and Yup
Send the data to a Flask backend using fetch( ).
Handle the response from Flask and show a success or error message.

Step 1:
Flask Backend Setup
Here’s a simple Flask backend that accepts form data from the frontend.

# app.py
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Allows requests from your React app (very important!)

@app.route('/api/register', methods=['POST'])
def register():
    data = request.get_json()

    # Simple validation
    if not data.get('email') or not data.get('password'):
        return jsonify({'error': 'Email and password are required.'}), 400

    # In a real app, you'd save the data to a database here
    print("Received data:", data)

    return jsonify({'message': 'Registration successful!'}), 200

if __name__ == '__main__':
    app.run(debug=True)

Run this with:

python app.py

Step 2:
React Frontend with Formik (Using fetch)
Now we will build the form in React using Formik for dynamically rendering inputs, and Yup for validation schema.

First, install the necessary libraries in your project:

#in your React frontend
npm install formik yup

#in your Flask backend
pip install Flask flask-cors

Then, create the form:

// RegisterForm.jsx
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const RegisterForm = () => {
  const initialValues = {
    email: '',
    password: ''
  };

  const validationSchema = Yup.object({
    email: Yup.string().email('Invalid email format').required('Required'),
    password: Yup.string().min(6, 'Password must be at least 6 characters').required('Required')
  });

  const handleSubmit = async (values, { setSubmitting, resetForm }) => {
    try {
      const response = await fetch('http://localhost:5000/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(values)
      });

      const data = await response.json();

      if (!response.ok) {
        alert(`Error: ${data.error}`);
      } else {
        alert(data.message);
        resetForm();
      }
    } catch (error) {
      alert('Something went wrong. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div>
      <h2>Register</h2>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        <Form>
          <div>
            <label>Email:</label>
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" />
          </div>

          <div>
            <label>Password:</label>
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
          </div>

          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div>
  );
};

export default RegisterForm;

What’s Happening Here:

Formik manages the form’s state and handles submission for you.
Yup checks that the email is valid and the password isn’t too short.
We use fetch() to send the form data as JSON to our Flask server.
Flask checks the data and sends back a JSON response.

If everything goes well, we show a success message . If not, we show an error.

Core Takeaways:
Formik makes working with forms in React much easier, and it works really well with a Flask backend. With just a few lines of code (or 100 lines, depending on the form you're trying to build...), you can build a working form that validates user input and connects to your backend.

Sources:
Formik Docs

Understanding Private and Semi-Private Attributes in Python Classes

Victoria Lima De Carvalho — Thu, 27 Mar 2025 14:31:04 +0000

If you're learning Python and working with classes, you’ve probably heard the terms private and semi-private attributes. These are concepts that help you control how data inside a class can be accessed or modified. But, what do these terms really mean, and how do they work in Python?

In this blog post, I’ll explain what private and semi-private attributes are, how they are used, when to use them, and why they are important.

What Are Private and Semi-Private Attributes?
In Python, attributes (or variables) inside a class can be categorized as public, private, or semi-private.

Public attributes can be accessed and modified freely from outside the class.
Private attributes are intended to be hidden from the outside world.
Semi-private attributes are a bit of a soft rule, Python doesn’t enforce them, but they signal that the attribute should be treated as internal.

How to Define Private Attributes in Python
Private attributes are defined with two leading underscores (__) before the attribute name. This tells Python that the attribute is meant to be hidden from external access, although it's not a foolproof method. Python uses this to mangle the attribute name and make it a little more difficult to access directly (though not impossible).

(Note: Private attributes should not be confused with Dunder attributes, which have two leading and two trailing underscores, such as __ init __.)

Example:

class Dog:
    def __init__(self, name, age):  # The __init__ is a Dunder Attribute
        self.__name = name  # Private attribute
        self.__age = age    # Private attribute

    def get_name(self):  # Public method to access private attribute
        return self.__name

    def get_age(self):   # Public method to access private attribute
        return self.__age

    def set_age(self, age):  # Public method to modify private attribute
        if age > 0:
            self.__age = age
        else:
            print("Age must be positive.")

In this example, __name and __age are private attributes. We use getter and setter methods (get_name, get_age, and set_age) to allow controlled access and modification of these attributes.

Why Use Private Attributes?
So, why go through the trouble of making attributes private in the first place? Here’s why:

Encapsulation: Private attributes help you hide the internal details of your class, keeping your data safe from accidental or malicious changes.
Control: By using private attributes, you can control how and when your data gets accessed or updated. For example, the set_age method ensures the age attribute can’t be set to an invalid value.
Security: By restricting access to an attribute, you reduce the risk of its value being changed in unexpected ways.

Trying to Access Private Attributes
If you try to directly access a private attribute, Python will raise an error:

dog = Dog("Max", 5)

# Trying to access the private attribute directly will raise an error
print(dog.__name)  # AttributeError: 'Dog' object has no attribute '__name'

Instead, you should use the public methods (get_name(), get_age()) to access private attributes.

Name Mangling
Python uses a feature called name mangling to make private attributes harder to access directly. When you define an attribute with two leading underscores (e.g., __name), Python internally changes its name by adding the class name prefix (e.g., _Dog __name). This is done to prevent accidental access or modification from outside the class.

While you can technically access the mangled attribute using its new name (e.g., dog._ Dog__name), it’s strongly discouraged (just don't). This breaks the encapsulation principle and defeats the purpose of making the attribute private in the first place.

Semi-Private Attributes
Semi-private attributes are defined with a single underscore (_) before the attribute name. This is a convention in Python indicating that the attribute is intended for internal use within the class. However, unlike private attributes, semi-private attributes can still be accessed from outside the class, and Python doesn’t enforce any restriction. That being said, the goal of defining the attribute as semi-private is to alert other developers not to modify the attribute directly from outside the class.

Example:

class Car:
    def __init__(self, make, model):
        self._make = make  # Semi-private attribute
        self._model = model  # Semi-private attribute

Even though you can access _make and _model directly, it’s best to think of them as internal details of the class and avoid modifying them from the outside.

When to Use Private and Semi-Private Attributes
Here’s when you should use private and semi-private attributes:

Private Attributes: These are useful when you need to protect certain data from being accessed or changed directly. For example, if you have an attribute like age, you might want to make it private to ensure no one messes with it directly. You can then create a method like set_age() to validate the input before updating the attribute.
Semi-Private Attributes: These are more like a suggestion that the attribute is for internal use. While you can technically access or modify them, it’s generally better to leave them alone. The single underscore is a "soft" rule, so don’t take it too literally, but it’s a good practice to respect the convention.

Private Methods vs. Private Attributes
Private methods and private attributes are similar in that they both follow the same naming convention with two leading underscores to signal they’re meant for internal use only. However, there’s an important distinction:

Private methods are functions that perform actions or calculations within the class.
Private attributes are variables that store data related to the class.

Even though they serve different purposes (actions vs. data), they both follow the same visibility rules.

But, remember, Python doesn't strictly enforce access control. You could still access private methods or attributes using name mangling (e.g., _ ClassName __ method or _ ClassName __ attribute). It’s better to rely on the conventions, though.

Core Takeaways:
In Python, private and semi-private attributes are useful tools to manage how data is accessed and modified within your classes.

Private attributes (with two leading underscores) are meant to be hidden from external access, and you should interact with them using public methods.

Semi-private attributes (with one leading underscore) are intended for internal use but are not strictly off-limits.

By using these conventions, you can create cleaner, safer, and more maintainable code!

Sources:
w3resources
python.docs:private variables
python.docs:private name mangling
geeksforgeeks

Destructuring of Props in React.js

Victoria Lima De Carvalho — Thu, 06 Mar 2025 17:51:36 +0000

In React, props (short for "properties") are a way to pass data from a parent component to a child component. Think of props as the way we send information down to components so they can use it.

Destructuring is a JavaScript feature that allows us to extract values from an object and assign them to variables.

Props contain different values that you pass to a component, like text, numbers, or even functions! Normally, you would have to refer to each prop by its name, like props.age, props.location, etc. But destructuring is a shortcut that allows you to grab only the props you want, in a simpler way, directly.

As i've learned to code, I try to implement ways to write a cleaner and more concise code. I've found that destructuring of props is an important practice for having a cleaner and more readable code.

Here's how you would usually access props without destructuring in a functional component:

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

In the example above, props is an object, and we access name using props.name.

Now, let’s make the code cleaner using destructuring. Instead of accessing props.name, we can directly extract the name property from props object:

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

Here’s what happens:

When you wrap the prop value in curly brackets {} like this: { name } you are destructuring! It takes the name property from the props object and creates a variable name that we can use directly in our function.
This is a shorter and cleaner way to write the code, especially when you have many props.

Why is this useful?
Provides for a cleaner code: Instead of writing props.name, you can just write { name }.

Less repetition: If you have several props, you don’t need to repeat props. every time.

Improves readability: Destructuring makes it clear which props are being used in the component.

Example with multiple props:
Let's say you have a component that takes multiple props:

function UserProfile({ name, age, location }) {
  return (
    <div>
      <h2>Name: {name}</h2>
      <h3>Age: {age}</h3>
      <p>Location: {location}</p>
    </div>
  );
}

Here, name, age, and location are being destructured from the props object. Instead of writing props.name, props.age, and props.location, you just directly access these values.

Core Takeaway:
Destructuring props makes your code cleaner, easier to read, and more concise.
You don’t need to use the props keyword every time you want to access a prop if you destructure them in the function parameters.

Sources:
(https://react.dev/learn/passing-props-to-a-component)
(https://www.w3schools.com/react/react_es6_destructuring.asp)
(https://www.dhiwise.com/post/component-development-with-react-destructuring-props)

Using the forEach() method in JS

Victoria Lima De Carvalho — Sun, 09 Feb 2025 18:25:36 +0000

The forEach() method is one of the most effective ways to go through all the elements in an array. With this method, you can perform specific actions on each element in the array.

A key benefit of using forEach() is that it allows you to work with each element without needing to create a new array. This method is useful when you need to update a variable, print something to the console, or modify the DOM.
One of the most important things to remember, is that forEach() doesn’t return a new array.

Another advantage of using the forEach() method, is that it doesn’t require the index of each item. It’s a simpler and faster way to loop through an array. So when you're writing you code, you can know that the forEach() method will iterate through the arrays without needing to have a starting index.

In arrays with empty slots, forEach() will ignore them. A regular for loop will still process those empty slots, even if they don’t contain any values in them. This is another way that using forEach() can be beneficial.

One thing to keep in mind is that you cannot stop a forEach() loop once it starts. So, if you need to break out of the loop early, or stop the loop from continuing at a certain determined point, forEach() won’t work for you.

Another important fact to remember about this method, is that forEach() only works with functions that run synchronously. This means that it won’t wait for promises or asynchronous functions to finish before it starts the method of iterating through the elements in the array. So remember to be mindful of that when combining forEach() with asynchronous code.

Here’s an example of how forEach() is typically written:

array.forEach(callback(currentValue, index, array), thisArg)

Sources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://www.geeksforgeeks.org/difference-between-foreach-and-for-loop-in-javascript/

https://www.w3schools.com/jsref/jsref_foreach.asp