react.js tutorial

[링크 : https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial]

[링크 : https://reactjs.org/docs/create-a-new-react-app.html#create-react-app]

  [링크 : https://github.com/facebook/create-react-app#create-react-app-]

  [링크 : https://github.com/facebook/create-react-app/.../README.md#table-of-contents]

node.js가 깔려있어서 그냥 npx 쳐보니 npx를 설치한다고 시간을 좀 잡아먹고 무언가 뜬다  

C:\Users\User>npx npx: installed 1 in 5.81s Path must be a string. Received undefined ERROR: You must supply a command. Execute binaries from npm packages.   npx [options] <command>[@version] [command-arg]...   npx [options] [-p|--package <package>]... <command> [command-arg]...   npx [options] -c '<command-string>'   npx --shell-auto-fallback [shell] Options:   --package, -p          Package to be installed.                       [string]   --cache                Location of the npm cache.                     [string]   --no-install           Skip installation if a package is missing.    [boolean]   --userconfig           Path to user npmrc.                            [string]   --call, -c             Execute string as if inside `npm run-script`.  [string]   --shell, -s            Shell to execute the command with, if any.                                                        [string] [default: false]   --shell-auto-fallback  Generate shell code to use npx as the "command not                          found" fallback.                                    [string] [choices: "", "bash", "fish", "zsh"]   --ignore-existing      Ignores existing binaries in $PATH, or in the local                          project. This forces npx to do a temporary install and                          use the latest version.                       [boolean]   --quiet, -q            Suppress output from npx itself. Subcommands will not                          be affected.                                  [boolean]   --npm                  npm binary to use for internal operations.                                                  [string] [default: "C:\\Program                              Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js"]   --node-arg, -n         Extra node argument when calling a node binary.[string]   --version, -v          Show version number                           [boolean]   --help, -h             Show help                                     [boolean] For the full documentation, see the manual page for npx(1).

실수로 오타를 냈는데 myapp 이라는 폴더에 기본 템플릿을 생성하도록 명령어를 실행

그나저나 패키지 받는데 무진장 오래걸리네..

그리고 react 관련해서 명령어들이 꽤나 여러가지 출력된다.

C:\Users\User\Desktop>npx create-react-app myap npx: installed 1 in 2.423s Path must be a string. Received undefined npx: installed 63 in 11.172s C:\Users\User\AppData\Roaming\npm-cache\_npx\10196\node_modules\create-react-app\index.js Creating a new React app in C:\Users\User\Desktop\myap. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... + react-dom@16.7.0 + react@16.7.0 + react-scripts@2.1.3 added 1926 packages in 197.071s Initialized a git repository. Success! Created myap at C:\Users\User\Desktop\myap Inside that directory, you can run several commands:   npm start     Starts the development server.   npm run build     Bundles the app into static files for production.   npm test     Starts the test runner.   npm run eject     Removes this tool and copies build dependencies, configuration files     and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing:   cd myap   npm start Happy hacking!

[링크 : https://reactjs.org/docs/hello-world.html]

+

2019.01.29

node.js 보다 확실히 구동이 좀 오래걸리네..

그리고 자동으로 등록된 브라우저를 실행해서 띄우는데 이거 끄는 법 없나?

(IE edge를 기본으로 하고 크롬써서..)

D:\work\src\myapp>npm start > myapp@0.1.0 start D:\work\src\myapp > react-scripts start Starting the development server... Compiled successfully! You can now view myapp in the browser.   Local:            http://localhost:3000/   On Your Network:  http://10.0.0.4:3000/ Note that the development build is not optimized. To create a production build, use npm run build.

npm run build로 빌드!

D:\work\src\myapp>npm run build > myapp@0.1.0 build D:\work\src\myapp > react-scripts build Creating an optimized production build... Compiled successfully. File sizes after gzip:   34.71 KB  build\static\js\1.fa92c112.chunk.js   763 B     build\static\js\runtime~main.229c360f.js   716 B     build\static\js\main.690c38a1.chunk.js   512 B     build\static\css\main.659f8df7.chunk.css The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:   "homepage" : "http://myname.github.io/myapp", The build folder is ready to be deployed. You may serve it with a static server:   npm install -g serve   serve -s build Find out more about deployment here:   http://bit.ly/CRA-deploy

npm start로는 개발버전으로 실행되고

serve를 통해서 build 디렉토리 내의 것을 실행해야 static하게 구동이 되는 듯?

그리고 포트가 3000 번에서 5000 번으로 바뀐다.

D:\work\src\myapp>npm install -g serve C:\Users\user\AppData\Roaming\npm\serve -> C:\Users\user\AppData\Roaming\npm\node_modules\serve\bin\serve.js + serve@10.1.1 added 78 packages in 3.909s D:\work\src\myapp>serve -s build    ┌───────────────────────────────────────────────┐    │                                               │    │   Serving!                                    │    │                                               │    │   - Local:            http://localhost:5000   │    │   - On Your Network:  http://10.0.0.4:5000    │    │                                               │    │   Copied local address to clipboard!          │    │                                               │    └───────────────────────────────────────────────┘

+

윈도우에서는 아래와 같이 set을 통해서 한번 해주면 해당 콘솔창에서는 계속 적용 된다.

D:\work\src\myapp> set BROWSER=none  D:\work\src\myapp> npm start

[링크 : https://github.com/facebook/create-react-app/issues/2084]

[링크 : https://stackoverflow.com/questions/51706882/how-do-i-npm-start-with-a-specific-browser]

[링크 : https://github.com/kitze/custom-react-scripts/tree/master/packages/react-scripts#others]

  [링크 : https://github.com/facebook/create-react-app/issues/873]