Tips for React project optimization

By Lan Chen / 2019-08-14

Useful tips for Performance Optimization Techniques in React

Note: for people who fist visit, you might have to login with a google or facebook account, and re-click the link.

Any feedback is welcome! :-)

Eslint setting allow variables start with underscore

By Lan Chen / 2019-07-23

I’ve got an Unexpected dangling '_' in '_origin' no-underscore-dangle error when I used _ as the beginning of a variable because of naming conventions for identifiers in JavaScript.

This error comes from a rule 'no-underscore-dangle': ['error', { allow: ['_store'] }] which set up in a setting file .eslintrc.js. This rule means disallow all variables’ name start or end with _ except for the variable '_store'.

As the variable which I want to use is a “private” member of an object so I want to continue using _ as the beginning of that variable. Of course, the easiest way to solve this problem is to cancel that rules in .eslintrc.js but I don’t really need to allow all variables can start with _.

There is an easy way to solve this little error that is adding this ignore comment /* eslint no-underscore-dangle:0 */ at the top of that variable. For example

React Router moving forward & backward

By Lan Chen / 2019-07-06

I am currently working on a project for mobile webview which developed by React, so I need a ‘<’ button at the top for backward navigation. Because my project use umijs as routing framework, I can just simply use router.push(path) , router.replace(path) and router.goback()to deal with forward & backward navigation.

How to use it:

  • router.push() push the URL to history stack which you wish you can go back by clicking the ‘<’ button
  • router.replace() replace current page’s URL to a new URL, no history in the history stack
  • router.goback() set it to ‘<’ button’s onClick function. when you click on this button, the history stack will pop the latest URL and redirect to that page

The native React Router has the same functionalities as umi, they are createBrowserHistory, createMemoryHistory and createHashHistory

deploy website to AWS via visual studio

By Lan Chen / 2019-06-28

This is a note to reminding me how to publish ASP.NET Core website to AWS via Visual studio. PS: My Visual studio version is Enterprise 2017. Hope it also helps you, good luck.

Step 1: AWS setting
If you already create a user and add access policy for that user, please go to step 2.

If you don’t have an AWS account, click the link to create an AWS account:

React Error: Inavlid attempt to spread non-iterable instance

By Lan Chen / 2019-06-28

I’ve got an Uncaught TypeError: Invalid attempt to spread non-iterable instance because of I miss a curly bracket when I receiving data from parent component, and I used this data to render a list.

Here is the error:

Tips for SPA optimization - Vue.js

By Lan Chen / 2019-06-23

Useful tips for Vue.js Single Page Application optimization, Tips for building fast and light Vue.js SPA

Note: for people who fist visit, you might have to login with a google or facebook account, and re-click the link.

Any feedback is welcome! :-)

app.model: namespace should be unique

By Lan Chen / 2019-06-17

I am working on a react project this morning, and I found I need a new model file for a future function so I just simply copy the other exist model file and rename it. Then, the error shows: app.model: namespace should be unique, the error showing as follows:

Git notes

By Lan Chen / 2019-06-17

These are my personal git notes for my daily life.

git status check file status

git clone RepositoryURL clone a github repository to you local folder.

git add FilePath add the file you name it.

Three ways to break a long word in a small container

By Lan Chen / 2019-06-10

I met a problem when I fetch data from the database for a table, there is an unusual long string text inside the data, and the table column has a relative width so the data just stretched the column. I found 3 ways to break an unusual long word in a relatively small container, there are, word-wrap:break-word; word-break: break-all; & overflow-wrap: break-word;

Here is the sample code for these three properties,

<!DOCTYPE html>

React Uncaught Invariant Violation

By Lan Chen / 2019-06-03

While rendering a list data, I got an error: ‘react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child(found: object with keys {id, typeId, reference, …..}). If you meant to render a collection of children, use an array instead.’

I used React Hooks to fetch data and ‘antd’ version 3.13 as my UI library, List and List.Item are supported by antd. I want to see the raw data so I just simply use a div tag to render the data, but I got an error from the code showing below