1. Home
  2. Training Library
  3. Course Introduction: React JS

Course Introduction: React JS

Developed with


Course Introduction

The course is part of this learning path

ReactJS: Zero to Hero
Course Introduction


Course Introduction  

We begin with an introduction to what React is  

Learning Objectives 

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

  • What React is.  

Intended Audience  

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

Prerequisites of the Course 

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 qa.elearningadmin@qa.com to let us know what you think. 


- [Instructor] Over the last few years, the options for creating fast, interactive, front ends for applications have exploded. Technology big guns, like Facebook and Google, have been vying to become the developers' choice when creating immersive and rich application interfaces. ReactJS is one of these technologies, developed by Facebook, and used extensively in their Facebook and Instagram applications. In fact, ReactJS was first used on the Facebook newsfeed back in 2011, and has evolved into one of the most popular ecosystems in JavaScript development. Companies such as Twitter, Airbnb, Netflix, Uber, and a whole host of other household names use ReactJS in their applications. So what is it? Many assume that it's a framework; it isn't. It's a JavaScript library, to help developers create reusable, interactive and stateful UI components. It can be seen as the V, or the view part, of any application, including MVC architecture. ReactJS makes no assumptions about the rest of the stack that serves the application. It simply takes data, and displays it. So what does ReactJS do? As I've already stated, it simply takes data and displays it. I say simply, but, as you've guessed, it's not that simple. At a more technical level, most applications have ReactJS performing work on the client computer, to update what the user sees as they interact and use the application. New views and updated data are seamlessly created and displayed, with very few overheads, like additional network calls. A concept called the Virtual DOM is used to do this. ReactJS can also work on the server, rendering the page before delivering it to the client. It's possible to have an application, having some parts rendering from the server and other parts rendering in the client. When a normal application renders in a browser, it creates the document object model, a hierarchy of the webpage structure that can be manipulated with JavaScript. Facebook found that if they used a copy of the DOM kept in memory, called the Virtual DOM, they could make fast and fluid UIs. The idea is quite simple. Take the ReactJS code and the user interactions to make updates to the Virtual DOM. Then, use processes called diffing, and reconciliation, to make the actual DOM reflect the changes in the Virtual DOM, saving the developer the trouble of having to code these interactions, attribute manipulations and events handling. Another benefit of this, is that objects and pages don't need to refresh when something changes, which is more efficient. Thankfully, we don't need to get into too much detail about how all that happens, we just need to be aware of the process that is happening. And just so you know, the reconciliation engine is called Fiber, and has been used since React version 16. The build process for deploying the ReactJS application produces the files needed to deploy it. As you would expect, this is the HTML file to create the initial DOM, and its associated CSS and JavaScript files. The JavaScript is mostly the ReactJS code, that has been transpiled into vanilla JavaScript, so when the user requests the URL, the HTML is delivered, with these associated files. The JavaScript file runs, producing the Virtual DOM and the render for the initial view. As the user interacts with the application, various parts of the JavaScript code execute, updating the Virtual DOM, and therefore the actual DOM, through the diffing and reconciliation process. If you're familiar with the OS top 10 vulnerabilities, then you're probably already thinking about security issues with ReactJS. The most obvious of these is using components with known vulnerabilities. A ReactJS application has hundreds of dependencies, and it's important to ensure that these are kept up-to-date. npm's audit command can then be used to help identify what is known to be vulnerable, and the audit fix command can be used to safely update them. However, if an update would introduce breaking changes, then a bigger rebuild may be required. At the time of recording, there were no known cross-site scripting vulnerabilities in ReactJS's core code, and developers should always be aware of the dangers of incoming data, and whether it should be trusted.

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