Fact 01: in Respond within function return scope what is allowed and what is not allowed to write?

In a React function component's return statement, you are allowed to write JSX elements and expressions, but there are a few things that are not allowed. Here are some general rules:

Allowed:

• JSX elements, e.g. <div>, <p>, <button>, etc.

• Expressions, e.g. variables, function calls, arithmetic, etc.

• Fragments, e.g. <></>, <React.Fragment></React.Fragment>

Not allowed:

• Statements, e.g. if, for, while, switch, etc. (use ternary operators or map/filter instead)

• Multiple adjacent JSX elements without a container (use fragments or wrap them in a container element)

• Returning more than one top-level element (use fragments or wrap them in a container element)

Here's an example of a valid return statement in a React function component:

function MyComponent(props) {
  const name = "John";
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <>
      <h1>Hello, {name}!</h1>
      <button onClick={handleClick}>Click me</button>
    </>
  );
}

Note that you can also use curly braces {} to include JavaScript expressions inside JSX elements, like {name} and {handleClick} in the example above.

Fact 02: What can and cannot be written in the inside function scope of React.js?

In a React function component's scope, you are allowed to write any JavaScript code that is allowed within a normal function. This includes declaring and using variables, calling functions, using control structures like if and for, and so on.

However, there are some best practices and conventions that are commonly followed in React function components. Here are a few guidelines:

Allowed:

• Declaring and using variables, e.g. const name = "John";

• Declaring and using state variables using the useState hook, e.g. const [count, setCount] = useState(0);

• Declaring and using props, e.g. function MyComponent(props) {...}

• Defining and calling helper functions within the component, e.g. function calculateTotal(price, quantity) {...}

• Importing and using other modules, e.g. import { useState } from "react";

Not recommended:

• Modifying props directly (props should be treated as read-only)

• Modifying state directly (use the setState function returned by the useState hook instead)

• Using var to declare variables (use let or const instead)

Here's an example of a React function component that follows these guidelines:

import React, { useState } from "react";

function MyComponent(props) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

Note that these are just general guidelines, and there may be exceptions or edge cases where different practices are appropriate.

Fact 03: What we can pass from one component to another component? and what we cannot pass?

In React, you can pass various types of data from one component to another component through props. However, there are some types of data that you cannot pass directly. Here are some general rules:

Allowed:

• Primitive values, such as strings, numbers, and booleans

• Objects and arrays (including nested objects and arrays)

• React elements (e.g. components, JSX elements)

Not allowed:

• Functions and symbols (cannot be serialized)

• DOM elements (cannot be serialized)

• Non-serializable values (e.g. undefined, NaN, Infinity, -Infinity)

It's worth noting that even if a value is allowed to be passed through props, it may not always be the best practice to do so. Passing too much data through props can lead to complex and hard-to-maintain code. In some cases, it may be better to use other patterns like state management libraries (e.g. Redux) or context API to share data between components.

Here's an example of passing props from a parent component to a child component:

// Parent component
function App() {
  const name = "John Doe";
  const age = 30;
  const hobbies = ["reading", "cooking", "hiking"];

  return <Profile name={name} age={age} hobbies={hobbies} />;
}

// Child component
function Profile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Hobbies: {props.hobbies.join(", ")}</p>
    </div>
  );
}

In the example above, the name, age, and hobbies data are passed from the parent component (App) to the child component (Profile) through props.