4

I'm wondering if it's possible to use command line arguments with ReactJS (not react-native). For example, is it possible to input a simple string and have it be saved as a variable so it can be displayed? The npm yargs module is the kind of thing I'm looking for, but I couldn't get that to work because the child process it spawns apparently doesn't work in a browser.

Edit: I've also tried something like including {process.argv[0]} in say an h1 tag, but nothing shows up.

Cyclicduck
  • 583
  • 1
  • 6
  • 11

3 Answers3

2

React doesn't have anything special for command line arguments. In fact, it is primarily designed as a DOM library. You could use yargs and then pass the values to a React component.

pspeter3
  • 21
  • 1
  • In that case I'm not including yargs correctly. Right now I have const argv = require('yargs').argv; in App.js, which is getting imported to index.js. App.js contains where I want to use the yargs. Where should I include the module instead? – Cyclicduck Aug 02 '17 at 18:18
  • I'm running it in the command line (npm start --blah blah) and viewing it in the browser. – Cyclicduck Aug 02 '17 at 18:24
  • So you're using server side rendering with react then? Also, the way you've structured your command, npm is swallowing the command line arguments. You would need to `npm start -- --blah blah` – pspeter3 Aug 02 '17 at 18:29
  • Then I'm still getting the same error with react: ./~/execa/index.js Module not found: Can't resolve 'child_process' in 'C:...\react-test\node_modules\execa' – Cyclicduck Aug 02 '17 at 18:41
0

For example you run this command in terminal or cmd

npm start -- foo

foo is your argument. You can print your like this

// print process.argv
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});

in your script.

Piseth Sok
  • 1,789
  • 1
  • 20
  • 24
0

React runs is client-side

React is a client-side library. It runs in a web page, on a browser. The end-user doesn't use the command-line to "run" React, therefore command-line arguments are not available to the end-user.

For developers

As a developer, you do use tools to start a development server and launch a browser that is running React. Most likely, you're using Create React App. You can use environment variables to pass variables/arguments to React. Specifically, the documentation offers these examples:

# on Linux and macOS
REACT_APP_NOT_SECRET_CODE=abcdef npm start

# on Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

Note that these variables are embedded into React at build time, when Create React App bundles and builds your app (kind of like compiling). This means that if you build your React project and then transfer the output files to another server and try to pass new variables, nothing will change.

For servers

If your React build files are on a server and you want to be able to pass command-line arguments to the server and have React change, this is also possible, but largely depends on what software you are using to serve. Broadly, the server would take the runtime argument and pass it into the template which renders your React app. Then any Javascript that runs on that page can access the arguments.

Codebling
  • 10,764
  • 2
  • 38
  • 66