This article is sponsored by Flutterwave - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!
What are the components?
A simple definition of components is:
Components are independent and reusable bits of code
They serve the same purpose as JavaScript functions but work in isolation and return HTML via a render function.
The image below shows part of the official React home page divided into components:
Let's take a look at the latter components (the bottom 3 components). Here you can use React to write a component once and reuse it anywhere in your application. Apart from making a component reusable, it makes it manageable and maintainable. Check out the article, What is React? to learn more on this section.
Types of Components
In React there are two types of components:
- Class components
- Function components
- Server components
JavaScript files can either be in the extension .js or jsx, since most of the syntax is from JSX
Function Component
The function component is simply a function that returns a component.
Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.
It is recommended to write code in ES6+ since React takes care of Browser Compatibility.
Also, no render method in functional components.
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h3>Hello World</h3>
<h3>You are now editing the <code>App.js</code> file</h3>
</div>
);
}
export default App;
The first module to import in any JSX file is react
import React from 'react'Without importing it, the app will not understand the JSX syntax (causing errors) and can not use other features the React team makes available.
Functional components with no state are called stateless components.
Functional components can also accept and use props. See the example below:
App.js
import './App.css';
const App = props => {
return (
<div className="App">
<header className="App-header">
<h3>Name: {props.name}</h3>
<p>Skill: {props.language}</p>
</header>
</div>
);
}
export default App;
Props is a parameter in a function. When arguments are passed to the component, they get filled to the component then rendered to the DOM. That is, they fill the custom data, {props.name} and {props.language} before rendered to the DOM (screen).
For now, the component above is requesting arguments. The arguments can be passed in the App component of the index.js file.
index.js
import React from 'react';
import ReactDOM from 'react-dom'; // expects to render a component
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App name='Bello' language='React' />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Whenever you what to render a component in a program always import the 'ReactDOM' from the 'react-dom' module.
The component in the index.js file is called the App component. It holds all components in a single page web app. It is a rendered root component. This is why passing arguments in the App Component is not a good practice. For a complex application with many components.
In the above example, we can omit the arguments in the App component.
Let's create another functional component in a new file, Person/Person.js.
Person/Person.js
import React from 'react';
const Person = props => {
return (
<div className="App">
<header className="App-header">
<h3>Name: {props.name}</h3>
<h3>Skill: {props.language}</h3>
</header>
</div>
);
};
export default Person;
Pass the arguments instead in the App.js file. Override the previous code with the code shown below:
App.js
import React, { Component } from "react";
import './App.css';
import Person from './Person/Person';
class App extends Component {
render() {
return <Person name='Bello' language='React' />;
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
{/* root component. Comment in JSX format */}
</React.StrictMode>,
document.getElementById('root')
);
Observation
The code
import App from './App'is the same asimport App from './App.js. The .js extension is added automatically by the build workflow.The .js is the same as .jsx extension in react.
Class Component
When creating a React component, the component's name must start with an upper case letter. For a functional component, it's optional.
Alongside importing React, you should also import the React Component* when it's a class component.
See the example below: App.js
import React from 'react'; // import react first
import { Component } from 'react'; // expects a class component
import './App.css';
import Person from './Person/Person';
class App extends Component {
render() {
return <Person name='Bello' language='React' />;
}
}
export default App;
For React version 17+ you don't have to import React. That is with React version 17+ and above you can omit
import React from 'react'in your project and it will still work fine. This will be done by the built tool automatically when JSX is to be converted into JS syntax.
The App class inherits from the component Class. It must also have a render method, render() to render component(s) to the DOM.
The server component is the third type of component. This will be in a separate article, but you can read more on the React blog.
Note:
Components without any state are also called stateless, dumb, presentational, or pure components because they simply accept data and display them in some form. That is, they are mainly responsible for rendering UI.
Components with state are called stateful, smart or container components.
It is recommended to have a more stateless component than a stateful component.
Happy Coding!!!
Techstack | Flutterwave
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free! Also, you get a Flutterwave dollar barter card when you signup. Open an online store and take your business anywhere in the world.
Support what I do and push me to keep making free content.