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
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
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
useEffect, or employing state management libraries like Redux, the popular client state library, to store and provide asynchronous data throughout an application.
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.
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.
Before diving into some core concepts related to building Web APIs with Django, let’s define what Django is and how…
Note: This post loosely follows Brad Traversy’s Python crash course
Containers for values
x = 10
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.
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.
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.