Responsive landing page built with react and tailwind css

Community feedback

• 

  tediko•6,700

  @tediko

  Posted 9 months ago

  Hi!

  You should not use create-react-app to setup and start your React projects. It is no longer recommended by React developer team and was removed from the official documentation. CRA has problems with its performance. It is slow and bulky compared to the modern methods. It also is outdated as the dependencies themselves suffer from warnings during installation. There are few alternatives. I personally use Vite, which I recommend.

  We shouldn't manipulate the DOM directly. React is all about being declarative and so manually selecting DOM elements, manipulating them and attaching event listeners like you did in <NavBar> component is not really the React way of doing things. React utilizes a Virtual DOM to optimize updates to the actual DOM do direct manipulating can interfere with this process, leading to inconsistencies between virtual DOM and the actual DOM. This can cause unexpected behavior, visual glitches and bad performance. Additionally, React components have a lifecycle that dictates when they mount, update, and unmount. Directly manipulating the DOM can disrupt this lifecycle, making it difficult for React to manage component states and updates correctly. For instance, if you remove a DOM element directly, React may not be aware of this change, leading to errors trying to re-render that component. Instead of manipulating DOM directly and using useEffect to handle that side effect you should create local state for that component using useState hook and later on whenever your menu is toggled change that state with event handler using setter function.

  const [isMenuOpen, setIsMenuOpen] = useState(true);
  
  function handleToggleMenu() {
      setIsMenuOpen(prevIsMenuOpen => !prevIsMenuOpen);
  } 
  

  And with that, you can attach event handler to your menu button like so:

  <button
      className="text-gray-700 focus:outline-none focus:text-blue-600"
      onClick={handleToggleMenu}
  >
  

  And to make it work, you have to conditionally add class names for mobile-menu within your JSX.

  <div
      id="mobile-menu"
      className={`${isMenuActive ? '-translate-y-full translate-y-0' : ''}`}
   >
  

  Changing isMenuActive state with handleToggleMenu event handler will trigger re-render of the component which will generate new JSX with updated classes.

  In components where you are returning single DOM element you don't have to wrap returned JSX in <></>. <Fragment> lets you group elements without a wrapper node.

  Have fun!

  01

  Marked as helpful