React JS Tutorial-2

Let’s get Started

In this tutorial, we will learn the basics of component and few React terminologies.

In above image, you can see a file named App.js inside src folder. In React, App component is the root component for all the component we create. We will learn more about it later in this course.

You can see in mage that we have a function named App which we are exporting using export function default App. So, when we export something, we have to import it somewhere. This question might came in your mind that, “Where exactly, we import this App component ? ”.

Inside index.js file, we are importing our App Component from file App.js at Line 4. We are using ReactDOM to render our App Component.

If you notice, first image carefully then you will might notice two things:

1. We had used function in our App Component.
2. We had written HTML inside our function.

We will be discussing all these two points one by one.

Type of component in React

In React we can build component by using either function or class. In this series we will learn react by making functional components.

What is JSX ?

JSX stands for JavaScript XML. JSX is used in React which allows developers to use HTML inside JavaScript.

In first image there is a return statement in our function named App. We are printing “This is my first app” inside our h1 tag.

Now we will write same h1 tag inside our firstApp.js file.

Let’s use this component inside our App component.

At Line 1 in above image we have imported FirstApp component from file FirstApp.js. You will notice that we are not writing .js in file path while importing. Because we don’t need it. We have to just give file name that’s it.

**If you have any doubt, please feel free to ask in comment. We will catch up in next tutorial of this series.**