Some important topics of ReactJs

01| Difference between Js and JSX

function hello() {
  return <div>Hello world!</div>;
}
function hello() {
  return /*#__PURE__*/React.createElement("div", null, "Hello world!");
}

• When we write js then it is javaScript.
• But we write JXS then it converted js file later(Example: second function)
• When we write JXS type then the browser cannot read this type. It converts by babel and made plain simple js type.

JXS Code:
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
Compile to readable:
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

• The first code is JXS code. For browser readable browser convert it and the converted code is second code.

02| Function as children in JSX

function Test(props) {
  let items = [];
  for (let i = 0; i < props.number; i++) {    
     let element = props[i];
     items.push = element;
  }
  return <div>{items}</div>;
}
function List() {
  return (
    <Test>
      {(index) => <div key={index}>This is item {index} in the list</div>} 
    </Test>
  );
}

• You can pass a function in JSX element.
• In this example, the arrow function is passed in the JSX element.

03| Difference between Library and Framework:

• The technical difference between a library and a framework relies on the inversion of control. A simple example can clarify the difference between Library and Framework. Actually React is Library.

i) Library:

• Library is simply a collection of codes obviously so some functions or some like document object model or all these things are being packed together and is being used over and over.
• You have to power to call the code whenever you like.

i) Framework:

• Framework calls your codes and furthers your code can call to a library.
• In Framework is actually calling to your code.

Library and Framework both of them are dependent on the rule one is your home and another is your college. I am telling to try that your school is framework and your home is like library.Less number of rule is going to be possibly a Library and when there are more number of rules is going to be possibly a Framework. For example your home you can throw off your t-shirts or bags where ever you like . But your school you put your bag in a particular place. It is the deffirence between Library and Framework.

04| String Literals

<Component message="I am a programmer" />
<Component message={'I am a programmer'} />

• You can pass a string literals as a prop.

<Component> 
   <Home />
</Component>

• You can provide more JSX elements as children.
• These JSX elements called is a nested element.

05| Compare Function Component vs Class Component:

i) Functional Component:

• Functional Component also is known as a Stateless component.
• It accepts props properties.
• We can use hook properties in functional components.
• There is no render() method in Functional Component.

ii) Class Component:

• Class Component also is known as a Stateful component.
• It has render() method returning HTML.
• We can’t use hook properties in Class components.
• The UI login is very complex.

06| default props Method:

const App =() => {
return(
  <div>
     <Child fullName="Azizul Haque" />
  </div>
    )
}
const Child = (props)=>{
return(
  <div>
     <h1>{props.fullName}</h1>
 </div>
  )
}

• default props method means it set a default value by props.
• When the child component is rendered then see the UI full Name is Azizu Haque

const App =() => {
return(
  <div>
     <Child fullName={fullName} />
  </div>
    )
}
const Child = (props)=>{
return(
  <div>
     <h1>{props.fullName}</h1>
 </div>
  )
}

• Now When a child is rendered then the output is undefined. Causes Child component has no value and we pass the props that have no value.

const App =() => {
return(
  <div>
   <Child fullName={fullName} />
  </div>
    )
}
const Child = (props)=>{
return(
  <div>
     <h1>{props.fullName || "Azizul Haque"}</h1>
 </div>
  )
}

• Now we pass a default value by props and the value is Azizul Haque.
• Now we can see the UI Value is Aziul Haque.

07| Prop-Types:

import React from 'react';
import PropTypes from 'prop-types';

export function Component({name, img, description}){
  return(
       <div>
           <img src={img} alt=""/>
           <h1>{name}</h1>
           <p>{description}</p>
        </div>
    )
}
Component.propTypes = {
   name: propTypes.string.isRequired;
   description: propTypes.string.isRequired;
   img: propTypes.string.isRequired;
 }

• PropTypes are these types you can declare that what type of data reacts render.
• This type of data is boolean, string, number, etc.
• If you declared that the data type is a string. But users give number data type then it shows an error when it rendered.

08 | React Hook:

• Hooks are the new feature in React that is introduced in the 16.8 version.
• It allows you to use state and other React features without creating a class.
• React hook functions can only be used in functional components. It can not use an in-class component.

09.Optimizing React Performance

Use the Production Build

• When we are coding sometimes we will see Warnings.
• By default, React includes many helpful warnings.
• These warnings are very useful in the development purpose.
• To build a project with Create React App, run: npm run build.
• This will create a production build of our app in the build/ folder of our project.

10. Conditional rendering

function App() {
  const List = ["Rahim", "Karim", "Jamal"]
return (   
    <div>    
        {List ? "Hi Kolmilota": "Yeeeee" }
    </div>);}
export default App;

Ternary operator

• We can conditionally render by using the ternary operator in JSX.
• ternary operator outside return the expression

11| Expression and Loops are not passed as props:

function prime(props) {
 const {number} = props;
 let title;
 if (number % 2) {
    title = <strong>even</strong>
  }else {
    title = <i>odd</i>
   }
 return (
   <div>{number} is an {title} number</div>
 )
}

• You can not pass if statement in JSX file directly.
• When you need to pass a statement in JSX component then at first you need to assign the value into a variable.
• Then you can pass the value in JSX component.

12| Spread operator in JXS:

function test1() {
  return <Greeting firstName="Azizul" lastName="Haque" />;
}

function test2() {
  const props = {firstName: 'Azizul', lastName: 'Haque'};
  return <Greeting {...props} />;
 }

• You can pass props as an object that is seeing the test1 function.
• Or, you can pass a full object by using the spread operator.
• At first full object assign a variable then pass by using the spread operator.

13| Booleans, Null and Undefined are Ignored:

<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

• Booleans, Null. Undefined is a valid children.
• But they simply don’t render.

<div>
  {props.messages.length &&    <MessageList messages=  {props.messages} />
  }
</div>

• If the value is “0” then it is a falsy value Not false and the div rendered. props.messages.length>0, this value is not falsy value , it is false value.And the JSX is not rendered.