Components and JSX

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
5
lab-steps
3
play-arrow
Understanding Components in React
Overview
DifficultyBeginner
Duration13m
Students72
Ratings
3/5
starstarstarstar-borderstar-border

Description

This module introduces you to some of the basics Components in React and what JSX is.  

Learning Objectives 

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

  • What components are 
  • What JSX is and why it is used in React JS 
  • How to create Functional and Class Components 
  • How to add multiple components 
  • How to inspect components in the Browser
  • How the in-browser tools work 

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

- React is fundamentally about components. A development team's mindset needs to think in React components when creating an application, you are using it. According to the official documentation which can be found at react.js.org. React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time. A React components code contains all of the markup and logic required to display the UI. They should never contain any business logic. React is for taking data and displaying it. Any logic in a react application should only be there for display purposes. If you're creating a new component, then it should be made as a function. Prior to React version 16 components were generally a mixture of functional class components. Version 16 added features that allow components to be functions. Saying that class components will never be duplicated, so there's no need to rush off and convert all components to functions. Here are some examples of function components. The component first is an array function that implicitly returns the markup for the component. The component second is an array function that explicitly returns the markup. The components third is an array function that has some logic before it returns the component markup and uses the value created in the logic in the return. Notice how all the function returns look like HTML and that the component third return has some curly brace syntax inserted into it to use the date value. That's because the component isn't written in Vanilla Javascript. It's written in a language Facebook developed for React called JSX. We'll cover what that is and how it affects us in another video. Note that all my components import React from the React package, and are exported so that can be used elsewhere in the application. To use these components, I simply import them into the component I wish to render them from and insert them as a HTML style element in the components return. Like shown here in the app component. And another thing to note for the return of a function is that it returns a single outer element. This can be any valid HTML element, a composite element like a dev that has many child elements. Any react component, null, or a boolean false. Returning null or a boolean false means that the component will not render anything. React provide some components in its library and a useful one is the fragment component as shown here. This is a non-rendering wrapper that allows me to optimize my HTML by not having to put a rendering element like a dev to wrap the rest of my component markup. A component's return must be pure. This means that it shouldn't modify the component state. It should return the same result each time it's created and does not indirectly interact with the browser. This is because they should interact with the virtual Dom, which will cause the actual Dom to update. I can now look at my application in the browser. My application is now running after using the npm start command from the terminal. It runs on localhost port 3000 by default and pointing my browser to this address allows me to view my application. Using the developer tools I can see the actual Domino has been rendered and any messages from React on the console. Using the components tab, which is there because I installed Chrome dev tools for React, I can see my component hierarchy. Clicking on a component allows me to see its properties and also where it is actually positioned within the Dom. Previous throughout version 16, components that help changing data called, state, had to be created as a class. A class component had to extend React component class and included at least the render function. The job of the render function was to return the markup for the component. And as with the function component, the return must be pure. The example shown is a very basic cost component and you're right, it could easily have been a functional component, but in the past, if I needed it to be more complex, say by adding a changeable state to it, I would have needed a constructor and other features like component lifecycle methods that weren't available in function components. Facebook have said they will never deprecate class components and it's possible you'll come across them if you're working with legacy applications. So it's important for us to know what they look like and what the extra functionality does.

About the Author

Students1248
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