Lab 4: Your First Component
Objectives
- Create a component
- Render the component
Steps
Create a component
Create the directory
src\projects
.Create the file
src\projects\ProjectsPage.jsx
In the file, create a function component that returns the following html:
<h1>Projects</h1>
The solution code for the component appears next. Challenge yourself to write it from scratch before looking at it.
In VS Code, you could use this extension VS Code ES7 React/Redux/React-Native/JS snippets that you installed as part of the setup for the course and then type
rfce
thentab
.Solution
src\projects\ProjectsPage.jsx
function ProjectsPage() {
return <h1>Projects</h1>;
}
export default ProjectsPage;
Render the component
Remove the
<blockquote>...</blockquote>
we returned in the last lab and replace it with<ProjectsPage/>
wrapped in adiv
with a cssclass
ofcontainer
.src\App.jsx
+ import ProjectsPage from './projects/ProjectsPage';
function App() {
- return (
- <>
- <blockquote cite="Benjamin Franklin">
- Tell me and I forget, teach me and I may remember, involve me and I learn.
- </blockquote>
- </>
- );
+ return (
+ <div className="container">
+ <ProjectsPage />
+ </div>
+ );
}tipBe sure to include the import for the component at the top of the file.
Verify the following is displayed in the browser:
Projects