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.