React - Setup Development Environment
This is a quick post to show how to setup a React development machine.
Follow the below steps to setup a React development environment and test it by downloading and running an example React application.
- Install Node.js and npm
- Install the Git CLI
- Install Visual Studio Code
- Run an example React application (optional)
Node.js and npm are the runtime and command line tools required to build and run React applications.
React is built on top of Node.js and the React library itself is a package available on npm - https://www.npmjs.com/package/react.
Download Node.js and npm from https://nodejs.org.
Install Node.js and npm by opening the downloaded installer and following the prompts.
Test that Node.js and npm were installed successfully by running the commands
node -v and
The Git CLI is the command line interface used for cloning and interacting with git repositories (e.g. projects on GitHub). For more info see https://git-scm.com/book.
Download the Git CLI from https://git-scm.com/downloads.
Install the Git CLI by opening the downloaded installer and following the prompts.
Test that the Git CLI was installed successfully by running the command
VS Code is a free code editor that runs on Windows, Mac and Linux.
Download VS Code from https://code.visualstudio.com/.
Install Visual Studio Code by opening the downloaded setup file and following the prompts.
Launch VS Code to test that it installed correctly.
Your React development environment is now setup and ready to go!
This is an optional step to test out your new React dev environment. Follow the below steps to clone and run an example React boilerplate application that includes email sign up & verification, authentication & authorization, and user management functionality. Full details about the example app are available at React Boilerplate - Email Sign Up with Verification, Authentication & Forgot Password.
- Clone the React project from GitHub with the command
git clone https://github.com/cornflourblue/react-signup-verification-boilerplate.git
- Navigate into the project root folder with the command
- Install the project npm package dependencies by running
- Start the app by running
npm start, this will compile the React app and automatically launch it in a browser
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/c/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on GitHub at https://github.com/cornflourblue
- Feeds formats available: RSS, Atom, JSON