Some react.js topic

JSX(JavaScript XML)
Generally we know JSX means JavaScript XML.

const JSXDemo = () => {
    return (
     <h1>I am a React.js Developer</h1>
      )
}

Here are <h1>I am a React.js Developer</h1> this syntax is not HTML or not a string. This is called JSX. In JSX we can use dynamic. Developers can keep javascript expressions in JSX. JSX is also a javascript expression. After the compilation, JSX expressions are converted into a javascript function call and then catalyzed into a javascript object. In this JSX we can use the CSS attribute as a string for styling elements.

Context API
React context is a method which allows developers to pass data from component to component without using props.
Example:

import React from ‘react’;

export const UserContext = React.createContext();

const App = () => {
    return (
        <UserContext.Provider>
            <User></User>
        </UserContext.Provider>
)
}

Custom hooks in React
Developers can build their own hooks which are reusable functions. When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!
Example:
Create a custom hook:

const useRainyStatus = (rainy) => {
    const [isRaining, setIsRaining] = useState(null);

    return isRaining;
}

Let’s now use this custom hook:

const rainyStatus = (props) => {
    const isRaining = useRainyStatus(props.raining.yes);

if(isRaining === null) {
        return ‘just wait a sec..’;
}
return isRaining ? ‘Raining’ : ‘Not Raining’;
}