Learn about React components and how they can be simple functions and also about component props, how to validate them, and default values for props.
- [Instructor] Lets' talk about React Components.…We don't usually work with React elements directly…like that, instead we use components.…For example, the top level component is usually…an App component, and we define the component as a constant.…A React component is simply a function, and in that function…we return the html that we care about.…Just like that.…Go ahead and change this to make sure it's working,…and refresh, there you go.…
So, you'll notice that I am using the component just as if…it was a regular html element.…We can actually think of html elements…as built-in components, and React components is here to…extend our capabilities of html elements.…React components are super useful, they first allow us to…write code that's more readable.…We can also reuse React components.…For example, let's make this component reusable.…So, let's pass a variable to this component,…I'm going to call this variable headermessage,…and this is just a string.…
In React components we call these variables props,…and the React component actually receives these props…
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing
Skill Level Advanced
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
MEAN Stack and MongoDB: Development Techniqueswith Alexander Zanfir1h 48m Intermediate
1. Getting Started
2. Node as a Web Server
3. React Basics
4. Working with Data
5. Rendering on the Server
Fix the checksum problem6m 11s
6. Routing on Client and Server
7. Working with MongoDB
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.