How to become a React developer in 2022? Here is the complete Roadmap.

const blog = 'programinja'
You can add variable "blog" in "p" element by using power of JSX.
<p>Blog: {blog}</p>

import React from 'react'
const SimpleComponent = () => {
  return (
        <a href='https://www.google.com'>Google!</a>
  )
}
export default SimpleComponent

/// simpleComponent.js
import React from 'react'
const SimpleComponent = ({ label, url }) => {
  return (
        <a href={label}>{url}</a>
  )
}
export default SimpleComponent

/// index.js
import SimpleComponent from './simpleComponent'
const App = () => {
  return (
      <SimpleComponent label='Google!' url='https://www.google.com' />
    )
}

import React, { useState } from 'react'
const App = () => {
const [sum, setSum] = useState(1) /// The initial value of sum is 1.
return (
  <>
    <button onClick={() => setSum(sum + 1)} >+</button
    <span>{sum}</span>
    <button disabled={sum === 1} onClick={() => setSum(sum - 1)}>-    </button>
  </>
  )
}
export default App

import { useLayoutEffect, useState } from 'react'
const useWindowSize = () => {
const [size, setSize] = useState([0, 0])
useLayoutEffect(() => {
const updateSize = () => {
setSize([window.innerWidth, window.innerHeight])
}
window.addEventListener('resize', updateSize)
updateSize()
return () => window.removeEventListener('resize', updateSize)
}, [])
return size
}
export default useWindowSize

const NavBar = () => {
  const [width] = useWindowSize()
  return (
    width > 786 ? <Desktop /> : <Mobile />
  )
}