.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
position: absolute;
bottom: 0;
width: 100%;
}
function Footer() {
return (
© 2023 Company Name
);
}
ReactDOM.render(, document.getElementById(‘footer’));
In this article, we will discuss how to create a responsive footer using React JS. A footer is an important component of a website as it provides essential information and navigation for the users. With the rise of mobile devices, it is crucial to ensure that the footer is responsive and looks good on all screen sizes.
To create a responsive footer with React JS, we will use JSX, a syntax extension for JavaScript that allows us to write HTML elements in our React components. We will also use CSS to style the footer and make it responsive.
First, let’s create a basic HTML file that includes the necessary script tags for React and Babel, a JavaScript transpiler that allows us to use modern JavaScript features in older browsers. We will also include a div element with an id of “footer” where we will render our footer component.
“`html
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
position: absolute;
bottom: 0;
width: 100%;
}
“`
Next, we will write our React component for the footer. We will create a functional component called Footer that returns a div element with the class “footer” and a paragraph element with the copyright information.
“`html
function Footer() {
return (
© 2023 Company Name
);
}
ReactDOM.render(, document.getElementById(‘footer’));
“`
In this component, we are using JSX to define the structure of our footer. We also use the className attribute to assign a CSS class to our footer div. Finally, we use ReactDOM.render to mount our Footer component inside the div with the id “footer”.
With this setup, our responsive footer will now be rendered at the bottom of the page and will adapt to different screen sizes. The CSS styles applied to the footer class will ensure that it looks good on both desktop and mobile devices.
In conclusion, creating a responsive footer with React JS is straightforward and can greatly improve the user experience of your website. By using JSX and CSS, we can build a footer that adapts to different screen sizes and provides essential information and navigation for our users.
