Introduction to React
Development Environment Set-Up

This module will introduce you to the React Development Environment. You’ll also look at some useful tools available in the React environment, as well as looking at a React project anatomy and how React interacts with the DOM.

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • Developer tools available for React 
  • How to set up the developer environment and a skeleton React application 
  • Security concerns with React 

Intended Audience  

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at to let us know what you think. 


So what needs to be installed to use React JS? First off, you'll need a text editor. Our preference is for VS Code as it is open source, and it has lots of features that make a developer's life easy, including syntax highlighting, linting and auto complete. As you've probably guessed, there's a high reliance on dependencies. So our package manager, in our case, NPM, is needed. 

Therefore you'll need to download and install NodeJS, which includes Node package manager. To set up your application, there are two options. The first is the Zero-config option, and uses node package runner called create-react-app, to create a skeleton application, pack full of features and tooling for testing which is much easier than the other option. 

That other option is to set up manually. This requires to set up a bundling tool such as Webpack, a translation tool, such as Babel, testing tools, and all the other desirable stuff that we need to build a good application. Node JS, which includes NPM, the Node Package Manager, can be downloaded from, and has versions for all the major operating systems. 

Having downloaded node and installed it, I then have opened Visual Studio code and gone to the terminal to check that node and NPM are both recognized commands on my system. I've done this by using the minus V switch, which displays the version number. Having done this, I can now use the NPX command. This allows me to run a node package runner called create-react-app. 

And I'm going to use my first app as the name of my project. When I press Enter here, it will install all of the files and dependencies that are needed for me to get my first app, react application up and running. So now the installation is complete. I'll follow the last piece of advise that it gives to CD to my first app and type NPM start. This as you can see, opens up my browser and displays the default react app. And there we go. This comes from react application, as delivered by create-react-app.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics