react2-week1/class-exercises #315
Conversation
github-actions
bot
changed the title
| export default function InfoPanel(props) { | ||
| return ( | ||
| <> | ||
| <div className="container"> | ||
| <img className="my-img" src={props.imageUrl}></img> | ||
| <div className="content"> | ||
| <h2 className="my-title">{props.title}</h2> | ||
| {props.children} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); |
There was a problem hiding this comment.
Here we used the props.children to tell React where we want the custom HTML to appear. In our case we placed it underneath out heading.
| <InfoPanel | ||
| imageUrl={ | ||
| "https://images.ctfassets.net/ljpkryr3szrz/3lNk9flnJXV9VBtCxTeB5c/7ffee160ffe05d43bff4cff636cccd2d/IMG_7644.jpg" | ||
| } | ||
| title="The program" | ||
| > | ||
| We believe in a world in which education and quality jobs are | ||
| accessible for all. This is why we have designed a free 34 week | ||
| program for newcomers in tech. | ||
| </InfoPanel> |
There was a problem hiding this comment.
Here we insert our component InfoPanel in our page. Notice how we add the text between the start- and endtag. This will become the props.children inside the component.
<InfoPanel> Any custom JSX can go in here </InfoPanel>
There was a problem hiding this comment.
Remember that React will only display images and icons that are placed inside the /public folder.
| const [theme, setTheme] = useState("dark"); | ||
|
|
||
| return ( | ||
| <> | ||
| <ThemeContext.Provider value={theme}> |
There was a problem hiding this comment.
Here we are providing the value for our global theme for the ThemeContext.
<ThemeContext.Provider value={theme}>
Any components inside here can access the value of ThemeContext
</ThemeContext.Provider>
| import { createContext } from "react"; | ||
|
|
||
| export const ThemeContext = createContext("light"); |
There was a problem hiding this comment.
Here we are creating a ThemeContext with the initial value "light"
| export default function ThemedHeader({ title }) { | ||
| const theme = useContext(ThemeContext); | ||
| const classes = `themed-header ` + theme; | ||
| return <h2 className={classes}>{title}</h2>; | ||
| } |
There was a problem hiding this comment.
Here we read out the value of the ThemeContext in one of our components. Notice how we don't have to pass it via props.
| <img | ||
| src={process.env.PUBLIC_URL + "sun.svg"} | ||
| alt="light theme" | ||
| /> |
There was a problem hiding this comment.
When you want to include an image or icon from the public folder you have to use the url:
process.env.PUBLIC_URL + {image path inside public folder}
| <ThemeContext.Provider value={"dark"}> | ||
| <ThemeContainer | ||
| title="Dark theme" | ||
| buttonText="Use Dark theme" | ||
| onButtonClick={(x) => setTheme("dark")} | ||
| > | ||
| <img | ||
| width={50} | ||
| height={50} | ||
| src={process.env.PUBLIC_URL + "moon.png"} | ||
| alt="random" | ||
| /> | ||
| <ThemedText text="Dark themes are great for low-dark environments. It's also great for people who prefer darker colors." /> | ||
| </ThemeContainer> | ||
| </ThemeContext.Provider> | ||
|
|
||
| <ThemeContext.Provider value={"hacker"}> | ||
| <ThemeContainer | ||
| title="Hacker theme" | ||
| buttonText="Use Hacker Theme" | ||
| onButtonClick={(x) => setTheme("hacker")} | ||
| > | ||
| <img | ||
| width={50} | ||
| height={50} | ||
| src={process.env.PUBLIC_URL + "script.png"} | ||
| alt="random" | ||
| /> | ||
| <ThemedText text="Hackers gonna hack, hack, hack..." /> | ||
| </ThemeContainer> | ||
| </ThemeContext.Provider> |
There was a problem hiding this comment.
Here you can see how each component has its own provider with a hardcoded value. This will override the value for this particular part of the page. This enable us to define different values in different parts of our page.
❗ This PR is not required to be reviewed. ❗
This PR contains the code from the React 2 lesson 1:
contextsand inserticonsprops.childrento recreate the HackYourFuture website