Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
INTPROG - L10 - 11
Routing in React
| Question | Answer |
|---|---|
| Core package in React that provides methods to interact with the Document Object Model (DOM) | React DOM |
| INSTALLING DEPENDENCIES for DOM | npm install react-router-dom |
| How to get multiple data from the API | -- create and import useState const [allPokemon, setallPokemon ] = useState ([ ]) |
| How to get multiple data from the API pt 2 | -- create useEffect useEffect (() => { },{ ]) |
| How to get multiple data from the API pt 3 | -- Insert axios and promise on useEffect() |
| How to get multiple data from the API pt 4 | -- Store the results on state variable setallPokemin(response.data.results) |
| DISPLAY THE DATA | <ol> {allPokemon.map((element, index)=> { return( <li key={index} > {element.name}</li> ) })} </ol> |
| listens to changes in the URL and renders the appropriate components based on the current path | BrowserRouter |
| container for all your Route components. Ensures that only 1st matching route is rendered | Routes |
| used to define a mapping between a URL path and a component. When the URL matches the path specified in a Route, the corresponding component is rendered | Route |
| Requires two attribute: path and element | Route |
| what is the link | path |
| what component to load | element |
| add this for easy navigation | Link |
| Core package in React that provides methods to interact with the Document Object Model (DOM) | React DOM |
| INSTALLING DEPENDENCIES for DOM | npm install react-router-dom |
| How to get multiple data from the API | -- create and import useState const [allPokemon, setallPokemon ] = useState ([ ]) |
| How to get multiple data from the API pt 2 | -- create useEffect useEffect (() => { },{ ]) |
| How to get multiple data from the API pt 3 | -- Insert axios and promise on useEffect() |
| How to get multiple data from the API pt 4 | -- Store the results on state variable setallPokemin(response.data.results) |
| DISPLAY THE DATA | <ol> {allPokemon.map((element, index)=> { return( <li key={index} > {element.name}</li> ) })} </ol> |
| listens to changes in the URL and renders the appropriate components based on the current path | BrowserRouter |
| container for all your Route components. Ensures that only 1st matching route is rendered | Routes |
| used to define a mapping between a URL path and a component. When the URL matches the path specified in a Route, the corresponding component is rendered | Route |
| Requires two attribute: path and element | Route |
| what is the link | path |
| what component to load | element |
| add this for easy navigation | Link |
| What package is used for React routing? | react-router-dom |
| What does BrowserRouter do? | Listens to URL changes and renders the appropriate component. |
| What is Routes? | A container for Route components. |
| What does Route do? | Maps a URL path to a component. |
| What 2 attributes does Route require? | path and element |
| What does path specify? | The URL/link. |
| What does element specify? | The component to load. |
| What replaces traditional href in React Router? | Link |
| What hook accesses parameters from the current URL? | useParams() |
| What does useParams() allow you to access? | Parameters from the current URL. |
| Example route for Pokémon? | <Route path="/pokemon" element={<Pokemon />} /> |
| What happens when /pokemon matches the route? | The Pokemon component is rendered. |
| What file contains the server instructions? | server.js |
| Where should server.js be created? | Inside the server folder. |
| What does npm init do? | Creates package.json for managing dependencies/scripts. |
| What command installs Express? | npm install express |
| A Node.js web application framework. | Express |
| What command runs the server? | node server.js |
| What is Nodemon? | Automatically restarts the Node.js application when files change. |
| What command installs Nodemon? | npm install nodemon |
| How do you run the server with Nodemon? | nodemon server.js |
| What tool is used to test APIs? | Postman |
| What is Postman used for? | Building, testing, managing, and sending API requests. |
| What is CORS? | Cross-Origin Resource Sharing middleware. |
| What command installs CORS? | npm install cors |
| What does mongoose.connect() do? | Connects the application to MongoDB. |
| What folder contains database models? | models |
| What example model file is created? | User.js |
| What folder contains controllers? | controllers |
| What example controller file is created? | userController.js |
| What folder contains routes? | routes |
| What library is used to make API requests? | Axios |
| What hook stores data such as users/Pokémon? | useState() |
| What hook is used for API/data-fetching effects? | useEffect() |
| What Axios method retrieves data? | axios.get() |
| What JavaScript method displays items from an array? | map() |
| What happens after retrieving users? | The users are stored in state and mapped/displayed. |
| What command installs CORS? | npm install cors |
| What command installs Mongoose? | npm install mongoose |
| npm install mongoose | Mongoose |
| What does npm init do? | Creates package.json for managing dependencies/scripts. |
Created by:
user-1782765