Do you know the things about React?

01. Functions vs classes

  • You don’t have to work with class “instances” and their implicit state. You work with simple functions that are refreshed on each render. The state is explicitly declared and nothing is hidden. All of this basically means that you’ll encounter fewer surprises in your code.
  • You can group related stateful logic and separate it into self-contained composable and sharable units. This makes it easier to break complex components into smaller parts. It also makes testing components easier.
  • You can consume any stateful logic in a declarative way and without needing to use any hierarchical “nesting” in components trees.

02. React Hooks

03. Use JavaScript expressions anywhere in JSX

function App() {  return (    <div>       {          Math.ceil(Math.random() * 100)       }    </div>  );}export default App;

04. Props in JSX

<mediumComponent addition={1 + 2 + 3 + 4} />
  • We can pass any JavaScript expressions as props by surrounding curly brackets {}.
  • In this example the total value addition = 21, causes the expression is 4 + 3 + 8 + 6

05. JavaScript Expressions as Children

function Item(props) {
return <li>{props.message}</li>;}

function lists() {
const todos = ['Mango', 'Banana', 'Papaw'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)} </ul>
);
}
  • We can pass a function in JSX element.
  • In this example, the arrow function is passed in the JSX element.

06. Default props

const myComponent =() => {
return(
<div>
<Child fullName="Kawsar Ahmed" />
</div>
)
}
const Child = (props)=>{
return(
<div>
<h2>{props.fullName}</h2>
</div>
)
}
  • Default props it means we can set a default value by props.
  • When the child component is rendered then we will see the full Name is “Kawsar Ahmed”.
const myComponent =() => {
return(
<div>
<Child />
</div>
)
}
const Child = (props)=>{
return(
<div>
<h2>{props.fullName}</h2>
</div>
)
}
  • Now if we render a child component then we will see “undefined”, cause we are not passing a value.
  • If we are not passing the value that means child components can’t find props.
  • So we see an undefined error message.
const myComponent =() => {
return(
<div>
<Child fullName="Kawsar Ahmed" />
</div>
)
}
const Child = (props)=>{
return(
<div>
<h2>{props.fullName || "Your Name"}</h2>
</div>
)
}
  • Now we pass a default value by props and the value is “Kawsar Ahmed”.
  • Now we can see the UI Value is “Kawsar Ahmed”.
  • If we are not passing default props then the child finds his default value.
  • Not we can show “undefined”.

07. Prop-Types

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

export function myComponent({name, img, description}){
return(
<div>
<img src={img} alt="Kawsar Ahmed"/>
<h1>{name}</h1>
<p>{description}</p>
</div>
)
}
myComponent.propTypes = {
name: propTypes.string.isRequired;
description: propTypes.string.isRequired;
img: propTypes.string.isRequired;
}
  • PropTypes means data types.
  • We can set data types manually.
  • This type of data is like string, number, boolean. 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.Optimizing React Performance

Use 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.
  • However, they make React larger and slower so we should make sure to use the production version when we deploy the app.
  • If our project is built with Create React App, then we run: npm run build.
  • This will create a production build of our app in the build/ folder of our project.

Single-File Builds

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  • We recommended production-ready versions of React and React DOM as single files:
  • Remember that only React files ending with .production.min.js are suitable for production.

09. Conditional rendering

function App() {const todoList = ["ChungHua", "Miyandu", "Fayandu"]return (   <div>    {       todoList ? "Hi TodoList": "Yeeeee"    }  </div>);}export default App;

Ternary operator

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

Sort Circuit

  • We have one value then we can conditional rendering by using the sort circuit in JSX
  • Sort circuit cant set else values.
  • Sort circuit work on one value.

10. Library vs Framework

  • Library provides us narrow facilities.
  • If we can do our projects works library can’t provide all facilities then we are using another package or library.
  • The library can use for your small projects but if you want to do your large projects by using the library is not possible.
  • The 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 are being used over and over.
  • You have to power to call the code whenever you like.
  • The framework provides us huge facilities.
  • We can be done our projects by frameworks.
  • The framework calls your codes and furthers your code can call to a library.
  • In Framework is actually calling to your code.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store