React Lessons I leaned tonight

I was studying React tonight and learned:

You include all pages and components that are supposed to go on the websites, and the components and webpages you want to show on every page the user visits, you put these components and webpages outside of the routes on app.js, but the components and webpages you don't want to show on every page , you put these webpages and components in routes on the app.js file.
You use a context provider to wrap all of the route, routes router and wrap everything in the context provider, so you can share data with all the components inside the context provider in the function app.
The purpose of context providers is they allow you to share date with the child components that are inside the context providers without using prop drilling.
Some components don't need to use the context provider in their own individual file while some components need to use the context provider in their own file because some components need access to the shared data . An example of this : import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserContext from './UserContext';
import Header from './Header';
import Profile from './Profile';
import Home from './Home';
import About from './About';
function App() {
const user = { name: 'Alice', loggedIn: true };
return (
<UserContext.Provider value={user}>
<Router>
<Header /> {/* This will show on every page */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
</UserContext.Provider>
);
}
export default App; import React from 'react';
function Home() {
return <div>Home Page</div>;
}
export default Home;import React from 'react';
function About() {
return <div>About Page</div>;
}
export default About;import React, { useContext } from 'react';
import UserContext from './UserContext';
function Profile() {
const user = useContext(UserContext);
return (
<div>
<h2>Profile</h2>
<p>Name: {user.name}</p>
<p>Status: {user.loggedIn ? 'Logged In' : 'Logged Out'}</p>
</div>
);
}
export default Profile;import React, { useContext } from 'react';
import UserContext from './UserContext';
function Header() {
const user = useContext(UserContext);
return <header>Welcome, {user.name}!</header>;
}
export default Header;
Prop drilling is when you pass props to multiple components.

These are the things I learned tonight as I am studying React. Hayk, is this correct what I learned or did I get something wrong. I don't know why it shows numbers like this, but from line 5 to 55 is the example of lesson 4.

2 comments