Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feedback on generated react code

See original GitHub issue

Following up on React feedback provided on #1494

Folders

One thing also I’ve seen that one folder is named “Master_Detail” in “frontEnd/src/components”. I also find this highly unusual since other folders in components folder are named with PascalCase (NavBar, WarningMessage). Usually React convention is PascalCase for component names and folder names as far as I’ve seen. I see that in a newly generated project that component is called MasterDetail, while in this example repo it’s called Master_Detail. Also, I’m not sure if word “master” currently clashes with the fact you are trying to rename master branch to something else (https://github.com/microsoft/WebTemplateStudio/issues/1475), so maybe even renaming “MasterDetail” component is something to keep in mind.

Files

One thing that comes to mind is the .jsx extension. I see that you are trying to follow Create React App as a baseline and they don’t use .jsx for newly generated project, they instead just use .js. Maybe you are in favor of .jsx because it’s more explicit that the file is a React component, but considering the fact that React components are usually named with PascalCase, that already gives them some distinction.

Regarding constants.js, maybe instead of defining the object and then adding items to it using dot(.) notation, why not just create objects and then add them to the constants object. Or even better yet, just make each of those keys a separate object without using the main CONSTANTS object.

CURRENT WORK
// Current implementation
const CONSTANTS = {};

CONSTANTS.ERROR_MESSAGE = {};
CONSTANTS.ERROR_MESSAGE.GRID_GET = "Request to get grid text failed:";
...
WITHOUT DOT NOTATION
const ERROR_MESSAGE = {
  GRID_GET: "Request to get grid text failed:",
  LIST_DELETE: "Request to delete list item failed:",
  ...
};

const CONSTANTS = {
  ERROR_MESSAGE,
};
WITHOUT CONSTANTS OBJECT
const ERROR_MESSAGE = {
  GRID_GET: "Request to get grid text failed:",
  LIST_DELETE: "Request to delete list item failed:",
  ...
};

const ENDPOINT = {
  GRID: "/api/grid",
  LIST: "/api/list",
  ...
};
Third solution seems best to me since you use the ERROR_MESSAGE or ENDPOINT object directly without having to do CONSTANTS.SOMETHING and the fact that variable names are all uppercase kinda suggests they are constants anyway. Even if my last proposed solution doesn’t seem great to you, I would highly suggest thinking about “without dot notation” suggestion. To me personally it seems easier that you can just take a quick look at an object and see all the key/value pairs it has, without having to go line by line below and seeing what key/value pairs were added line by line using dot notation.