The course is part of this learning path
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.
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
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at firstname.lastname@example.org to let us know what you think.
So what did create-react-app do when we ran the command? First of all, it created a folder structure for the application. It then created a file called package.json. This file holds a record of all of the main dependencies that create-react-app uses, along with some other meta information about the project. You can see that along with the React library installed at the latest version available, there's also a React DOM package.
To run a React application, these are the only dependencies you actually need. The react-scripts dependency is used by create-react-app to execute several steps with one command. You can see in the script section the start, build, test, and eject all called react-scripts as part of their command. There are also three testing dependencies installed which, if we're going to use testing in our application, provide us with the basic testing tools needed.
The package-lock.json file contains information about the dependencies of these dependencies. And the node-modules folder contains all of the dependency code. The public folder is where we find our index.html file. This is the file that the browser uses as a base for the file that is compiled when we run or build our application. The public folder is where we found our index.html file.
This is the file that the build process uses as the base for the file that is created when we run or build our application. The src folder is where the developer will do most of their work. It contains some config files like setupTests and serviceWorker, and also the fileIndex.js.
The final file to point out is the README.md file. If we open this, we can see explanations for the script commands. npm start runs and hot loads our application. npm test starts the test runner and runs the tests, which again, hot load if we make changes to them. npm run build which readies the application for deployment. And npm run eject, which does things you might regret later.
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
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.