Components?

Components are the fundamental building blocks of React applications. Think of Instagram's feed as an example - each post you see is actually a reusable component. Let me break this down:

function Post({ author, content, likes, comments }) {
  return (
    <div className="post">
      <PostHeader author={author} />
      <PostContent content={content} />
      <EngagementBar likes={likes} />
      <CommentSection comments={comments} />
    </div>
  );
}

The postcard can serve as a major component that nests other components mentioned earlier. This component-based approach offers several advantages:

  1. Reusability: All posts in the application are defined only once; the component simply displays different text and images each time.
  2. Modularity: This is a core principle in the world of development. From language syntax to large microservices architecture, this principle helps manage various elements effectively.

Functional and Non-functional components

1. Functional Components ( Modern Approach ):

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. Class Components ( Old Approach ):

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Controlled & Uncontrolled Components

  1. Controlled Components

    If a component contains a form and its input fields are controlled by React state (useState) instead of useRef, it is a controlled component.

    function ControlledInput() {
  const [text, setText] = useState("");

  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

  2. Uncontrolled Component

    If a component contains a form and its input fields are controlled using useRef instead of React state, it is an uncontrolled component.

    function UncontrolledInput() {
  const inputRef = useRef();

  return <input ref={inputRef} />;
}

Why it is called uncontrolled