React.js: Components

Name: React.js: Components
Author: Tony Davydets

Learn the basics of React components and their intrinsic parts, such as State and Props

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

Course: On-Demand

Hello, my name is Tony and in these lessons you will learn about components. In this lesson we will take a look at Es six plus functions with JSX to render components. I wanted to call attention to this because this is very important. In a real world scenario you would not put every single component on one folder because as you can imagine, it can quickly get unruly what we are after for professional applications it in a real world situation is something that looks like this. So as you can see, it is no longer a flat structure. All of our components are inside of their own folder called components and every single component has its own folder. The structure of the folder is so that the definition of the component is in the JS or a JSX file and the styling solution, if one is needed, is inside of a CSS file. Now, in a professional environment there would also be test file here or spec file which would contain unit tests. We are not going to worry about that for now. But just to let you know if you ever see this in the real world, this is very likely what things will look like. Now for our purposes, what we are going to do is we are going to create an application that will keep a list of all of the things that we have for us to do that day and we will have the ability to take them off our list one by one as we hopefully complete them. This particular component is going to be just a list of all the tasks we have. Now first we are going to import react from react. It is very important. React is a super global. We need it for development of all of our applications. And here we are going to have our component. The component we are building is called a task list and it is going to take the following three arguments. The tasks let's close this so it doesn't complain. So tasks is the record set which we are going to traverse and output tasks one by one. Handle check is a function that is going to fire when we checkbox that corresponds to every single one of our tasks. And handle delete is another function that is going to fire when we actually attempt to delete a task off of our list. Now, how do we render conditionally inside of react? We are going to render conditionally inside of react, not using a traditional if else statement because the JSX nomenclature won't allow for that. We are going to be using a tertiary statement. You may have seen a tertiary statement before and this is their format. Let's do this above so we don't mess up our function. Just as an example. So the condition that we are testing for is always the first argument in the structure if this condition happens to be true. So if the if portion of our statement is true, this is the portion of code that gets run and if it's false, this is the portion of code that runs. Now we are going to take the same thing and extend it to our react ecosystem to make it look like this. So our record set is going to be an unordered list and if the length of it is less than one, let's make this more humanly. Readable and say if the length of it is zero, triple equals is super important. If you do a double equals zero, that means this is also equal to that. So it basically just compares the value but it doesn't compare the type. But we're not after character zero, we are after number zero. So we always do a triple equals for comparison. It makes it type safe. So what we are going to do here is if nothing is displayed, we are going to present the user with a text that basically tells them hey, nothing is displayed, there's currently nothing in your agenda. Would you like to add an event? And if something is displayed, this is where things get interesting. This is where we are going to loop through a record set that we are passing as the first argument to this function. Let's take a look at what that looks like. Delete icon. Let's import my icons so it doesn't complain. We're going to do this at the top. Delete our example it's. So the else portion of our tertiary clause now has a map function. This is the function that we're passing to our map function and what it will do is it'll produce HTML for us which will basically be an Li or a list item for the unordered list that we declared at the very beginning of this. Let's move this backwards tab. Here we go. As you can see, we're basically outputting this as one item at a time. We're going to be able to see what it looks like once we actually get it running in the next portion of our lesson. So as you can see, we are outputting the task. There's a checkbox that corresponds to it. Here's the text that actually says what the task is and here's the button that lets us delete it. Once again, we are just trying to conceptualize the task and what it's going to look like we will take a look at in the next portion of our course. Now, lastly, every single component we can't forget to do this. We are exporting the component we just created and we are exporting it as default. Now what does it mean we are exporting this as default? That means that when we are going to be consuming it inside of our app component that is going to hold the definition for the entirety of our app. We are going to be importing it like this without the curly braces. Now, because we're importing it as default, we can truly call it whatever we want and it'll still work.

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

Course Description

This module will cover ES6+ Functions with JSX to Render Components, Component Props, and Component State, which are core concepts in React, a popular JavaScript library for building modern web applications.

React components are the building blocks of a React application. These components can be written as ES6+ functions with JSX, which allows developers to write more concise and readable code. JSX is a syntax extension for JavaScript that allows for HTML-like elements to be written in code. With JSX, developers can create custom components that can be rendered to the DOM. State is a feature that allows React components to store data that can change over time. This allows for dynamic and interactive updates to a component's data. State can be initialized in a constructor or by using a state hook, a feature introduced in React 16.8.

Understanding ES6+ functions with JSX, component props, and component state is essential to building modern web applications using React. These concepts allow for reusable and interactive components that can be customized with different data.

What You'll Learn

Use ES6+ functions with JSX to render React components
Write JSX syntax to create custom components rendered to the DOM
Pass data into components using component props
Manage component state to store data that changes over time
Initialize state in a constructor or with the state hook introduced in React 16.8

Key Takeaways

React components are the building blocks of a React application and can be written as ES6+ functions with JSX.
JSX is a syntax extension for JavaScript that allows HTML-like elements to be written in code.
State allows React components to store data that can change over time, enabling dynamic and interactive updates.
State can be initialized in a constructor or by using a state hook, a feature introduced in React 16.8.
Understanding ES6+ functions with JSX, component props, and component state allows for reusable and interactive components that can be customized with different data.

Frequently Asked Questions

What does this React.js module cover?

This module covers ES6+ functions with JSX to render components, component props, and component state, which are core concepts in React, a JavaScript library for building modern web applications.

What is JSX in React?

JSX is a syntax extension for JavaScript that allows HTML-like elements to be written in code. With JSX, developers can create custom components that can be rendered to the DOM.

How can state be set in a React component?

State can be initialized in a constructor or by using a state hook, a feature introduced in React 16.8. State allows components to store data that can change over time.

Why are component props and state important?

Understanding ES6+ functions with JSX, component props, and component state is essential to building modern web applications using React, allowing for reusable and interactive components that can be customized with different data.

What lessons are included in this module?

The module includes three lessons: ES6+ Functions With JSX to Render Components, Component Props, and Component State.