Learn React - Your first React component

Опубликовано: 02 Апрель 2023
на канале: Konstantyn's coding

401

In this video we will take a look at basics of react components, how to create and nest them. React components are one of the most core feature of React. Think of them as of building blocks which you can create and then reuse in you whole application.

--------------------------------
Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!

✅ Follow Me:
LinkedIn: / kostiantyn-burlai
Github: https://github.com/burlai

☕ Buy Me A Coffee: https://www.buymeacoffee.com/konstantyn
--------------------------------

In very simple terms you can think of them as about simple JavaScript functions which are returning HTML. This approach is different from other libraries or traditional way of creating web pages - when you are creating your HTML page structure and then add some interactivity in JavaScript.
In React everything is just JavaScript, so logic, interactivity and markup are tight together in this concept of components.

So, there are a couple of important things going on here. Every component name should start with a capital letter, or it will not work, so our component is called `Heading` . We can use any JS function syntax we want, but we will use arrow functions as a new standard.
When we returning the markup from the component, it looks almost like HTML and React is making the HTML out of it under the hood. But it is still JavaScript. React is calling this markup JSX. That's why we are using `className` attribute, not `class`, like in HTML.

If our component is very small and could be made with one line of code, we could write it without parentheses. But if you have more than one line of code, like in our example, **JSX should be placed inside parentheses**.

Another important thing - we can't return multiple JSX tags from component. So if we have several tags in our markup, they should be inside a single tag, like `header` in this case.

And the last important remark - you can't define component inside other component. Only use it inside other component. This is a React convention which we should follow. That means that we are defining each and every of our component separately and then combining them while building the UI.

That was the basics on creation of the React components. Follow me to learn more in next videos and happy coding!

#react #reactjs #reactjstutorial