When it comes to publishing your React code. There are so many factors to consider and many options are available out there.

As a team leads, startup advisor, CTO, or any technology professional you may need to make a decision, what should you pick?

In this article, you will be learning about some of the best options you can pick select your React starter project, your options, as well as walk you through the process of creating one example of a SPA React App as well as SSR React App and publish the code.

Image for post
Image for post

How this article is organized?

This article is split into


Server-side rendering (SSL) is the ability of an App to display content on the server instead of rendering it in the browser such as in Single page application (SPA).

In this article I will show you how to set a minimum starter React SSL project with Nextjs and including TypeScript as Type Checker, as well as adding d3 library.

Image for post
Image for post

Why

Using Single Page Applications (SPA) the rendering is done on the client side, and external resources usage is limited.

However, Dynamic d3 content demand improving user experience and increasing engagement.

There are cases where using SSR is preferred over SPA. There…


Many times, data visualization requires lots of resources to run. For instance, consider the feature that a common chart includes: animations, live data feed updating in runtime, a chart with thousands of records, or few charts placed on a single page.

These requirements can cause a sluggish experience, especially when the user is using less capable devices such as mobile or computer with low memory or a slow network connection.

In this article, I will show you the performance knick-knacks you can do to provide a better user experience.

Image for post
Image for post

When building charts, it’s important to give considerations to the footprint…


As a team leads, startup advisor, CTO, or any technology professional you may need to make a decision, what should you use when you need a chart in a React-based project.

Yes, d3 is the standard when it comes to creating charts. Combining React with d3 gives an additional benefit as taking advantage of the React VDOM can ensure the DOM is only getting updated when needed as well as including other React libraries.

In this article, I will be exploring the most popular React with d3 libraries and show you a simple implementation.

Image for post
Image for post
Image Credit: igamingbusiness.com

Why use Ready-made components?

There are gazillion libraries out there…


A force-directed graph is often used for drawing graphs pleasing the eye. Using a combination of React with d3 is great since each library can be used for different things. It’s bringing the best of all worlds. Adding TypeScript as a type checker to the mix helps ensure the types are well defined and avoid potential bugs. Total goodness!

In this tutorial, I will be showing you how to create a simple force graph that can be used to show a relationship between nodes and link them together.

What we will be building?

The final results can be seen below;

Image for post
Image for post

The technology stack is opinionated…


A world map chart is a great way to be used as the background to show items globally. Integrating d3 + React and TS can create a readable code that takes the best of all worlds. In this article, I will show you how to work with a world map chart to create a rotating map and assign dots based on coordinates.

Image for post
Image for post

In this tutorial, I will show you how to work with a world map using React, d3, and TS as type checker. I broke down the process into steps. …


d3 is the standard for creating charts, and if you are serious about charts and creating custom charts you can’t escape learning d3. React is made to integrate with other libraries such as d3, however, adding TypeScript to the mix does require special attention. In the next set of two articles, I will be posting here in Medium I will show you how to create popular and basic charts with React, TS, and d3. That combo needs some special attention vs using JS and this article reflects things that I found to work best.

Check part I — which includes…


d3 is the standard for creating charts, and if you are serious about charts and creating custom charts you can’t escape learning d3. React is made to integrate with other libraries such as d3, however, adding TypeScript to the mix does require special attention. In the next set of two articles, I will be posting here in Medium I will show you how to create popular and basic charts with React, TS, and d3. That combo needs some special attention vs using JS and this article reflects things that I found to work best.

Image for post
Image for post

Why Data Viz?

· Business intelligence with data visualization…


In this article, my mission is to show you what are your options and break the process of creating charts into smaller chunk bites, so you can understand the process better when getting started with d3 and React. The process can be broken into three layers: data, view, and user interaction.

Image for post
Image for post

At any part of these layers, you can either use React, d3, or other libraries that integrate with React. Having options is great, however, it can also be confusing of what to use and when.

I put up two parts articles to help you get started with React &…


Integrating interactive data visualizations (aka Data Viz) components can help tell your story better. React is already set to be able to animate Scalable Vector Graphics (SVG), HTML, and Canvas elements, this is nothing new.

Animating SVG, Canvas and HTML have been done for years with HTML, and pure JavaScript. React allow HTML, CSS, and JavaScript capabilities as well as know-how to play nicely with other APIs and add-ons to help animate the view.

I put up two parts articles to help you get started with React & d3 and see what are your options when it comes to creating…

Eli Elad Elrom

Technologist, dive instructor, pilot — https://EliElrom.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