This video describes using assets in a project, like images.
- [Instructor] Hi, welcome to the third video…of this section.…In this video, we are going to talk…how to render assets into our webpage.…In particular, we're going to talk about images.…But the process should be exactly the same…for other types of files.…In order to achieve that, we will need to apply…some changes into our Webpack configuration…to start accepting image modules.…We're going to understand how the file-loader works…and finally, render an image inside our main component.…Let's just jump straight to the code.…
The very first thing I'm going to do…is to wrap this whole component into a div.…And the main purpose of this is to be able to create…an image tag in here which is going to have a source value.…In here, in this source value,…we're going to specify the image that we want to render.…But to do that, we'll need to have…some image in our project.…I previously downloaded the Pack logo,…but you can use any other type of image that you want.…In this case, it's a PNG, but we are also going to apply…the same configuration to JPEG.…
Author
Released
7/16/2018- Structuring React projects
- Creating and mounting the root component
- Composing components for more complex UI
- Using state to making components dynamic
- Styling
- Routing
- Testing
Skill Level Intermediate
Duration
Views
Related Courses
-
React.js: Building an Interface (2016)
with Ray Villalobos1h 21m Intermediate -
React: Building Large Apps
with Emmanuel Henri53m 59s Intermediate -
React: Managing Complex Interactions
with Emmanuel Henri1h 45m Intermediate
-
1. How to Structure React Projects
-
Welcome2m 14s
-
React rendering process2m 24s
-
Start a project from scratch3m 44s
-
Set up a development server9m 31s
-
-
2. Diving into the First Components
-
Use functional components3m 48s
-
Import assets5m 37s
-
3. Styling Made Easy
-
Functional CSS7m 33s
-
Set up PostCSS and Basscss11m 38s
-
Set up ESLint13m 39s
-
Set up Prettier6m 27s
-
4. Routing
-
Handle 404 requests3m 2s
-
Handle redirects1m 32s
-
Implement favorites11m 8s
-
Share state between routes9m 27s
-
Get parameters from URLs6m 48s
-
5. Painless Components Testing
-
Configure Jest5m 44s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Import assets