React and the DOM

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

Start course
Overview
Difficulty
Beginner
Duration
11m
Students
1183
Ratings
4.8/5
starstarstarstarstar-half
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

- [Male Speaker] When bundling our application, the index.js file is used as the entry point into the React code. If we look inside this file, we can see that it imports some symbols, and then calls the render method from React DOM. This method takes two arguments. The first is the markup we want to insert into our application, and the second is the reference to an HTML element in the index.html file. Looking closely at this function call, you'll see that the first argument appears to be markup, and not a JavaScript expression, as you might expect it. It is something called JSX, and we'll cover that in a different video. But to use this syntax, we have to import React. What the expression actually is, is a React component called script mode wrapping our app components. The strict mode component was recently introduced as a tool for highlighting potential problems in our application, and it doesn't render anything. So our application will actually render the app component inside the first element in the index.html file that has the idea of route. The service worker mentioned here, is functionality baked into create React app, and it allows you to create progressive web applications using react. By default, this functionality is disabled.

About the Author
Avatar
Ed Wright
Senior Learning Consultant
Students
10326
Labs
7
Courses
29
Learning Paths
7

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