10 Things You Must Know About ReactJS

1. It’s Not A Framework-

2. JSX-

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

3. Hooks-

useState()
useEffect()
useContext()
useReducer()useCallback()useMemo()useRef()useImperativeHandle()useLayoutEffect()useDebugValue()

4. useState()-

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

5. useEffect()-

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

6. 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.js
const Home = () => {
const [user,setUser] = useContext(myContext);
};
export default Home;

7. Props-

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

8. Fragments-

function App() {return (<div>   <h1>Hello App</h1></div>);}
<div id=”root”>
<div>
<h1>Hello App</h1>
</div>
</div>
function App() {return (<React.Fragment>    <h1>Hello App</h1></React.Fragment>);}
<div id=”root”>
<h1>Hello App</h1>
</div>
function App() {return (<>  <h1>Hello App</h1></>);}

9. Components-

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

Web Developer