Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone 's Guide to

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

A guide to React for someone that understands programming, but doesn't know anything about working with React.js.

· Web Dev Zone ·
Free Resource

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
create-react-app
create-react-app

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

React App Directory
React App Directory

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).



If you enjoyed this article and want to learn more about React, check out this collection of tutorials and articles on all things React.

Topics:
web dev ,react.js tutorial ,create-react-app

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}