create-react-app is a package that quickly generates a barebones ReactJS application. We use it as the starting point for our example. It uses and pulls down the latest version of ReactJS. Visual Studio Code is my favorite IDE for front end development and it is free. Although you are free to follow along in any editor or IDE of your choice.<\/p>\n
2. Application Structure<\/h2>\n
Now to start off we run the below command to generate our initial application structure:<\/p>\n
>npx create-react-app my-app\n<\/pre>\nnpx is a tool that comes with more recent versions of NodeJS. It downloads a temporary copy of the specified package and executes it with supplied arguments. This prevents the pollution of global package space with less frequently used tools. This command generates the application structure that should look like below:<\/p>\n
\nProject Structure<\/figcaption><\/figure>\n<\/div>\n 3. Button Component<\/h2>\n
Now that we are set up let us start off creating our Button component. We do so in a file named Button.js and place the corresponding styles in the file named Button.css.
<\/div> <\/div><\/p>\n3.1 Style Options<\/h3>\n
Our component will support the following styling props:<\/p>\n
Size<\/em><\/span><\/p>\n
This setting takes the values of either small or large. Which refers to a size smaller than normal or larger than a normal button. <\/p>\n
Type<\/em><\/span><\/p>\n
This setting takes values of info, danger, and success. Each has a corresponding background-color.<\/p>\n
Border<\/em><\/span><\/p>\n
This setting takes the value of no-outline, outline, and round. With corresponding behavior applied. <\/p>\n
Shadow<\/em><\/span><\/p>\n
This setting applies a shadow to the button if present and true else no shadow is rendered.<\/p>\n
The CSS to apply the above effects to our component looks like below:<\/p>\n
Button.css<\/em><\/span><\/p>\n
.shadow {\n box-shadow: 0px 3px 5px #aaaaaa;\n}\n.small {\n font-size: 0.75rem;\n}\n.large {\n font-size: 1.45rem;\n}\n.outline {\n border: 1px solid black;\n background-color: white;\n color: black;\n}\n.no-outline {\n border: none;\n}\n.danger {\n background-color: crimson;\n color: whitesmoke;\n}\n.info {\n background-color: blue;\n color: whitesmoke;\n}\n.success {\n background-color: green;\n color: whitesmoke;\n}\n.text-color {\n color: whitesmoke;\n}\n.round {\n border-radius: 4px;\n border: 1px solid lightgrey;\n}\n\n<\/pre>\n3.2 Button Component Implementation<\/h3>\n
Now that we have our styling stuff set up we write our component. The component renders an HTML button tag with appropriate classes supplied via props to our component. The code for our component looks like below:<\/p>\n
Button.js<\/em><\/span><\/p>\n
import React, { useEffect, useState } from \"react\";\nimport \".\/Button.css\";\nfunction Button(props) {\n const [classes, setClasses] = useState('');\n const { size, type, border, shadow } = props;\n useEffect(() => {\n let cls = '';\n if (size) {\n cls = `${cls} ${size}`;\n }\n if (type) {\n cls = `${cls} ${type}`;\n }\n if (border) {\n cls = `${cls} ${border}`;\n }\n if (shadow) {\n cls = `${cls} shadow`;\n }\n setClasses(`${cls}`);\n }, [size, border, type, shadow]);\n\n return <>\n <span>{\n `Size: ${props.size}, \n Shadow: ${props.shadow},\n Type: ${props.type}, \n Border: ${props.border}`\n }<\/span>\n <button className={classes} {...props}><\/button>\n <\/>;\n}\n\nexport default Button;\n<\/pre>\n4. Using our Button Component<\/h2>\n
This wraps up our Button Component, let us now use it to see it in action. We modify the auto-generated index.js file to use our Button component. The modified code for the index.js file is as below:<\/p>\n
index.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport Button from '.\/Button';\nimport * as serviceWorker from '.\/serviceWorker';\n\nconst sayHello = () => {\n alert('Hello from JCG!');\n}\n\nReactDOM.render(\n <React.StrictMode>\n <div className='center-content'>\n <Button onClick={sayHello} shadow=\"true\" type=\"info\" \nborder=\"round\" size=\"small\">Hello!<\/Button>\n <Button onClick={sayHello} type=\"danger\" border=\"round\" \nsize=\"small\">Hello!<\/Button>\n <Button onClick={sayHello} shadow=\"true\" type=\"info\" \nborder=\"outline\" size=\"large\">Hello!<\/Button>\n <Button onClick={sayHello} type=\"danger\" border=\"no-outline\" \nsize=\"large\">Hello!<\/Button>\n <Button onClick={sayHello} shadow=\"true\" type=\"success\" \nborder=\"round\">Hello!<\/Button>\n <Button onClick={sayHello} type=\"info\" \nborder=\"round\">Hello!<\/Button>\n\n <\/div>\n <\/React.StrictMode>,\n document.getElementById('root')\n);\n\n\/\/ If you want your app to work offline and \n\/\/ load faster, you can change\n\/\/ unregister() to register() below. \n\/\/ Note this comes with some pitfalls.\n\/\/ Learn more about service workers:\n\/\/ https:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();\n\n<\/pre>\nLet us now run the application and see our Button component in action. We run the below command to launch the application in the default browser. The results look like below:<\/p>\n
>npm start\n<\/pre>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Project-Structure-Button-Component.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Project-Output-Button-Component.jpg\")