From the course: React Practice for Beginners: Build and Modify Basic Components

Working with React - React.js Tutorial

From the course: React Practice for Beginners: Build and Modify Basic Components

Start my 1-month free trial Buy for my team

Working with React

“

- [Instructor] Let's talk about working with React. We use React for creating user interfaces. Here's the official website of React, react.dev. React is a component-based library for creating dynamic user interfaces. Everything we build in React is made up of components. These are small building blocks that we can use over and over again. A component returns a part of the user interface. To create a component rewrite a regular function that returns JSX. JSX is the HTML like syntax React uses, we'll go over that in more detail in the next video. React then automatically calls these functions when rendering the page. Let's see it in action. Alright, for this first demo, let me show you how to set up a React app with feed. In the command line, I'm going to type MPM, create the fit at latest, and then I'll specify the name of my project. After that, I'm going to say that I want to use the template, react for it. Then I need to step inside my folder and install my dependencies. I can already run the app with the command npm run dev. And here you can see the default website. It has a basic counter in it. I'm going to clear this and replace this with a simple component. And in here I'm going to remove pretty much all the content. And instead of returning what I was returning, I'm going to return my own component welcome message. But as you can tell, I don't quite have this yet. So let's go in and create a function that represents the welcome message. So I'm going to say function, WelcomeMessage. And in my function, I'll return the part of the UI that I want this function to represent. In this case, it's going to be a basic h2 element that says something else. Welcome to our movie app, and of course, let me remove the unnecessary imports. And for now, I'm fine with the CSS file that was default. Okay, so there are actually two components here. WelcomeMessage and App. WelcomeMessage is a functional component that returns heading. App is the main component, also a functional component, and it includes welcome message inside it. Components can be reused, so you could place welcome message anywhere you need the same message, or duplicate it if you need it more often. And here you can see the result, our h2 is now displaying on the application. Let's grow the HTML like syntax called JSX in more detail in the next video.

Contents