Introduction to React

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
5
lab-steps
3
description
1
play-arrow
Development Environment and App Set Up
Overview
DifficultyBeginner
Duration11m
Students167
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 needs to be installed to use ReactJS? First up you'll need a text editor. Our preference is for VS Code, as it is open source and it has lots of features that make a developers life easy, including syntax highlighting, linting, and auto complete. As you probably guessed, there's a high reliance on dependencies so a package manager, in our case npm is needed. There for you'll need to download and install NodeJS, which include Node package manager. To set up your application there are two options. The first is a zero coding option and uses node package runner called create-react-app, to create a skeleton application packed full of features and tooling for testing, which is much easier than the other option. That other option is to set up manually. This requires a set up of bundling tools, such as Webpack, a transpilation tool, such as Babel, testing tools and all the other desirable stuff that we need, to build a good application. NodeJS, which includes npm, the Node package manager, can be downloaded from NodeJS.org and has versions for all the major operating systems. Having downloaded Node and installed it, I then have opened visual studio code and gone to the terminal to check that Node and npm are both recognized commands on my system. I've done this by using the -v switch, which displays the version number. Having done this I can now use the npx command. This allows me to run a Node package runner, called create-react-app. And I'm going to use my first app, as the name of my project. When I press enter here, it will install all of the files and dependencies that are needed for me to get my first react application up and running. So now, the installation has complete, I'll follow the last piece of advice that it gives, to CD to my first app and type npm start. This, as you can see, opens up my browser and displays the default react app. And there we go, the skeleton react application, as delivered by create-react-app.

About the Author

Students1742
Labs8
Courses29
Learning paths5

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