Rendering Functional Components in React

Create a Functional Component

Write a functional component named 'Welcome' that accepts a 'user' prop and renders 'Welcome, user!'.

Expected output: A rendered message like 'Welcome, Alice!' when user='Alice'.

Hint: Use a function that returns JSX with props.user.

Modify Component to Use Fragment

Update your 'Welcome' component to return two sibling elements without a wrapping div using React fragments.

Expected output: Two elements rendered side by side without extra DOM nodes.

Hint: Use <> and </> to wrap multiple elements.

React renders functional components by calling the component function and using the returned JSX to update the UI.

Functional components are simpler and return JSX directly, while class components use lifecycle methods and render functions. Both ultimately return JSX for rendering.

React re-invokes the functional component with new props, compares the returned JSX with the previous output, and updates the DOM accordingly.