React Project Anatomy

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyBeginner
Duration11m
Students306
Ratings
5/5
starstarstarstarstar

Description

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.  

Prerequisites

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. 

Feedback 

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

Transcript

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 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 ReactDOM 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 that start, build, test and eject all call react-scripts as part of their command. There are also three testing dependencies installed, which if we're gonna 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. A 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 find our index.html file. This is the file that the build processes use as the base for the file that is created when we run or build our application. The source folder is where the developer will do most of their work. It contains some config files like setupTests and serviceWorker and also the file index.js. This is important as it is where the JavaScript in our application will start to execute. I'll explain more about the contents of this file in another video, but essentially it tells React where to put our application and how to build it. It has a CSS file that is attached to it so any global styles could be put in there. CSS files are bundled and minified as part of the build process too. The App.js file is a React component. It is a mixture of JavaScript and HTML which may look strange if it's the first time you've seen it but believe you'll soon get used to it. Essentially, we've got a JavaScript function that eventually returns the representation of a DOM element. This is what React will use to render your UI. Again, this has a CSS file attached to it and again, any styles you want to propagate through your application can be put in here. The final file were gonna look at is the App.test.js file. Create React App comes with jest baked into the setup and this is a skeleton testing file. We'll get into testing in other videos. 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.

About the Author
Students2874
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics