Walk through more areas of the React syntax with examples.
- [Instructor] So now let's explore…what we're seeing here in the code.…So I'm gonna go from top to bottom and…explain what you were seeing in the React code…so you understand what you're reading…and you can actually unpack the component on Framer.…So the first thing you have at the top are the imports.…So these are the external libraries that you need to import…in order for everything else to work,…and these are packages that Framer has created…to allow us to do some of the things that we're doing here…as well as the React library here.…
Then the next block of code here is basically CSS,…so these are React CSS properties that we've put…that you're seeing directly inside of the component here.…So if you make any changes here, you're gonna see them…replicated directly into the component.…So let's go back here and make some changes.…So what I'm gonna do first is make the color white…for the text, so I'm gonna change this guy here,…and then the background, actually,…I'm gonna make this guy black, because it's…not gonna look good over a white background.…
- What is Framer X?
- Define your layout
- Creating more layouts
- Using frames and text in frames
- Drawing with a path
- Creating interactions
- Working with React components
Skill Level Beginner
Building and Maintaining Your UX Design Portfoliowith Diane Cronenwett15m 54s Appropriate for all
Learning Framer X1m 8s
1. Introduction to Framer X
2. Design in Framer X
3. Prototype in Framer X
4. Introduction to Components
Next steps1m 19s
- 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.