Component Configuration in React.js

How to use Components in React.js?»

Configuring the components when they are created. In component reusability you’ve read about reusing components. However, you have to  remember that although all the components may have similar look but may have slight changes in their appearances and functionalities. You have to take care of these changes while creating the components themselves. This comes under component configuration. Say for example, you have a “My Profile” button on all the pages of a web application that takes you to your profile, but it should change to “Log in” if you sign out from your account. This extra customization is done through component configuration.Let’s try to put together all these three parts and build a small application.

The app you’re going to build will look like this:

React component example

First go to your project workplace, for example, in my case I keep all my React projects inside:


Here I’d create my new React project. To do that, I’d run the following command from Terminal (after making sure I’m inside the correct directory):

create-react-app components

This will generate the required React files and folders inside  D:\Projects\Personal\React\components

Run the React server with the following command:

npm start

And it should take your browser to http://localhost:3000 where you’d see React logo spinning. This remarks a successful compilation of the React project.

Next up, delete all the files present inside the src folder. This will give you an error instantly.

Now, inside the src folder, create a new file named index.js, as you did previously and write the following code:

import React from ‘react;
import ReactDOM from ‘react-dom’;

const App = () => {
return <div>Hello World!</div>

ReactDOM.render(<App/>, document.querySelector(“#root”));

Now you should be able to see “Hello World!” in your browser. Now, you need to replace it with a list of articles. You’re going to create one component and insert all the articles code inside it.

Leave a Comment