- \n
- create-react-app<\/a><\/li>\n
- ReactJS<\/a><\/li>\n
- Visual Studio Code IDE<\/a><\/li>\n<\/ul>\n
The create-react-app package from the folks at Facebook allows us to quickly generate a ReactJS application structure. It pulls down the latest version of ReactJS as well. Visual Studio Code IDE is my editor of choice for JavaScript development. Although you are free to follow along in an editor of your choice.<\/p>\n
2. Project Structure<\/h2>\n
We use the create-react-app package as follows to generate our ReactJS application<\/p>\n
>npx create-react-app my-app\n<\/pre>\n
The npx command downloads a temporary copy of create-react-app and runs it with the parameters provided. It disposes of the create-react-app package once done. Once the command completes our new project should look like below:<\/p>\n
\n![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ReactJS-Checkboxes-Project-Structure.jpg\")
Project Structure<\/figcaption><\/figure>\n<\/div>\n 3. Checkbox Component<\/h2>\n
Let us create a component, Checkbox, that will render an input tag of type checkbox. We will use this component in different modes as a Controlled as well as Uncontrolled Component. This component resides in a file called Checkbox under the Components folder. And the code for this component looks like below:
<\/div> <\/div><\/p>\nCheckbox.js<\/em><\/span><\/p>\n
import React from 'react';\n\nfunction Checkbox(props) {\n const { left, right, text } = props;\n return <div style={{ display: 'flex' }}>\n {left && <label>{text}<\/label>}\n <input type=\"checkbox\" {...props} \/>\n {right && <label>{text}<\/label>}\n <\/div>;\n}\nexport default Checkbox;\n<\/pre>\nNow let us use this component in another component called MyComponent. The code for MyComponent looks like below:<\/p>\n
MyComponent.js<\/em><\/span><\/p>\n
import React, { useState } from \"react\";\nimport Checkbox from '.\/Checkbox';\nfunction MyComponent(props) {\n const [checked, setChecked] = useState(false);\n const handleChecked = ({ target }) => {\n setChecked(target.checked);\n }\n return <div style={{\n display: 'flex',\n flexDirection: 'column',\n height: '100vh',\n width: '100vw',\n justifyContent: 'center',\n alignItems: 'center'\n }}>\n <Checkbox right=\"true\" defaultChecked={true} \ntext=\"Check Me\" style={{ marginTop: '5px' }} \/>\n <Checkbox left=\"true\" text=\"Check Me\" \nstyle={{ marginTop: '6px' }} \/>\n <Checkbox right=\"true\" text=\"Check Me\" \nstyle={{ marginTop: '5px' }} \/>\n <Checkbox left=\"true\" onChange={handleChecked} \nchecked={checked} text=\"Check Me\" style={{ marginTop: '6px' }} \/>\n <\/div>\n}\nexport default MyComponent;\n\n<\/pre>\nNow let us use this component and to do that we modify the index.js file suitably. The modified index.js file with changes should look like below.<\/p>\n
index.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport Checkbox from \".\/Components\/Checkbox\";\nimport * as serviceWorker from '.\/serviceWorker';\n\nReactDOM.render(\n <React.StrictMode>\n <MyComponent \/>\n <\/React.StrictMode>,\n document.getElementById('root')\n);\n\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();\n\n<\/pre>\nAs you can see from the above we have reused our Checkbox component twice as an uncontrolled component. Once we show the label to the left of it and once to the right. Apart from setting other props on the component like style. <\/p>\n
We have also set a default value for one these components by adding defaultChecked props like below:<\/p>\n
<Checkbox right=\"true\" defaultChecked={true} text=\"Check Me\" \nstyle={{ marginTop: '5px' }} \/>\n<\/pre>\nWe have also made them controlled components, using an onChange handler and binding the checked attribute to state property.<\/p>\n
4. Running the application<\/h2>\n
Let us run our code to see all of this in action. We run the below command to launch our application:<\/p>\n
\/my-app>npm start\n<\/pre>\n
The UI of our application should look like below:<\/p>\n
- ReactJS<\/a><\/li>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/Project-Output-Checkboxes-Demo.jpg\")