We just learned the basics of React and JSX. We saw how to create a new React app using the Vite package. In this exercise, we will practice what we just learned by creating a simple landing page (hopefully with some styles ๐ผ).
- Fork this repo
- Clone this repo
-
Upon completion, run the following commands:
git add . git commit -m "done" git push
-
Submit your lab on the student portal
Let's get this party started! First, you will need to create a new React app.
Navigate to the root folder of the LAB. When you're in the root folder, use Vite to create a new React project.
Once you have created the app, navigate to the root folder of the app. From here, run the app in development mode and open it in the browser.
You can reference the Vite Documentation and the Getting Started page here: Vite - Scaffolding Your First Vite Project.
Now that you have created the app let's clean up the App.js
a bit. Remove the initial content generated by Vite to get the following structure:
// src/App.js
import './App.css'
function App() {
return <div className='App'></div>
}
export default App
To create the landing page we will need a few images.
Download the following images and save them in the src/assets/
folder:
Click here for the URLs
https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/landing-page/ironhack-logo-xs.png
https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/landing-page/menu-top-xs.png
https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/landing-page/icon1.png
https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/landing-page/icon2.png
https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/landing-page/icon3.png
https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/landing-page/icon4.png
Finally, let's create our landing page. Using the assets that you downloaded in the previous iteration recreate the following landing page:
For now, don't worry about creating more than one component, we will cover that in the following lessons!
Happy Coding! โค๏ธ
I am stuck and don't know how to solve the problem or where to start. What should I do?
If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions.
For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources.
Once you have a clear understanding of the problem, you will be able to start working toward the solution.
I got the error: "Cannot find module 'Node.js'". How can I resolve it?
The error "Cannot find module" in a Node.js application means that the module you are trying to import or use does not exist in your project or cannot be found by Node.js.
There are a few things you can try to resolve the issue:
- Dependencies are not installed: Make sure that all dependencies are installed.
To do this, run the command npm install
in the root folder of your project.
This will install all of the dependencies listed in the project's package.json
file, and ensure that all of the modules that your Node'js application requires are available.
- Module is not installed: Make sure that the package you are trying to use is listed in the project's
package.json
and that it is installed.
To do this, run the command npm install <package_name>
, replacing the <package_name>
with the name of the package.
This will add the package to the list of dependencies in the package.json
file, and install it in the project.
-
Module is not imported: Make sure that you've imported the module/package correctly and that the
import
statement is spelled correctly and available in the correct place in your code. -
Wrong file path: If you are importing another file as a module, make sure that the file you are trying to import is located in the correct folder and that you are using the correct file path.
-
Wrong module/package name: Check the spelling of the package name you are trying to import.
I got the message: "Something is already running at ... Would you like to run the app at another port instead? [Y/n]". What should I do?
This message means that another process is already using the specified port. This could be another instance of your React app, or it could be another application that is using that port. To resolve this, you can change the port your React app is running on by typing Y when prompted. This will kill the process and automatically start the server on another port. Another approach is to manually terminate the process using the port in question and then try running the app again.
How do I display an image in a React component?
To display an image in a React component, you should first import
the image in the component and then render it. Here is an example of how to do this:
import example from './example.png' // Import the image file
function App() {
return (
<img src={example} alt='example' /> // Display the image
)
}
export default App
In the above example, the example
variable is assigned the value of the imported image file. The image is then displayed using the <img>
element, with the src
attribute set to the example
variable.
Where should images for a React project be stored?
The images for your React project should be stored inside the src/
folder. To keep things organized you should create a separate assets/
or images/
directory inside of the src/
folder.
I got the warning in my React app:" 'variable' is assigned a value but never used: no-unused-vars". What should I do?
This warning is a linting error thrown by a linting tool in your React project, and it is warning you that the variable is created, but that it is never being used in your code.
To resolve this issue, you can either use the variable in your code, or you can simply remove the variable if you don't need it.
I am getting an error: "not defined". How do I fix it?
The "ReferenceError: variable is not defined" error in JavaScript occurs when you try to access a variable or a function that has not been defined yet or is out of scope.
To fix the issue, check that you have defined the variable or function that you are trying to use and double-check the spelling to make sure you are using the correct name.
In case the variable or a function is defined in another file, make sure that the file has been imported or loaded correctly.
I am unable to push changes to the repository. What should I do?
There are a couple of possible reasons why you may be unable to push changes to a Git repository:
- You have not committed your changes: Before you can push your changes to the repository, you need to commit them using the
git commit
command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder:
git add .
git commit -m "Your commit message"
git push
- You do not have permission to push to the repository: If you have cloned the repository directly from the main Ironhack repository without making a Fork first, you do not have write access to the repository. To check which remote repository you have cloned, run the following terminal command from the project folder:
git remote -v
If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first, and then clone your fork to your local machine to be able to push the changes.
Note: You may want to make a copy of the code you have locally, to avoid losing it in the process.