Development Tools

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
Development Tools
Overview
DifficultyBeginner
Duration11m
Students302
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

Accessing the developer tools in my browser, allows me to see the DOM that has been built and also see the references to the bundled file that Webpack has created to render my app. These are shown in the script tags, here. I can also get access to the files that are being used to create those bundles. I can do this by switching to the sources tab and clicking through the folder structure. You can see here, that I can see the app.js file and I could set breakpoints and watches and then reload the application and debug it, as I would do a normal JavaScript application. If I switch to the console tab, you can see that I'm being told that there is a development tool available. If I follow the link here, it takes me to the React page about the development tools and as I'm using Chrome, it gives me a link to the Chrome web store. I can add this to Chrome and then go back to my developer tools. These won't show until I close the tools down and reopen them. Although, you can see that there's an icon appeared in the top right-hand corner, next to the address bar. This time, you can see that I've got now a components tab and a profiler tab. We'll go into these into more detail later, but this just lets me access the actual React components that are being rendered as part of my application, rather than the raw JavaScript. It also lets me access things like see the matching DOM element. So clicking on it, opens up the element and shows me exactly where the app component is rendered in my DOM. I can also ask it to output my component to the console. If I click on this button here and then go to the console, and then expand this, it allows me to access some of the properties that are attached to my app component. The final button, takes me to the part of the files, that actually create that component and as you can see, it's the same app.js file, that I showed earlier in this video.

About the Author
Students2858
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