React Naming | Make a plan and stick to it *

November 1, 2022 / SprUng, KEEPERS, CODING, React / 2 minutes of reading

KEEP IT STRAIGHT

ROUTES- PAGES
add “Page” to all page routes – using the FileNameConstClass as a base
add “Compo” to all page components – using the FileNameConstClass as a base
- MORE?
- functions
- constants
- …
- …
RESULTS – PAGES
with this method you end up with all PAGES – having the word “page” as part of the url.
unless you change it in navigation.routes.js – also where you add main/sub etc.

Using MainDashboard w/ Page Routing

MainDashboard.js

– importing the class/const – not the page here
– this example we are exporting a Page



**Easier if you matchup the FileNameConstClass.js name with the exported const / class.
so file FileNameConstClass(Page/Compo).js exports FileNameConstClass(Page/Comp


const FileNameConstClassPage = lazy(() => import("./OuterFolder/Folder/FileNameConstClassPage.js")
);

class MainDashboard extends Component {

render() {

return (
			<>
					
						
									
							
							
							
							 (this comes from navigation.routes.js)
							
							
							
							
							
							
							

}

export default withTranslation()(MainDashboard);

– add “Page” to the base


import { ROUTES } from "./navigation.routes";

PreviousEntry;

export const getFileNameConstClassPageRoute = () => `/${routes.filenameconstclasspage}`;

– add “Page” to the base


import {
PreviousEntry,
getFileNameConstClassPageRoute
} from "./navigation.service.routes";


export const showFileNameConstClassPage = () => navigate(getFileNameConstClassPageRoute());

– this where you set up the url – you can do anything here


export const ROUTES = {
PreviousEntry,
filenameconstclasspage: "filenameconstclasspage"
};

OR - this is where you can drop "page" from the navigation add folders

export const ROUTES = {
PreviousEntry,
filenameconstclasspage: "this-is-the-url-to-the/filenameconstclass-page-if-you-add-page-here"
};
or 
filenameconstclasspage: "this/is/the/url/to/the/filenameconstclass/add-page-to-end-here-if-you-want"