react_setup

Setup

Yarn

Yarn is a superset of NPM that solves many problems that NPM has, NPM stands for Node Package Manage , It keeps track of all the packages and their versions and allows the developer to easily update or remove these dependencies. All of these external dependencies are being stored inside a file called called package.json. when you have a node project, as package.json has all dependencies and version, you can easilier to setup a same env as the development.

Yarn is a package manager that uses NPM registry as its backend, but it’s more than npm, say NPM installs packages sequentially. This slows down the performance significantly. Yarn solves this problem by installing these packages in parallel.

you can install pkg into global or particular project, for global part, there are several configs that control where to install, the global dir is used to store installed packages the global bin are symbol links to binary file installed at global dir.

$ yarn config list

# show global dir and bin path
$ yarn global dir
$ yarn global bin

# change bin path: $prefix/bin
$ yarn config set prefix /root/yarn
# change global dir, make sure check it again
$ yarn config set global-folder /root/yarn
# but this will not change global-folder in .yarnrc if has
# you should change that file manually

# add/del package globally
$ yarn global list  --depth=0
$ yarn global add package
$ yarn global remove package

# goto project dir show package for that project
$ yarn list  --depth=0
$ yarn add package
$ yarn remove package

# show config of yarn
$ yarn config list

# set repository taobao
$ yarn config set registry https://registry.npm.taobao.org -g
$ yarn config set disturl https://npm.taobao.org/dist --global

# reset to default repo
$ yarn config set registry https://registry.yarnpkg.com

More command, refer to Yarn CLI.

create react app

$ yarn global add create-react-app
$ yarn create react-app test_app
# Starts the development server.
$ cd test_app
$ yarn start
# Starts the test runner.
$ yarn test

# at last all things seems ok, passed all test
# Bundles the app into static files for production, so that you can deploy this on your wbserver
# this will create a build dir with static files, deploy that
$ yarn build

# ==========================================deploy with online static server===========================
# For test only, you can deploy bundles file to surge which hosts static website for free with couples of days
# so that someone else outside can see what the website should be when it's deployed.

# install surge cli to deploy weserver on surge server http://surge.sh/
$ yarn global add surge

# at the project dir run below commands (p means the path, -d means domain, the very first time need you configure email/password
$ surge -p build -d your-domain.surge.sh
# but the subsequent call, this is not required)

# Later after the first call edit package.json, under “scripts”:
# so that you add a new command to yar
"deploy": "yarn run build && surge -p build -d jason_lkm.surge.sh"
$ yarn deploy
# ==========================================deploy local with static server===========================

$ cd test_app
$ yarn global add serve
$ serve -s build

use json mock server from vs code

# edit prj/package.json
"proxy": "http://localhost:8080",
...

debug react app with chrome

• Install Chrome debugger for VS code
• Use the following config for your launch.jsonfile to configure the VS Code debugger and put it inside .vscode in your root folder

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Chrome",
              "type": "chrome",
              "request": "launch",
              "url": "http://localhost:3000",
              "webRoot": "${workspaceRoot}/src"
          }
      ]
  }

• Start your React app by running yarn start in another terminal

  $ BROWSER=none yarn start

• Start debugging in VS Code by pressing F5or by clicking the green debug icon

  REF

  Behide react-create-app