DEV Community: Jack Chen

After reviewing JS fundamentals, I found that Create-React-App is doing a lot..

Jack Chen — Mon, 16 Nov 2020 02:12:53 +0000

In normal daily life, I work on create-react-app project without thinking..

Recently, I reviewed JS fundamentals. Then I realized how great create-react-app is and there're lots of assumptions wrong in my head

Assumption #1

Syntax and ES features I'm using are supported in browsers for sure..

In fact, it's not true. CRA is filling the gap by having compilers transforming your code to the target, es5, es6, or others. And also, The gap for ES features are filled by polyfills someone added to the project. It's possibly done by yourself!

My point is you don't need to touch or think about these and you tend to forget. That's why I'm writing it down to remind myself.

// ES6
const { count } = { count: 1 } // syntactic feature
let a = new Promise(() => {}) // functional feature

// ⬇️⬇️compiled to ES5
"use strict";
var _count = {
    count: 1
  },
  count = _count.count; // syntactic feature
var a = new Promise(function () {}); // functional feature

Above shown how it's compiled in Babel say you write ES6 code or the latest fancy code then the target is set to ES5.

Note that the syntactic feature is handled or changed in the output which is compatible with ES5. BUT, the functional feature is not handled, which is why polyfills should kick in. Great explanation here

Assumption #2

You can import anything: css, image, module, even import dynamically.

The mighty webpack is behind CRA, that's why all these magic is available.

Others

Also tonnes of recommendations like:

how to test with jest, react-testing-lib
how to handle HTML Head with ReactHelmet
how to deploy
how to work with backend
how to opt-in PWA
how to fetch data
how to config Env Variables
how to analyze your app

It would be a nightmare if you have to do all these. And thanks to CRA, we just need to kick in whenever it's needed.

Migration to Typescript in a React app

Jack Chen — Wed, 11 Nov 2020 03:33:12 +0000

Recently, I was working on a project which started in 2018. It was setup with React, Redux, Mui.. There're quite a lot of features and pages.

Problem or why we move to Typescript

I was assigned to a task that seemed really easy, which is to display the correct phone number for user logged in.

BUT when I digged into that, I found that it's really hard to figure out the shape of profile data for user. The origin data is passing around and name got changed accross different adaptors. To make things worse, the comments are out-dated.

I really want something like this, which makes everything clear:

type OriginProfile = {
   primaryPhone: string,
}

type Profile = {
   phoneNumber: string,
}

How we did it

Basically we did it one component after another. Whenever there's a task that requires us to make changes to the code.
We tried to migrate the related files to typescript. Luck that typescript is a superset of javascript.

Rename as we go

Rename .js/jsx to .ts/tsx.

Infer the shape

To define the shape the data, we have to infer that from the logic in code and the response payload. We did our best to infer and it doesn't matter if we miss something, because we can always add more.

To make the code running

To fix the errors, be flexible and nice.. Just make use of any magic, every error will go away :)
At this point, you should realize you wrote code by guessing.. It's really luck that it worked..

linting

By adding eslint-disable is useful to make code work as well.

remove PropTypes

At this point, I really can't see any benefits to have the PropTypes because Typescript is really helpful in defining the shape. So PropTypes is redundant, that's why we remove it.
Instead we have Interface Props {} for every component.

How's the feeling

It's not easy at the beginning, because I have to figure out how to eliminate all the errors and lots of basic entity typings needed in the project.

But it gets better when you know how to use any and once most of the entity types are defined, not much left indeed, or you can say, it's much easier to add new type.

What's important is that you become much more confident in coding. Typescript will scream if something is wrong. You trust the code, and you know exactly what you're dealing with. Is it a number, string, an object, some complex entity, is it possibly null. You know all that without guessing!

Typescript is awesome and I guess I will never go back.

Redux vs Mobx in React state management in 2020

Jack Chen — Wed, 11 Nov 2020 02:55:58 +0000

Wow, I just tried to tag this post with mobx, but no suggestion..

I want to make a comparison between Redux and Mobx. Here are my contrived simple apps showing notifications.

// shapes
type Store = {
  notifications: Notification[],
  setNotifications(notifications: Notification[]): void,
  prependNotification(notification: Notification): void,
}
type Notification = {
  content: string,
}

As shown above, the shape of main store and the display is very simple and contrived.
The app is showing all the notifications with contents.
Two behaviours:

set initial notifications
get the latest notification and show on the top

Mobx solution

The key here is useNotifications hook which exports useContext result with an observable managed by MobX magic

const store = observable({
  notifications: [],
  setNotifications: action((notifications) => {
    store.notifications = notifications;
  }),
  prependNotification: action((notification) => {
    store.setNotifications([notification, ...store.notifications]);
  })
});

It's very easy to think of and use. Just simply call useNotifcations hook anywhere you want to get hold of the actions or notifications data.

Only thing you want to keep in mind

Use observer to wrap your component otherwise the component will not react to the change! like observer(NotificationList)

Redux solution

I think we should skip the setup part like wrapping the app with Provider and combining reducers.

The key part here is notification reducer and how to change the state via actions. That said, we have to keep the action -> reducer -> state in mind all the time while using redux. That's something I don't like.

To make all things working, boilerplate is needed. You have to setup actions in unique names, setup big switch statement to distribute the reducer logic.

To fire an action in component, it's much easier now. The only thing you need is useDispatch().

To use a state in component, simply use useSelector() to get hold of the piece you want from root reducer.

My recommendation

Use MobX, it's much easier and straightforward. You define the shape you want in store, then easily get hold of and easily make change of it.

By using Redux, you need to have the action, reducer flow in mind. Also if you're using typescript, oh.. you might need to have a lot more boilerplate.

Maybe Redux does have a larger community which may provide more support and maybe more tools for Redux. But still, I like MobX more.

React, why we need state management and how we can do it well

Jack Chen — Sun, 08 Nov 2020 23:39:24 +0000

State management seems like a fancy word. But however you put it, we need to manage it or deal with it in some ways.

Think in this way: the application is like a state-machine which goes from one state to another. And that means we can have lots of states in our app which can be decided or derived from variables or values.

The way we're handling all these variables or values is called state management.

Common State Levels through out

State in Component level

In old times, we can use state setState() to get hold of and change state.

With the help of hooks, simply [state, setState] = useState() will do

State in Page level

Similar to state in component, you can treat it as a Page Compenent.

Things to note here is that at some point you have to use it and maybe you have to pass it to the child component which can be really deep.

State in Application level

Believe me, we have those things like Global Snackbar or Global Banner which are those things that only have one instance or have only one state to represent it in the whole application.

We can of course manage it in the root component and pass it down deep, but don't..

How to deal with it or manage it

State in Component level

Just use hooks, it's easy and effective.

State in Page and Application level

Use React.Context or third party Mobx or Redux to manage it.

React.Context way: https://kentcdodds.com/blog/application-state-management-with-react/
Mobx way https://mobx.js.org/react-integration.html#using-external-state-in-observer-components
Redux way https://react-redux.js.org/introduction/quick-start#quick-start

My Recommendation

There's no holy grails here. You can choose to do it in any way. But to me, it's very easy and straightfoward to go with the Mobx way.

With the Mobx way, you can easily define the state you want. No hierachy needed. The state doesn't have to be tied to a root. They can be managed as individuals just as they might be.

The idea is very much like it's in Recoil.

It's also amazing to get hold of the state and update with the help of useContext.

No more redux boilerplates, no more Providers, so why not?

Create Github-Pages in create-react-app project

Jack Chen — Wed, 28 Oct 2020 06:55:10 +0000

Today I tried to create a gh-page for my minesweeper project. Nothing fancy but I just want to publish it somewhere. It turns out to be pretty easy to do that and it was a success. Result is here.

Search around

I thought it's only possible to host only one github page under one account name, like jackchen.github.io. But I was wrong, according to https://pages.github.com/.

In fact any github user can have unlimited project sites.

npm package gh-pages

The next step will be creating a new branch that contains all the static files.

But it doesn't sound right to do it manually.

Then I found this https://www.npmjs.com/package/gh-pages .

Basically, gh-pages will help you push files under some certain folder only to 'gh-pages' branch(configurable).

Just do it

So it seemed pretty straightforward until I hit something..

BTW, I'm using create-react-app for my project.
I went yarn run build, then run the gh-pages script. So all my build folder went to the correct branch.

But the site didn't work.
I found that the index.html was loading correctly but not other resources. So I can tell something is wrong in PUBLIC_URL.

By running, according to creact-react-app documentation, to PUBLIC_URL=. react-scripts build did work!

can it be better?

Yes.. I found this https://create-react-app.dev/docs/deployment/#github-pages

It turns out create-react-app has already got it covered. Amazing!