Programming/react.js2019. 1. 28. 18:49


[링크 : 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]

'Programming > react.js' 카테고리의 다른 글

react import {}  (0) 2019.01.31
react html to jsx  (0) 2019.01.29
webpack react  (0) 2019.01.28
react.js tutorial  (0) 2019.01.28
react.js + spring  (2) 2019.01.28
react.js  (2) 2019.01.10
Posted by 구차니

댓글을 달아 주세요