Veja o quanto evoluímos juntos. Já passaram 60 anos! Explore através do decorrer das décadas o valor e prestígio da nossa Universidade Federal de Alagoas expandindo-se.
This project will follows this planned prototype:
- Naming:
- Folders directory and JS, JSX and CSS files, if necessary, names are named with kebab-case as
component/my-component/index.js
; - Component exportation names are named with PascalCase as:
// example for index.js at /component/ folder
import MyComponent from "./my-component";
import AnotherComponent from "./another-component";
export { MyComponent, AnotherComponent };
- Instances from components or modules are named with camelCase, following the Airbnb Style Guide, as:
// example for modules.js
export function someModule({ prop = "" } = {}) {}
// example for instancing a component
import MyComponent from "./my-component";
const myComponent = MyComponent;
- Classes on cascade stylesheet modules are named with camelCase. In case importing them as css modules, should always be imported as cssModules, following:
/* example for a index.module.css from MyComponent */
.root {
prop: "value";
}
.variant {
exclusive-prop: "value";
}
// example for instancing styles from css modules
import cssModules, { root } from "./index.module.css";
// using the css module class
<div className={clsx(root, { cssModules[variant]: variant })} />
- Project Tree:
- Assets: locate on
/src/assets
directory, following the naming convention, exported byindex.js
file on it; - Components: locate on
/src/components
directory, following the naming convention, exported byindex.js
file on it; - Modules: locate on
modules.js
file at/src/components
directory; - Constants: locate on
constants.js
file at/src/components
directory; - Used APIs: locate on
api.js
file at/src/components
directory;
- Documentation:
- Params description:
/**
* Returns x raised to the n-th power.
*
* @param {number} x The number to raise.
* @param {number} n The power, must be a natural number.
* @return {number} x raised to the n-th power.
*/
function pow({ x = 0, n = 0 } = {}) {
return x ** n;
}
- JSX component usages:
<Component prop={value1|value2|etc...} />
-
Component or module props:
-
Functional:
function Component({
iAmString = "",
iAmBool = false,
iAmFunc = () => {},
iAmNumber = 0,
iAmObject = null,
} = {}) {
return <div />;
}
- Class:
const defaultProps = {
iAmString = "",
iAmBool = false,
iAmFunc = () => {},
iAmNumber = 0,
iAmObject = null,
}
export default class MyComponent extends React.Component {}
MyComponent.defaultProps = defaultProps;
All components reffers to Material UI's library.
Nothing yet.
Nothing yet.
Nothing yet.