This article is also on dev.to and en.taishikato.com.

Hi, Taishi here 👋

How do you manage global data on React?
I used to use Redux for that, however, I currently use Context API for that purpose and I don’t even install redux and redux-related packages!

2 ways to implement it with Context API

I think there are 2 ways to make it happen.
A simple and complicated one.

I am gonna explain the simple one first ☝️

Imagine we want to manage the logged-in user data.

1. Use state variable

Let’s make ./src/context/userContext.js.

// File: ./src/context/userContext.js
import React, { useState, useEffect, createContext, useContext } from 'react';
import firebase from '../firebase/clientApp';

export const UserContext = createContext();

export…

Taishi here👋

Today I am going to write about how to implement Dark Mode with Tailwind CSS.\
Dark Mode is now one of the important features for usability and you should implement this on your website if you have not done yet.

Don’t worry. It’s quite easy!

BTW, the complete example on GitHub is here ✌️

Create your React app with CRA CLI

$ npx create-react-app dark

Let's host it on http://local:3000

$ cd dark
$ npm run start

Now I believe you see this page on your http://localhost:3000 🎉


What do you do when you are not sure that the object variable has the specific property?

My recent answer is Optional chaining.

What is Optional chaining?

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.

Optional chaining (?.) — JavaScript | MDN

I just quoted from MDN haha.

It basically makes it easier to access a property within an object.

How does it make React App development easier?

Imagine you fetch the user data from Firebase Authentication.

What’s gonna happen?

TypeError: Cannot read property 'dispayName' of…

Hi, Taishi here. How have you been?

For the past few months, I’ve been trying to launch a startup in Vancouver.

And the idea I am thinking of is the “virtual co-working space” concept.

I am validating this idea with a platform called Pragli as an MVP.

Because of COVID-19, I feel there are so many chat platforms are coming to the market.

This is some example.

All of these look so fun and interesting!

I wanna build an online community tool

I love making a place you can belong to online such as a social network service.

I think Pragli…


Oh…I am so sleepy…because I launched AskMakers 2.0 on Product Hunt and I have been monitoring it almost without sleeping😪

The first version of it was launched about 10 months ago.
I worked so hard on it and it got over 100 upvotes within 24 hours for the first time🤩

To make an app useful, I sent emails to ask successful makers to join AskMakers.
I am nobody, just a software developer from Tokyo (currently in Vancouver), however, some of them signed up on and support it!! Unbelievable🤯

Thank you Justin, Hari, Amie, Jonathan, and Jaime😆

After that, it took…


So last time we made an NPM package with JavaScript.

Yes. It’s great! We made it!

BUT, there is one problem. We can not use it with TypeScript projects out of the box because there is no type definition file and TS project can’t know any types of this NPM package.

This time we will make a TypeScript file and generate a type definition file.

Change your index.js file to index.ts

Just change the extension of the file and update the source code.

JavaScript

TypeScript

They are almost the same this time.

Initialize with tsc command

Let’s initialize your project with tsc command, which generates tsconfig.json file.

$…


I thought making and publishing an NPM package isn’t easy.

No. It’s so easy! Your package doesn’t have to be very tricky, unique and awesome.

You can publish your favorite utility code and install it on your project with npm or yarn.

All I want to say is…it’s not complicated. We can do it!

TL;DR

This time I publish an npm package called @taishikato/slug-generator which generates slug string from text such as blog post title.

e.i. The string below is the slug for this article.

how-i-published-my-first-npm-package-5388564bf643

How to publish

Let’s make an npm account here.

npm command takes care of you.

$ npm adduser
Username…


My products

I have been making products every month since May, so I review what I have made this time.

🌸May 2019, SPA LIST

Just after moving to Vancouver from Tokyo, I read about Andrey and found out that there is a word called Indie Maker.
So I started to think of myself as an Indie Maker and make products.

The situation around me has been just changed (from Tokyo to Vancouver (big change!)) so just want to make a product that is easy to make for the first time. So I made it. That is SPA LIST. …


Arrived at Khaosan road in Bangkok after about 20h flight

👀 Digital Nomad life looks so interesting!!

Sep 30, 11:49 P.M, I was packing my stuff for my long journey.

Taishi Kato

Trying to start a company in Vancouver https://taishikato.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