Do you know the things about React?

5 min readNov 4, 2020

01. Functions vs classes

Components created with the function. function components release after class components. Function components introduced “React Hooks”.The React hooks release introduced a new API to make a function component stateful and give it many other features. With this new API, most of what is usually done with React can be done with functions. The class-based syntax is only needed for advanced and very rare cases. I believe the new API will slowly replace the old one but that’s not the only reason I want to encourage you to use it

I’ve used both APIs in large applications and I can tell you that the new API is far more superior than the old one for many reasons but here are the ones I personally think are the most important:

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

React Hook is a special function. All hooks functions begin with the word “use”.React hook functions can only be used in functional components. You can’t use them in class components. React Hook provides a huge advantage. Before react hook function discover we are using the class function. The class function makes our work some complex. But react hook function easy our work. We can easily declare state and update state.

03. Use JavaScript expressions anywhere in JSX

We can easily write JavaScript expressions anywhere in jsx. You can use any JavaScript expression within a pair of curly brackets.

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

Any JavaScript expression can go inside those curly brackets. This is equivalent to the ${} interpolation syntax in JavaScript template literals.

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

Sometimes we are mixed libraries and frameworks. The technical difference between a framework and library lies in a term called inversion of control. A simple example can clarify the difference between Library and Framework. Actually React is Library. But why? Frameworks are huge facilities provide us, but the library provides us narrow facilities.

Library:

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.

Framework:

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.

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.