Lesson 5 of 11
Lesson Progress: 0%
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.
Instructions
▼ ← Click the triangle to hide or reveal instructions.Hello function is a small React function that makes something show on the page.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.render(<Hello />);, which is shorter-looking.Render(<Hello />); is often easier for many people to read.Instructions
▼ ← Click the triangle to hide or reveal instructions.const Message = () => part names the component and sets it up as an arrow function.() is empty now, but later it can hold input values for the component.Instructions
▼ ← Click the triangle to hide or reveal instructions.const FruitList = () => part gives the component its name and sets it up as an arrow function.() is empty here, but later it can hold input values for the component.list-style-type becomes listStyleType and padding-left becomes paddingLeft.Instructions
▼ ← Click the triangle to hide or reveal instructions.const BlueBox = () => part gives the component its name and sets it up as an arrow function.() is empty here, but later it can hold input values for the component.background-color becomes backgroundColor.Instructions
▼ ← Click the triangle to hide or reveal instructions.h1 without writing the word return.const Hello = () => part names the component and sets it up as an arrow function.Instructions
▼ ← Click the triangle to hide or reveal instructions.return.const Message = () => part names the component and sets it up as an arrow function.return statement is missing because the value is sent back automatically in this shorter style.Instructions
▼ ← Click the triangle to hide or reveal instructions.return.const FruitList = () => part names the component and sets it up as an arrow function.() is used so the JSX can be written across several lines.return statement is missing because this shorter arrow function style sends the JSX back automatically.return.Test Incomplete
const Hello = () => {
return <h1>Hello</h1>;
};
render(<Hello/>);const Message = () => {
return <p>This is a message.</p>;
};
render(<Message/>);const FruitList = () => {
return (
<ul style={{ listStyleType: "disc", paddingLeft: "20px" }}>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
);
};
render(<FruitList/>);const BlueBox = () => {
return (
<div
style={{
width: "100px",
height: "100px",
backgroundColor: "blue"
}}
></div>
);
};
render(<BlueBox/>);const Hello = () => <h1>Hello</h1>;
render(<Hello/>);const Message = () => <p>This is a message.</p>;
render(<Message/>);const FruitList = () => (
<ul style={{ listStyleType: "disc", paddingLeft: "20px" }}>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
);
render(<FruitList/>);