Advertisement
GeorgiLukanov87

react-helpers

Sep 4th, 2023
827
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Create new reacta app:
  2. In terminal execute: "npx create-react-app ." (with "." you reffer the current folder for main project dir)
  3. Then cd the app dir and execute: "npm start"
  4.  
  5. ------------------------------------------------------------------------------------------
  6.  
  7. Router
  8. 1.npm i react-router-dom
  9. import { BrowserRouter } from 'react-router-dom';
  10.  
  11. wrap our "<App />" with "<BrowserRouter>":
  12.  
  13.     <BrowserRouter>
  14.             <App />
  15.     </BrowserRouter>
  16.  
  17. ------------------------------------------------------------------------------------------
  18.  
  19. 2.import { Routes,Route} from 'react-router-dom';
  20. syntacs:
  21.  
  22. <Routes>
  23.     <Route path="/" element={<Home />} />
  24. </Routes>
  25.  
  26. ------------------------------------------------------------------------------------------
  27.  
  28. 3.import { Link } from 'react-router-dom';
  29.  
  30. example for navbar(href #):
  31.  
  32. <Link className="home" to="/">
  33.     This is home page!
  34. </Link>
  35.  
  36. <NavLink></NavLink> -> when u want to use .isActive property! can be mixed Link & NavLink
  37. ------------------------------------------------------------------------------------------
  38.  
  39. FOR DEPLOY REACT APP IN FIREBASE:
  40.  
  41.  
  42. 0. npm -build
  43. 1. nmp i -g firebase-tools
  44. 2. npm -init
  45. 3. type enter , choose option: Hosting: configure files for Firebase hosting and ....
  46. 4. choose existing project and find it...
  47. 5. use "build" for public dir.
  48. 6. configure as a SPA app (rewrite all urls to /index.html) - YES
  49. 7. git continue - NO
  50. 8. override - NO
  51. 9. execute - firebase deploy
  52.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement