Structure of tree display.jsx - Revision history

Rsabu at 10:20, 17 March 2022

2022-03-17T10:20:29Z

← Older revision		Revision as of 10:20, 17 March 2022
Line 1:		Line 1:

	= Introduction =		= Introduction =
	The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.		The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code. An other change that this refactoring is aiming to attain is using the proper naming convention for js, ie rewriting variable names in snake_case to camelCase.

	= Components in tree_display.jsx =		= Components in tree_display.jsx =

Rsabu at 08:08, 17 March 2022

2022-03-17T08:08:05Z

← Older revision		Revision as of 08:08, 17 March 2022
Line 2:		Line 2:
	= Introduction =		= Introduction =
	The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.		The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.

			= Components in tree_display.jsx =
			The structure can be easily understood if discussed one component at a time. For this we move from the most innermost component and move up the tree. This approach is used as the innermost component will have no child components , and any component discussed at a point will have all it's childs discussed earlier. For this very reason, we have followed the same pattern for selecting components for refactoring.

			Using this approach, the first component that we have taken for refactoring is RowAction.

Rsabu at 19:52, 10 March 2022

2022-03-10T19:52:41Z

← Older revision		Revision as of 19:52, 10 March 2022
Line 1:		Line 1:
	~~Structure of tree_display.jsx~~

	The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.		= Introduction =
			The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.

Rsabu at 19:43, 10 March 2022

2022-03-10T19:43:33Z

← Older revision		Revision as of 19:43, 10 March 2022
Line 1:		Line 1:
	Structure of tree_display.jsx		Structure of tree_display.jsx

			The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.

Rsabu: This page contains the changes made to tree_display.jsx in expertiza as part of Independent study in Spring 2022

2022-02-24T09:18:46Z

This page contains the changes made to tree_display.jsx in expertiza as part of Independent study in Spring 2022

New page

Structure of tree_display.jsx