React
React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
We use React for web/desktop and React Native for Mobile Applications at Lucky Media.
Websites
For websites we have a great starter based on Next.js - Next Starter.
The Starter its a great boilerplate to get you up and running with the following features:
- TailwindCSS
- Self Hosted Google Fonts with FontSource
- Prettier and Eslint
- Husky with Pre-commit hooks to lint and fix
- Layout Component with working responsive Menu
- React Inline SVG is used to render svg-s.
- JS Config aliases
Components
We encourage small and composable Components to be used in conjunction with Tailwind in order to build a robust UI.
Example Text Component with React:
import React from 'react'
const Paragraph = ({ children, className, ...props }) => { return ( <p {...props} className={`font-medium text-base text-gray-200 ${className}`}> {children} </p> )}
Example Button component with multiple variants and sizes:
import React, { forwardRef } from 'react'import { cls } from '../utils/helpers'
const classes = { base: 'focus:outline-none transition ease-in-out duration-300', disabled: 'opacity-50 cursor-not-allowed', pill: 'rounded-full', size: { small: 'px-2 py-1 text-sm', normal: 'px-4 py-2', large: 'px-8 py-3 text-lg' }, variant: { primary: 'bg-blue-500 hover:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-white', secondary: 'bg-gray-200 hover:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 text-gray-900 hover:text-white', danger: 'bg-red-500 hover:bg-red-800 focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 text-white' }}
const Button = forwardRef( ( { children, type = 'button', className, variant = 'primary', size = 'normal', pill, disabled = false, ...props }, ref ) => ( <button ref={ref} disabled={disabled} type={type} className={cls(` ${classes.base} ${classes.size[size]} ${classes.variant[variant]} ${pill && classes.pill} ${disabled && classes.disabled} ${className} `)} {...props} > {children} </button> ));
export default Button
cls
is a function that trims the whitespace and renders the classes nicely. Here its the code of the function:
export const cls = (input) => input .replace(/\s+/gm, " ") .split(" ") .filter((cond) => typeof cond === "string") .join(" ") .trim();