{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"16b7bb22-6e91-47fb-83b9-8ff3233da06a"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"c28ffcb9-9e7c-45e1-9556-7e25869ec853"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"React Style:","type":"text"}]},{"type":"paragraph","content":[{"text":"Based on Airbnb's official React style guide: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://github.com/airbnb/javascript/tree/master/react"}},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"This section takes a small but important subset of that style guide for Structs.sh.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Files and Naming:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"One component per file","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Prefer functional components over class components","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"They're easier to test","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Less code, hence easier to read and maintain","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Possible performance boost in future versions of React","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Only use class components when there's complex internal state","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use ","type":"text"},{"text":".jsx","type":"text","marks":[{"type":"code"}]},{"text":" extension for React components and ","type":"text"},{"text":".js","type":"text","marks":[{"type":"code"}]},{"text":" for every other file","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If using TypeScript, then use ","type":"text"},{"text":".tsx","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":".ts","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Naming","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PascalCase","type":"text","marks":[{"type":"code"}]},{"text":" for React components","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Give it the same name as the filename. Eg. for ","type":"text"},{"text":"LinkedList.jsx","type":"text","marks":[{"type":"code"}]},{"text":", name the React component inside to be ","type":"text"},{"text":"LinkedList","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"camelCase","type":"text","marks":[{"type":"code"}]},{"text":" for everything else","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Indentation:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Splitting up long prop lines:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Conditional rendering:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"// && operator\n{\n showButton &&

Browser not supported