Scribd
Upload
5 views

Lecture 4

The document discusses React components, including that components are independent and reusable bits of code that return HTML elements. It covers creating function components and class components, rendering components, and passing props to components.

Uploaded by

moeez062318
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Lecture 4

The document discusses React components, including that components are independent and reusable bits of code that return HTML elements. It covers creating function components and class components, rendering components, and passing props to components.

Uploaded by

moeez062318
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Lecture 4

React Components
Components are like functions that return HTML elements.

Components are independent and reusable bits of code. They serve the
same purpose as JavaScript functions, but work in isolation and return
HTML.

Components come in two types, Class components and Function


components, in this course, we will concentrate on Function components.

In older React code bases, you may find Class components primarily used. It
is now suggested to use Function components along with Hooks, which were
added in React 16.8. There is an optional section on Class components for
your reference.

Create Your First Component


When creating a React component, the component's name MUST start with
an upper case letter.

Class Component

A class component must include the extends React.Component statement.


This statement creates an inheritance to React.Component, and gives your
component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

Example

Create a Class component called Car

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car!</h2>;

}
Lecture 4

Function Component

Here is the same example as above, but created using a Function


component instead.

A Function component also returns HTML, and behaves much the same way
as a Class component, but Function components can be written using much
less code, are easier to understand.

Example

Create a Function component called Car

function Car() {

return <h2>Hi, I am a Car!</h2>;

Rendering a Component
Now your React application has a component called Car, which returns
an <h2> element.

To use this component in your application, use similar syntax as normal


HTML: <Car />

Example
Display the Car component in the "root" element:

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car />);

Props
Components can be passed as props, which stands for properties.

Props are like function arguments, and you send them into the component as
attributes.
Lecture 4

You will learn more about props in the next chapter.

Example
Use an attribute to pass a color to the Car component, and use it in the render()
function:

function Car(props) {

return <h2>I am a {props.color} Car!</h2>;

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Car color="red"/>);

You might also like