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’;
}
Top comments (0)