Interested in a new UI library that’s not Bootstrap, MaterialUI, or SemanticUI? Look no further than these two highlighted libraries which provide easy customization for a unique interface

Mantine 2.0

This library offers ‘fully featured React components and hooks’, which are customizable and make it easy and fast to get an accessible application up and running.

Its components include all the essentials, including: buttons, modals, drawers, inputs, tabs, accordions, cards.


Exploring React Query’s power to replace boilerplate with only a handful of code when handling async actions

What is React Query

Often referred to as React’s missing data-fetching library, React Query handles fetching, caching, synchronizing and updating server state in a relatively simple manner with just a few lines of code.

Developers can handle managing state in a variety of ways, including the use of React hooks like useState or useEffect, or employing state management libraries like Redux, the popular client state library, to store and provide asynchronous data throughout an application.

Server State vs. Client State

State management libraries work well with client state, however they lack efficiency…


A step-by-step guide at how to set up a Django backend using the Django REST framework to integrate with a React frontend

After getting warmed up with Django by making a simple to-do app using React, I wanted to level up slightly and learn how to use more than one model — to begin to understand how larger projects with more relational data tables are handled. Follow along to learn how to get a Django API with a one-to-many model relationship up and running.

What You’ll Need

You will need to have Python 3 and Node.js installed — follow the links below to…


Defining the Django REST Framework (DRF), Django’s MVT design pattern, and how it compares to the more typical MVC architecture

This week to experiment with a new backend framework, I decided to build the usual to-do app powered by a Django on the backend and React on the frontend. In the process, I started learning more about the Django REST Framework, a powerful toolkit for building Web APIs needed on the server side, as well as its Model-View-Template design architecture.

What is Django?

Before diving into some core concepts related to building Web APIs with Django, let’s define what Django is and how…


A collection of the basics for learning Python, including some main concepts spanning from data types to parsing JSON.

Note: This post loosely follows Brad Traversy’s Python crash course

Variables

Containers for values

  • No command for declaring a variable (i.e. var/const/let ), instead a variable is created when it is assigned a value → x = 10
  • Variables are case sensitive
  • Variables must start with a letter or an underscore
  • Variables can contain numbers but cannot start with a number

Data Types

Strings — surrounded by quotation marks

Insert a variable into a string (i.e. concatenate):

state = 'Pennsylvania'print('I live in ' + state)
# returns I live in Pennsylvania

With this method, we can only insert a variable of a string data type(cannot insert a number…


Understanding how the scripting language gets implemented with React by setting up a habit tracking app.

After learning that the 2nd most loved programming language of 2020 was TypeScript, naturally, for many early JavaScript developers discovering TypeScript like myself, the question lends itself to whether and how engineers are using it with the 2nd most loved and most used JavaScript framework/library, aka React.

Many in the community believe the two go well together; one developer offers an explanation as to why:

JSX is syntactic sugar. Every JSX element you open and pass properties through, is nothing but a function call…


Behind Rust, TypeScript came in as the second most loved programming language in Stack Overflow’s 2020 Developer Survey. I decided to join the hype.

Javascript icon within a larger Typescript icon
Javascript icon within a larger Typescript icon

The simple what and why of TypeScript

TypeScript was developed by Microsoft and released in 2012 to address various shortcomings with JavaScript when it comes to building large-scale applications, namely the fact that JavaScript has no way of checking and informing developers when one area of code will break other areas, like a strict language will do. TypeScript, as a static scripting language, adds power to Javascript as it will check your code for errors, similar to a stricter programming language.

Using the…


A case for CSS Modules and how to implement them into your React App

If you are relatively new to CSS, you may or may not have encountered the significant problem that occurs as an application’s style expands— since CSS rules follow global scope, two or more classes of the same name will collide. Handling multiple stylesheets and keeping track of naming conventions in CSS files can get burdensome, and if you aren’t careful enough, you are bound to encounter some conflicts from identical class names.

CSS Modules can solve these errors likely to appear, especially as your application grows…


An introduction to unit testing

Unit testing is the process of isolating and testing a small, specific piece, or unit, of code, to ensure each piece is running as expected. In object-oriented programming, an entire class is considered a unit, while functional programming considers an individual method or function. Unit tests are generally differentiated from integration tests, which verify that the units are working properly as a whole.

As a fundamental part of the Test-Driven Development (TDD) methodology, unit tests are written before the actual code is written (the “test-first” approach). These tests drive the creation and design of the…


A how-to guide for adding this state management library to an existing React app

Yesterday, I made a simple to-do app using React and a Rails backend, which has some functionality of adding and deleting tasks. Though this is small application without large amounts of application state that are needed in many places (in other words, not the best candidate for using a state management library), I thought it would be an easy and clear example of how to add Redux hooks to manage state.

  • Note, this tutorial will not go over the backend setup, but you can take a…

Sara Bastian

full-stack developer exploring how software can solve real-world problems | https://sarabastian.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store