Join Eve Porcello for an in-depth discussion in this video Modularizing code, part of React.js Essential Training.
- [Instructor] Our app is starting to come together,…and our files are starting to get a bit larger,…so what I want to do is I want to take our current application…and I want to modularize it.…I basically want to break it down…into a list of different components,…each in their own files.…So the first thing I want to do here…is open up our file structure…and I'm going to create a few new files.…The first one is going to be called Book.js.…The second is going to be called Hiring.js.…
And the third one here is going to be called NotHiring.js.…And finally, we'll have Library.js.…Perfect, so now I can go back to the index.js…and I can start breaking this thing down.…So the first thing I'll do…is I will grab our book component,…and I'm just going to cut and paste this…into the Book.js file.…And at the beginning of this file,…I'm going to use the export…to make sure that we export this…from that particular file.…
The next thing that we'll do…is go back to our index and grab Hiring.…Cut and paste that into Hiring.js,…exporting it each time we create a new file.…
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
1. What Is React?
2. Introduction to React Elements
3. React Components
4. Props and State
5. Additional Library Features
- 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.Cancel
Take 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.