Conteúdo do Curso
React Tutorial
React Tutorial
Syntax
In React, functional components are defined as JavaScript functions that take in props as an argument and return JSX. Here is the basic syntax for a functional component:
import React from 'react';
function MyComponent(props) {
return (
// JSX goes here
);
}
The function name (in this case, MyComponent
) is used to represent the component, and the function takes in a single argument called props
. props stand for "properties" and is an object that contains all the data that is passed to the component from its parent.
Inside the function, you can return JSX by wrapping it in parentheses. For example, here is a functional component that renders a simple heading:
import React from 'react';
function MyHeading(props) {
return (
<h1>{props.title}</h1>
);
}
You can then use this component in your JSX by calling it like a regular HTML tag:
<MyHeading title="Welcome to My App" />
This will render the following JSX:
<h1>Welcome to My App</h1>
Functional components can also accept additional arguments, such as event handlers or values that are calculated within the component. For example, here is a functional component that renders a button that increases a counter when clicked:
import React from 'react';
function CounterButton(props) {
return (
<button onClick={props.onClick}>
{props.count}
</button>
);
}
This component accepts an onClick
prop that is a function that is called when the button is clicked, and a count
prop that is the current value of the counter. You can then use this component like this:
<CounterButton count={count} onClick={handleClick} />
This will render a button with the current count
value and will call the handleClick
function when the button is clicked.
Functional components are a simple and powerful way to define components in React, and they are a great choice for many use cases. They are easy to understand and use, and they can make your code more concise and readable.
Obrigado pelo seu feedback!