Create a React Web App in Visual Studio Code
This tutorial aims to kill two birds with one stone by familiarizing you with both the React JS library and Microsoft's Visual Studio Code IDE. Originally, I had planned on using the Reactide IDE, but unfortunately, at the time of this writing, it is still in the works. That being said, we'll create a basic web app using Visual Studio Code (VSC) version 1.24.x. It's not only free, but boasts React IntelliSense and code navigation out of the box!
To confirm that you have Node.js and npm correctly installed on your machine, you can type the following statements at the command prompt:
C:\Users\blackjacques>node -- version v8.10.0 C:\Users\blackjacques>npm -- version 5.6.0
Generating the App
The first step is to install the create-react-app generator, by typing "npm install -g create-react-app" from a terminal or command prompt. As it happens, VSC includes an Integrated Powershell Terminal. It's like a DOS command prompt, but on steroids!
To open the terminal from within VSC:
- Select View -> Integrated Terminal from the main menu.
- Now type the "npm install -g create-react-app" command at the prompt. You should get a report of packages added:
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS C:\Users\blackjacques> npm install -g create-react-app C:\Users\blackjacques\AppData\Roaming\npm\create-react-app -> C:\Users\blackjacques\AppData\Roaming\npm\node_modules\create-react-app\index.js + email@example.com added 67 packages in 9.086s
Now it's time to create a new React application.
- Type the following statement at the PS comand prompt:
This will take a bit longer. Again, you'll get a progress report.
PS C:\Users\blackjacques> create-react-app my-first-react-app Creating a new React app in C:\Users\blackjacques\my-first-react-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts… > firstname.lastname@example.org postinstall C:\Users\blackjacques\my-first-react-app\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js + email@example.com + firstname.lastname@example.org + email@example.com added 1320 packages in 102.941s Success! Created my-first-react-app at C:\Users\blackjacques\my-first-react-app 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 my-first-react-app npm start Happy hacking!
Opening the Project in VSC
With our app built, we can now open it in VSC. To do that:
- Click "Open folder…" in the Welcome screen under Start or select it from the FileMain Menu:
- Use the Select Folder dialog to browse to your "my-first-react-app" folder and click the Select folder button to load the project into the IDE.
Here is the loaded project structure in VSC:
Taking our App for a Spin
True to its name, the create-react-app generator generates everything your web app needs. In fact, the app is perfectly runnable at this point. To view it, type "npm start" at the command prompt. That will launch the default browser with our app loaded at "http://localhost:3000/":
As you can see, React is arguably the easiest to work with of the popular frameworks. Now that we've got our app in a runnable state, we'll use React to build an impressive UI in the next installment.