DEV Community

ABU BAKKAR SIDDIQUE
ABU BAKKAR SIDDIQUE

Posted on

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>
      )
}

Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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’;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)