C# Developer's Guide to React.js (Part 1): Create and Run

I thought it might be time for another of my patented "C# Developer's Guide to..." Basically, a guide to React for someone that understands programming (C# ideally), but doesn't know anything about React.js.

There are a couple of VS templates for React; however, after working with it for a while, you realize that most of the React people live in the command line; there's a tool called create-react-app.

You can use Powershell or Bash as your command line of choice. Start by installing the tool:

npm i -g create-react-app

This assumes that you have installed npm.

Create a React.js Application

To create a new application, navigate to the directory in which you wish to create the application and type:

create-react-app [app-name]

For example:

create-react-app context-menu-test

Once created, it tells you how you can start the app:

Run Your React.js Application

First, navigate into the directory that it's just created (otherwise, you'll get errors when you run).

npm start

This will launch the server, and navigate to the URL with the default browser:

cd context-menu-test
npm start

This runs on port 3000 by default, so if you run a couple of instances then you might get the error:

Something is already running on Port 3000

To fix this, in VS Code, open the folder:

node_modules/react-scripts/scripts/start.js

Find the following line (at the time of writing):

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

You can change the port 3000 to something that's free.

Edit App.js:

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>
          <p>Test</p>
        </div>
      </div>
    );
  }
}

Save and see the updated screen appear (which I think you'll agree is much better than the default screen).