React.js: Fundamentals

Name: React.js: Fundamentals
Author: Tony Davydets

Learn the basics of React and get familiar with intrinsic parts that make up a React web application

Preview the first lesson free — get full access to all 1 lessons.

Course: On-Demand

Hello, my name is Tony and in. These lessons we will take a look. At what class components are, their structure and lifecycle functions, props, management and use. As well as state management and use. In this lesson we will take a look what a React component is, how they are used and how they can be helpful to us in writing an application quickly and efficient gently. Now, a component is a piece of. Client side code that is very similar to a standard JavaScript function with one distinct difference being that a component will always return HTML. That is a must because that is a visual piece that our user is going to see and interact with. When building a component it is best to structure it in such a way so that it is self contained and doesn't have any interdependencies on anything else in the application. That means that we can use it independently anywhere we want in our application without creating unintended consequences that come from explicit or implicit dependencies. Let's take a look at what React components look like. Let's start our application here by running an NPM start command and our application. Is going to start on port 3000. For this portion. I went ahead and I actually created the components ahead of time to save. Us a little bit of time and just vary from watching me type. So let's drop a class component into. Our interface and see what it looks like. You can see what this is is. Basically a color picker and when we change our color we can see that in real time everything gets updated on. The screen and the user can see it in the browser. Our class example looks like this. So. All React class components extend React component which is an entity that is created and maintained by the React group. So as such it comes with certain lifecycle function available to it. We will go over all of those later. For now we're just taking a look at what a component is and familiarizing. Ourselves with its nature. Now this function you can see is the only function that is truly required because that is what's going to return the HTML or the visual representation for. Our component which is what the user. Is going to see and interact with. As we mentioned earlier. Now let's take a look at what. A functional component looks like. Let's drop it into our application as well. It we can see that visually and. Functionally it is not any different than our class based component. It looks, feels and functions in a completely similar way. But when it comes to its implementation. It does vary a great bit. You can see that it doesn't really extend anything and React is not really. Mentioned anywhere in here except for inside. Of this component that uses some special functions that are distributed by the React group. But we'll go over those later, let's. Not worry about those too. Much for now, but we will see. That, we see that this is just a regular JavaScript object and here of. Course is its HTML portion, which is identical to our class based portion. And this is what the user sees and interacts with. But as you can see, this makes a good candidate for a component because it passes. Another one of our criteria that we've. Set earlier is that it's completely self contained and not dependent on anything else in the application, meaning we can use it by itself in conjunction with other things anywhere else in the application without creating any kind of unintended consequences that come from implicit or explicit dependencies. In our next lesson, we will take. A look at how JSX is different. From regular HTML and how it is used in the context of a react application. Thanks for watching.

Provider : Tony Davydets 1 Lesson · 17m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This course covers the fundamentals of React, a JavaScript library for building user interfaces. It will introduce React components, which are the building blocks of React applications. We’ll also explain the differences between JSX and regular HTML. Additionally, it will explore the use of ES6+ and JSX together in React development.

One of the unique features of React is the use of JSX, a syntax extension that allows the embedding of HTML-like code within JavaScript. This module will explore the differences between JSX and regular HTML and demonstrate how JSX can be used to create dynamic and expressive user interfaces. In addition to JSX, this module will also cover the use of ES6+ features in React development. ES6+ is a version of JavaScript that introduced many new features and improvements to the language. You will learn how to use ES6+ features such as arrow functions, classes, and template literals in conjunction with JSX to create modern and efficient React code.

By the end of this module, you will have a solid understanding of React components, JSX, and the use of ES6+ in React development. You will be equipped with the tools and knowledge to create your own React applications and build rich, interactive user interfaces.

What You'll Learn

Understand what React components are as the building blocks of React applications
Distinguish between JSX and regular HTML
Use JSX to create dynamic and expressive user interfaces
Apply ES6+ features such as arrow functions, classes, and template literals together with JSX
Build rich, interactive user interfaces with React

Key Takeaways

React is a JavaScript library for building user interfaces, and components are the building blocks of React applications.
JSX is a syntax extension that allows embedding HTML-like code within JavaScript, and it differs from regular HTML.
ES6+ introduced features such as arrow functions, classes, and template literals that are used together with JSX in modern React development.
By the end of the course, learners have a solid understanding of React components, JSX, and the use of ES6+ in React development.

Frequently Asked Questions

What does this course cover?

It covers the fundamentals of React, including React components, the differences between JSX and regular HTML, and the use of ES6+ together with JSX in React development.

What is JSX in React?

JSX is a syntax extension that allows the embedding of HTML-like code within JavaScript, and the course explains how it differs from regular HTML and how it is used to create dynamic and expressive user interfaces.

What ES6+ features will I learn to use with React?

You will learn how to use ES6+ features such as arrow functions, classes, and template literals in conjunction with JSX to create modern and efficient React code.

What will I be able to do after completing this course?

You will have a solid understanding of React components, JSX, and the use of ES6+, and you will be equipped to create your own React applications and build rich, interactive user interfaces.