10 Things You Must Know About ReactJS

1. It’s Not A Framework-

Basically Framework already have some own decision. But React is a library. User can make his/her own decision in library but in framework user cannot make his/her own decision. Also framework is largest but Library is small.

2. JSX-

JSX is like a html which render by ReactDOM. It’s totally work by ReactDom API. That means we can write html code in react js that is called jsx. Not only html code we can also write react js component.

Without JSX

const HelloWorld = () => {
return React.createElement(
    "h1",
    {},
    "Hello World"
  );
}

With JSX

const HelloWorld = () => {
return (
     <div>
       <h1>Hello World</h1>
     </div>
    );
}

3. Hooks-

Hooks is a special function in react components. We know we can use react in two ways there are functional components, class components. Hooks is basically made for functional components we cannot use in class components.
There 3 types of basic hooks in react-

useState()
useEffect()
useContext()

There are 7 types of additional hooks in react-

useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()

We can also make custom hook in react js.

4. useState()-

useState hook is very common in react js. When we make a changeable data then we can use this hook. Basically useState return a array with two values. We must distructure this array.

const [count, setCount] = useState(0);

We see the example of useState. We can see there are two variable count and setCount inside a array. Count variable use just for readable we cannot reassign in this variable. If we need to change this value then we must use setCount that is function then the value will change in count.

function Test () {
     const [count, setCount] = useState(0);
     const handleClick = () => {
        setCount(count+1);
     }
    return (
          <button onClick={handleClick}>Click</button>
     )
}

5. useEffect()-

When react component load then useEffect call. It’s like a constructor in class component when class component load then constructor call first, useEffect is same concept. useEffect is a function that accept two parameter, function and dependency. We write the code in function then we set the dependency. If we don’t set dependency then the useEffect call again and again. We can set a dependency as a array if we set empty array then it will call once time.

function Test () {
    useEffect(()=>{
      console.log("Hello World")
    },[])
}

6. useContext()-

When we share a state to all component in react then we can use this hook. We can easily pass states using useContext.

//app.js
export const myContext = createContext();
const App = () => {
  const [user, setUser] = useState({});
  return (
    <myContext.Provider>
      <Home value=[user, setUser] />
    </myContext.Provider>
   );
};
export default App;

Home Component

//home.js
const Home = () => {
  const [user,setUser] = useContext(myContext);
};
export default Home;

7. Props-

We can share data from parent component to child component as a props.

const App= () => {
const [user, setUser] = useState({});
return <Home user={user}></Home>
};
export default App;

In Home Component

const Home = (props) => {
   const { user } = props;
};
export default Home;

8. Fragments-

Fragment is make a group list of children it not create e extra node and not add to DOM.

Using Div:

function App() {
return (
<div>
   <h1>Hello App</h1>
</div>
);
}

If we use without fragments this will render in html like this,

<div id=”root”>
    <div>
      <h1>Hello App</h1>
    </div>
</div>

It create a extra div in html.

Using Fragment:

function App() {
return (
<React.Fragment>
    <h1>Hello App</h1>
</React.Fragment>
);
}

If we use fragment then this will render in html like this,

<div id=”root”>
    <h1>Hello App</h1>
</div>

It not create a extra div direct render to html.

We can use fragment in short way:

function App() {
return (
<>
  <h1>Hello App</h1>
</>
);
}

9. Components-

React components are like a JavaScript function. In javaScript function we can write specific code to perform specific task. In react components are same we just write a little bit of code to perform specific works.

There are two types of components in React. Class components and function components.

class Test extends React.Component {
  render() {
    return <h2>Hi, I am class component</h2>;
  }
}

In class component we use class keywords also extend with React.Component then call render function and then we return any jsx.

function Test() {
  return <h2>Hi, I am function component</h2>;
}

In function component we just declare a function then we easily return any jsx it’s easy than class component

But one thing remember that when we use components in react the component’s name must be started with capital letter other wise we cannot access.