Code Refactoring atau Refactoring adalah proses menata ulang code.

Tujuan dari refactoring bermacam - macam seperti membuat code lebih readable, meningkatkan performa dari sebuah aplikasi dll.

Refactoring sendiri juga banyak bentuknya, mulai dari menata ulang file dan folder dalam sebuah project, menghapus dead code, menghapus duplicate code, sampai menulis ulang sebagian besar code yang sudah ditulis karena berganti framework dll.

Refactoring yang akan kita lakukan adalah memisahkan component termasuk styled component dari page ke component tersendiri agar code pada setiap page tidak terlalu panjang sehingga memudahkan proses development selanjutnya.

Menata Ulang Component

Kita akan gunakan metode pembagian component seperti berikut:

• Component penyusun page yang bersifat khusus untuk page tersebut kita tempatkan di folder components
• Semua single styled component seperti Container dan Button yang dipakai oleh component lain kita tempatkan di components/ui
• Sedangkan multiple component seperti Header dan Footer yang dipakai di dalam layout kita tempatkan di components/shared

Mungkin sedikit membingungkan karena terlalu banyak pembagian jenis component, tapi keuntungan menggunakan metode pembagian seperti ini adalah akan mempermudah kita mengelola setiap component.

Metode pembagian jenis component seperti ini tidaklah baku, kita bebas berkreasi asalkan tetap mudah dipahami

Home page

➡️ Kita pisahkan component NotesList dari Home page ke file components/NotesList.js.

Copy
1import styled from 'styled-components';
2
3const NotesList = styled.div`
4  display: flex;
5  flex-direction: column;
6  min-width: 30vw;
7  margin: 1rem;
8  padding: 1rem;
9  border: 2px solid #a0aec0;
10  border-radius: 5px;
11`;
12
13export default NotesList;

➡️ Kemudian pindahkan styled component Container dan Button.

src/components/ui/Container

Copy
1import styled from 'styled-components';
2
3const Container = styled.div`
4  display: flex;
5  flex-direction: column;
6  align-items: center;
7  justify-content: center;
8  margin: 1rem;
9`;
10
11export default Container;

src/components/ui/Button

Copy
1import styled from 'styled-components';
2
3const Button = styled.button`
4  background: #3182ce;
5  color: white;
6  font-size: 1em;
7  margin: 1rem 0;
8  padding: 0.75rem;
9  border: 2px solid white;
10  border-radius: 5px;
11`;
12
13export default Button;

➡️ Edit Home page

src/pages/Home.js

Copy
1import React from 'react';
2import PageLayout from '../layouts/PageLayout';
3import NotesList from '../components/NotesList';
4import Container from '../components/ui/Container';
5import Button from '../components/ui/Button';
6
7const HomePage = () => {
8  return (
9    <PageLayout>
10      <Container>
11        <Button>Add New Note</Button>
12        <h1>All Notes</h1>
13        <NotesList>Notes List</NotesList>
14      </Container>
15    </PageLayout>
16  );
17};
18
19export default HomePage;

Struktur folder akhir

Copy
1dinotes-app
2    |--node_modules
3    |--public
4    |--src
5       |--components
6          |--shared
7             |--Footer.js
8             |--Header.js
9          |--ui
10             |--Button.js
11             |--Container.js
12          |--NotesList.js
13       ...

Add & Edit Page

➡️ Pindah styled component Form.

src/components/ui/Forms

Copy
1import styled from 'styled-components';
2
3const Form = styled.form`
4  display: flex;
5  flex-direction: column;
6  min-width: 30vw;
7  margin: 1rem;
8`;
9
10const FormGroup = styled.div`
11  display: flex;
12  flex-direction: column;
13`;
14
15const Label = styled.label`
16  text-align: left;
17  color: #4a5568;
18`;
19
20const Input = styled.input`
21  margin: 1rem 0;
22  padding: 0.5rem;
23`;
24
25const TextArea = styled.textarea`
26  margin: 1rem 0;
27  padding: 0.5rem;
28  resize: none;
29`;
30
31export { Form, FormGroup, Label, Input, TextArea };

➡️ Pindah component AddNoteForm ke file tersendiri.

src/components/AddNoteForm.js

Copy
1import React from 'react';
2import { Form, FormGroup, Label, Input, TextArea } from '../components/ui/Form';
3import Button from '../ui/Button';
4
5const AddNoteForm = () => {
6  return (
7    <Form>
8      <FormGroup>
9        <Label>Title</Label>
10        <Input type="text" name="title" />
11      </FormGroup>
12      <FormGroup>
13        <Label>Note</Label>
14        <TextArea name="note" rows="12" />
15      </FormGroup>
16      <FormGroup>
17        <Button type="submit">Add</Button>
18      </FormGroup>
19    </Form>
20  );
21};
22
23export default AddNoteForm;

➡️ Update Add Page.

src/pages/Add.js

Copy
1import React from 'react';
2import PageLayout from '../layouts/PageLayout';
3import AddNoteForm from '../components/AddNoteForm';
4import Container from '../components/ui/Container';
5
6const AddPage = () => {
7  return (
8    <PageLayout>
9      <Container>
10        <h2>Add New Note</h2>
11        <AddNoteForm />
12      </Container>
13    </PageLayout>
14  );
15};
16
17export default AddPage;

➡️ Pindah component EditNoteForm ke file tersendiri.

src/components/EditNoteForm.js

Copy
1import React from 'react';
2import { Form, FormGroup, Label, Input, TextArea } from './ui/Form';
3import Button from './ui/Button';
4
5const EditNoteForm = () => {
6  return (
7    <Form>
8      <FormGroup>
9        <Label>Title</Label>
10        <Input type="text" name="title" />
11      </FormGroup>
12      <FormGroup>
13        <Label>Note</Label>
14        <TextArea name="note" rows="12" />
15      </FormGroup>
16      <FormGroup>
17        <Button type="submit">Add</Button>
18        <Button>Delete</Button>
19      </FormGroup>
20    </Form>
21  );
22};
23
24export default EditNoteForm;

➡️ Update Edit Page.

src/pages/Edit.js

Copy
1import React from 'react';
2import PageLayout from '../layouts/PageLayout';
3import EditNoteForm from '../components/EditNoteForm';
4import Container from '../components/ui/Container';
5
6const EditPage = () => {
7  return (
8    <PageLayout>
9      <Container>
10        <h1>Edit Note</h1>
11        <EditNoteForm />
12      </Container>
13    </PageLayout>
14  );
15};
16
17export default EditPage;

✅ Struktur folder akhir:

Copy
1dinotes-app
2    |--node_modules
3    |--public
4    |--src
5       |--components
6          |--shared
7             |--Footer.js
8             |--Header.js
9          |--ui
10             |--Button.js
11             |--Container.js
12             |--Form.js
13          |--AddNoteForm.js
14          |--EditNoteForm.js
15          |--NotesList.js
16       ...

Selanjutnya kita akan menambahkan data dan event handling.