A step-by-step guide to integrating Node.js, Express, and React.

The application

To go through the steps of connecting and running together a Node.js server with a React application, we will build a simple web application to search for artworks on the . We will set up a basic login page, save a token on the browser to keep the user signed in, and search for artworks by a keyword on AIC’s database. A log out button on the homepage will remove the token from local storage and redirect the user to the login page.

Some knowledge and experience with Node.js, Express and React is required.

Back end

First, we…


A non-intimidating guide in two parts to set up React Native projects with state management and static typing integration.

App preview
App preview

Concept

We’ll be cloning Instagram’s home UI to understand how to couple Redux and TypeScript with a React Native app. First, we’ll set up the logic for state management and static typing, and then build the UI with React functional components and hooks for internal state management.

Since the focus of this guide is on figuring out how to integrate the different libraries, a basic level of familiarity with each one is assumed.

You can see the .

Initialization

Since Redux…


Photo by on

Since the dawn of humanity, we have been constantly seeking new ways to portray the cultural environment that we live in and channel our feelings and fears about it through art. We can find traces of human creativity on the cave paintings that narrated daily life during the Stone Age, or in the giant sculptures from Ancient Egypt and the search for structure and proportion in Greek art, that would later serve as inspiration for art during the Renaissance years. …


Over the last few years the development and improvement of front-end frameworks and graphic design software, paired with an explosion of new sources of information and inspiration for web developers and designers, has brought the area to a peak where the limit is our own creativity. Web developers are forced to keep up with the new trends that come up every year in order to capture and retain the attention of new users.

To showcase the trends included in this post, I’ve created a

TL;DR: combine perspective and CSS3 transform functions to…


Hook
Hook
Photo by on

Up until React version 16.8, we could either define a new component as a JavaScript function, that received props (or inputs) and returned a React element describing what should be displayed on the screen, or as an with a local state and lifecycle methods.

Structuring our logic with React classes demands that we design components in terms of the lifecycle functions involved in each phase, from mounting to updating and, finally, unmounting. For instance, render(), the only required method in a React class component, is triggered every time our state changes (i.e. reacts), generating the content to be…

Leandro Ercoli

Computer Engineer — Full-stack web developer and multi-platform mobile developer

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