Part 6 : Create New React Component

In this article, I will show you creating new custom component from scratch. I will continue same react application which I created in article 2. Under src folder create new folder with name Employee. Create Employee.js file under newly created folder and write down below piece of code.

Open App.js file and Add Employee component highlighted below at line number 10.

We discussed component can be reused, let's check. Open Employee.js and add below piece of code. Basically, I want to print list of employees on browser window.

Open App.js file and call Employee component with properties (Id, Name and address) shown in line number 9.

Let's add CSS for Employee component. Add Employee.css file under Employee folder we can also reuse App but let's keep separate CSS file for component.

Refresh browser window and check.

You can even pass text from Component as children shown in below screen highlighted.

Open employee.js and modify code shown below.