ReactJS #5: Write Simple React Component.
React Components are basic building blocks of any react apps and allow us to split our UI into a reusable piece of code which accepts data through properties and states and return HTML elements.
There are two ways we can define components in ReactJS.
- The functions components using javascript
- The class components using ES6 Classes
In this lab, we will covers :
- How react components works.
- How to write simple react component using Javascript functions
- How to write simple react component using ES6 classes
So, let’s get started
Folder Structure:
First, we will create “components” folder inside “src” and then we will create one more folder named “lists” inside “components”.
c:/codebase/todo-app/
node_modules/
public/
src/
.../Components
............../lists
In the above code, we have created lists folder for “TodoLists” component. So, in the future, we will have a separate folder for each reacts component. This will help us to organize and make it easy to access all required stuff like unit test cases files, CSS, etc together for a particular component.
Function components
Function components are very easy to implement. Simply write a javascript function that returns the HTML elements.
Your first component
function TodoList() {
return (
<div className="todo-list">
<h1>TodoLists</h1>
<ul>
<li>Buy a big doll</li>
<li>Do yoga</li>
<li>Review component article</li>
</ul>
</div>
);
}
function App() {
return (
<div>
<TodoList/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Passing properties to function component TodoList
let’s create an array of todos and pass it as props to TodoList component.
We can render one component into other components. Now , render <TodoList> function component into <App> component
function App() {
return (
<div>
<TodoList data={todos}/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Output :

Write a simple class component using ES6 classes

import React from "react";
import "./TodoLists.css";
export default class TodoList extends React.Component {
render() {
return (
<div className="todo-list">
<h1>TodoList</h1>
<ul>
<li>Buy a big doll</li>
<li>Do yoga</li>
<li>Review component article</li>
</ul>
</div>
);
}
}
June 3, 2020 @ 4:03 am
Some genuinely nice and useful information on this web site, besides I think the design has good features.
August 20, 2020 @ 10:29 am
Thanks
June 4, 2020 @ 12:53 pm
Good day! I simply wish to give an enormous thumbs up for the nice information you will have right here on this post. I will likely be coming again to your blog for extra soon.
August 20, 2020 @ 10:30 am
thanks