Introduction to React - Lesson 5

React regular function components use the classic `function Name() ` style, while arrow function components use a shorter form like `const Name = () => `. Arrow function components became more popular as modern JavaScript features spread, especially after developers started using newer tools and syntax in everyday React work. Years ago, regular function components were very common and arrow function components were less universal because not every project used the newer JavaScript setup. Today, arrow function components are extremely common in React code because many developers like their shorter look and the way they fit nicely with modern coding style. One advantage of arrow function components is that they are compact and often feel neat and easy to scan, especially in small components. Regular function components are still fully valid and also very common, but arrow function components are now a normal everyday choice in modern React projects.

• React can use both regular function components and arrow function components.
• Arrow function components are a shorter way to write a React component.
• Years ago, regular functions were seen more often, but today arrow functions are very common.
• Many people like arrow function components because they look small and simple.
• Many tutorials use regular functions because they are very readable, while many real projects also use arrow functions as a team preference.
• Both styles work, but arrow function components are now a normal choice in modern React.

const Hello = () => {
  return <h1>Hello</h1>;
};

render(<Hello/>);

• This Hello function is a small React function that makes something show on the page.
• It has a simple shape: first the function is named, then it gives back one thing to display.
• return React.createElement tells React to make an h1 heading with the words Hello, world!.
• render(Hello); is used so React can take that function and show its result on the screen.
• An alternative way is render(<Hello />);, which is shorter-looking.
• Render(<Hello />); is often easier for many people to read.

const Message = () => {
  return <p>This is a message.</p>;
};

render(<Message/>);

• This is a React arrow function component, which is written using normal JavaScript arrow function style.
• The const Message = () => part names the component and sets it up as an arrow function.
• The () is empty now, but later it can hold input values for the component.
• Arrow function components are nice because they are short, simple, and very common in modern React.

• This is a React arrow function component, and it is written using normal JavaScript arrow function style.
• The const FruitList = () => part gives the component its name and sets it up as an arrow function.
• The () is empty here, but later it can hold input values for the component.
• In JSX, CSS property names often use camelCase, so list-style-type becomes listStyleType and padding-left becomes paddingLeft.

• This is a React arrow function component, and it is written using normal JavaScript arrow function style.
• The const BlueBox = () => part gives the component its name and sets it up as an arrow function.
• The () is empty here, but later it can hold input values for the component.
• In JSX, CSS property names often use camelCase, so background-color becomes backgroundColor.

• This is a React arrow function component, written in normal JavaScript arrow function style.
• Implicit return means the component gives back the h1 without writing the word return.
• The const Hello = () => part names the component and sets it up as an arrow function.
• The curly brackets are missing here because this short form can return the JSX right away.

• This is a React arrow function component, written in normal JavaScript arrow function style.
• Implicit return means the component gives back the paragraph without writing the word return.
• The const Message = () => part names the component and sets it up as an arrow function.
• The curly brackets are missing here because this short form can return the JSX right away.
• The return statement is missing because the value is sent back automatically in this shorter style.

• This is a React arrow function component, written in normal JavaScript arrow function style.
• Implicit return means the component gives back the list without writing the word return.
• The const FruitList = () => part names the component and sets it up as an arrow function.
• The curly brackets are missing here, and () is used so the JSX can be written across several lines.
• The return statement is missing because this shorter arrow function style sends the JSX back automatically.

• Different terms can be used for the same short arrow function style.
• Arrow function with implicit return means the function gives something back without writing the word return.
• Concise body arrow function means the function is written in a shorter way.
• One-line arrow function or component is often said when the whole function fits on one line.
• Short arrow component and arrow component shorthand are more casual terms that may be use for this.
• The most correct/common general names are usually implicit return functions/components and concise body functions/components.