Creating Components

Definition of a Component
• Components are the fundamental building blocks of React.
• Virtually any visual item in a user interface can be a component.
• From a formal point of view, we would say that a React component is
a piece of JavaScript code defining a portion of a user interface.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Consider the following code in a file:
import React from ‘react’;
class Catalog extends React.component {
render() {
return <div><h2>Catalog</h2></div>;
}
}
export default Catalog;

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The Catalog class
• This is an ECMAScript 2015 module, defining a basic React
component.
• It imports the React namespace from react module and defines the
Catalog class by extending the React.Component class.
• The module exports the Catalog class as a default export.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The render() method
• The interesting part of this definition is the implementation of the
render() method.
• The render() method defines the visual part of the component.
• It may execute any JavaScript code, and it should return a markup
expression defining its visual output.
• The presence of the render() method is mandatory for React
components.
• In our example, the render() method returns the following markup:
<div><h2>Catalog</h2></div>

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The render() method must comply with a
few constraints:
• It is mandatory
• It must return one React element
• It should be a pure function
• It should not directly interact with the browser

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Recap
• Let's recall the code generated by the create-react-app tool in the
App.js file.
• This code has the same structure as the Catalog component that we
defined.
• Let's change this code in order to use our component inside of the App
component:

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Our component inside of the App component:
import React, { Component } from ‘react’
import ‘./App.css’;
import Catalog from ‘./Catalog’;
class App extends Component{
render() {
return (
<div className=“App”>
<header className=“App-header”>
<h1 className=“App-title”>The Catalog App</h1>
</header>
<Catalog/>
</div>
);
}
}
Beginning React. simplify your frontend development workflow
Export default App;and enhance the user experiance of your applications with with
Building Our First React Component
• The following steps open the existing project, my-shop-01, in order to
show the result of the previous code changes:
1. Open a console window
2. Move to the my-shop-01 folder
3. Run npm install
4. Run npm start

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Managing Styles
• You can notice that we have an import statement concerning a CSS
file in the App component module.
• Because of the development environment provided by create-react-
app, we can use the same syntax, even for CSS files.
• This allows us to use the classes and other CSS definitions defined in
App.css in our component, keeping component-specific styles close to
the component definition itself.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Adding CSS
• We will now change the content of the existing project, my-shop-01,
in order to add some CSS code and show the catalog title in red:
1. Open a console window.
2. Move to the my-shop-01/src folder.
3. Create a file, Catalog.css , and add the following code:
h2 {color: red }
4. Open the Catalog.js file and add the statement to import the
Catalog.css module, as shown here:

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Adding CSS
import React from ‘react’;
import ‘./Catalog.css’;
class Catalog extends React.Component {
render() {
return <div><h2>Catalog</h2></div>;
}
}
export default Catalog;
5. Run npm start and look at the result.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Assignment
• Create a component that defines a list of wines, names and description.
We want to integrate our Catalog component with the wine list.

• Hint: Start by creating a ProductList component

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Sample Solution
import React from ‘react’;
class ProductList extends React.Component {
render() {
return <ul>
<li>
<h3>Traditional Merlot</h3>
<p>A bottle of middle weight wine,lower in tannis (smoother) with a more
red-fruited flavor profile.</p>
</li>
}
}
export default ProductList;
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Using JSX
• In previous examples, we defined the visual output returned by the
render() method of a component by using an HTML-like markup
expression.
<div><h2>Catalog</h2></div>;
• The markup expression is not using JavaScript syntax, but it is
included inside of a JavaScript code snippet.
• The HTML-like language describing the React component's visual
output is called JSX.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Using JSX
• JSX expressions are XML fragments, so they are compliant with XML
syntax rules.
• This means that, among other things, the markup is case-sensitive, and
all of the tags must be closed.
• For example, the following JSX expression is not valid: <img
src=“image.png”>
• Its valid version is the following: <img src=“image.png” />

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
JSX expression can be assigned to a
variable
import React from ‘react’;
import ‘./Catalog.css’;
class Catalog extends React.Component {
render() {
let output = <div><h2>Catalog</h2></div>;
return output;
}
}
export default Catalog;

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
JavaScript expression inside of a JSX
expression
import React from ‘react’;
import ‘./Catalog.css’;
class Catalog extends React.Component {
render() {
let title = “Catalog”
return <div><h2>{title}</h2></div>;
}
}
export default Catalog;

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Conditional rendering
• A common use of a combination of JavaScript and JSX expressions;
that is, a technique that allows you to generate a JSX expression based
on some Boolean conditions.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Conditional rendering
import React from ‘react’;
import ‘./Catalog.css’;
class Message extends React.Component {
render() {
let message;
let today = new Date().getDay();
If (today ==0) {
Message = <div className=“sorry”>We are closed on Sunday</div>;
} else {
Message = <div className=“happy”>How can we help you</div>;
}
return message;
}
export default Message;
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
JSX expression can be placed in multiple
lines
import React from ‘react’;
import ‘./Catalog.css’;
class Catalog extends React.Component {
render() {
let title = “Catalog”
return <div>
<h2>{title}</h2>
</div>;
}
}
export default Catalog;
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Comments
• You can put comments inside of a JSX expression by using the
JavaScript syntax wrapped in curly brackets.
<div>
<h2>Catalog</h2>
{//This is a comment}
{/* This is a comment, too */}
</div>;

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Create a Class Component
• The component's name must start with an upper-case
letter.
• The component has to include the extend
React.Component statement.
• This statement creates an inheritance to
React.Component and gives your component access to
React.Component's functions.
• This component also requires a render() method, this
method returns HTML

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Example: create a class component called car
class Car extends React.Component {
render() {
return <h2> Hi I am a car</h2>;
}
}

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Components in Files

import React from 'react’;

class Car extends React.Component {
render()
{ return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Import the Car.js file in the file application

import React from 'react’;

import ReactDOM from 'react-dom/client’;
import Car from './Car.js’;
const root =
ReactDOM.createRoot(document.getElementById('r
oot'));
root.render(<Car />);

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Component Constructor
• If there is a constructor() function in your component, this function
will be called when the component gets initiated.
• The constructor() function is where you initiate the components
properties.
• Component properties should be kept in an object called state

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
 Example:
• Create the constructor function in the Car component and add the
color property.
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a{this.state.color} Car!</h2>;
}
}
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
 Props

• Another way of handling component properties is by

using props.
• Props are like function arguments, and you send them
into the component as attributes.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Example

class Car extends React.Component {

render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Props in the Constructor
class Car extends React.Component {
Costructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
} const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car model="Mustang"/>);
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Components in Components
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render()
{
return ( <div> <h1>Who lives in my Garage?</h1>
<Car />
</div> );
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with