Let’s know some React

  1. What is React: React is is a javascript library, it is not exactly a framework. React is used to build single-page applications. React allows us to create reusable User Interface components.
  2. What is JSX: Actually jsx looks like HTML. But we will not call it HTML. Its stands for javascript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
with jsx
-------------------
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
withOut jsx
---------------------
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));
  1. What is Virtual DOM: React creates a tree of custom objects representing a part of the DOM. For example, instead of creating an actual DIV element containing a UL element, it creates a React. div object that contains a React. ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. Then, when it renders a component, it uses this virtual DOM to figure out what it needs to do with the real DOM to get the two trees to match.
  2. What is Component: Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. Components come in two types, Class components and Function components.
=========class component===========
class Car extends React.Component {
render() {
return <h2>Hi, I have a Car!</h2>;
}
}
========Function component======
function Car() {
return <h2>Hi, I have also a bike!</h2>;
}
  1. What is Props: Props are arguments passed into React components. Props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes:
  2. What is Context-API: Context API is a new feature added in version 16.3 of React that allows one to share state across the entire app lightly and with ease. Let’s see how to use it. This is the alternative to “prop drilling” or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

How to use:

import React, { createContext } from "react";
const UserContext = createContext();
const UserProvider = ({ children }) => {
const [name, setName] = useState("rana");
const [age, setAge] = useState(1);
const happyBirthday = () => setAge(age + 1);
return (
<UserContext.Provider value={{ name, age, happyBirthday }}>
{children}
</UserContext.Provider>
);
};
  1. What is State: State is so important part of React. Sometimes we need to set a data anywhere & after need to use it. In this case, we can use the useState function. In this function, we can set & use our data so easily.
import { useState } from 'react';const [count, setCount] = useState(0);
  1. Conditional Rendering: Conditional rendering is a condition-based render function. Some we need like if the user is male show something else the user is female then shows another thing. In this case, we use conditional rendering & show output to the user.
  2. What is Key: When we are mapping an array in react every item has a different unique key or id. if you did not pass key in our components sometimes react has faced some problems. So we need to pass key in components.
  3. Higher-Order Components: A higher-order component is a function. which takes a component as parameters & returns a new component. When we want to share the same functionality with different components that time we use higher-order components.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

MallocNanoZone = 0;

Thank you Duvy for adding my story to your list. :)

Hashed Snail <Fan Art Contest>

I’m SHOCKED It Removed My Dark Spots In 3 Days, Magic Remedy

Enabling the banking infrastructure for Zoozle — auto-pilot for businesses

SideStories XVI: b00tC4mp.exe

September 24, 2020

AS CHANGEABLE AS THE MOON

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
Tarek Mahmud

Tarek Mahmud

More from Medium

React Redux ♻️

Transitioning from Plain JS to React.

React State Management and Hooks

React concept