The create-react-app package is a tool from the folks at Facebook. It helps us to quickly scaffold a ReactJS Application. Also, it uses the latest version of ReactJS. Visual Studio Code is my favorite IDE for JavaScript development but you are free to follow along in your favorite one.<\/p>\n
2. Application Structure<\/h2>\n
To generate our application structure we need to run the below command.<\/p>\n
>npx create-react-app my-app\n<\/pre>\nThe npx command pulls down a temporary copy of create-react-app and runs it with the provided arguments. This prevents pollution of the global namespace with less frequently used tools.
<\/div> <\/div><\/p>\nAfter the above command completes our ReactJS application created in the my-app folder should have the following layout.<\/p>\n
\nProject Structure<\/figcaption><\/figure>\n<\/div>\n In the next section we begin to build our Dropdown component.<\/p>\n
3. Dropdown Component<\/h2>\n
To create our dropdown component we create a file named Dropdown.js under a folder called Component within the src folder. This component will render a select tag along with passed in options as props.<\/p>\n
The code for our Dropdown component looks like below:<\/p>\n
Dropdown.js<\/em><\/span><\/p>\n
import React from \"react\";\n\nfunction Dropdown(props) {\n return <>\n <select {...props}>\n {props.options &&\n props.options.map(o =>\n <option key={o.key} value={o.key}>\n{o.text}<\/option>)\n }\n <\/select>\n <\/>;\n}\nexport default Dropdown;\n<\/pre>\nNow let us modify the index.js file to use and display our Dropdown component. The code for index.js 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 Dropdown from '.\/Components\/Dropdown';\nimport * as serviceWorker from '.\/serviceWorker';\n\nconst container = {\n display: 'flex',\n flexDirection: 'column',\n width: '100vw',\n height: '100vh',\n justifyContent: 'center',\n alignItems: 'center'\n}\nconst options = [\n { key: 'key-1', text: 'Option 1' },\n { key: 'key-2', text: 'Option 2' },\n { key: 'key-3', text: 'Option 3' },\n { key: 'key-4', text: 'Option 4' },\n { key: 'key-5', text: 'Option 5' }\n]\nReactDOM.render(\n <React.StrictMode>\n <div style={container}>\n <Dropdown options={options} multiple \/>\n <Dropdown options={options} \/>\n <\/div>\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<\/pre>\nThese are all the coding changes that we need to make. Now to see our component in action we run the application in the next section.<\/p>\n
4. Dropdown Component in Action<\/h2>\n
To run the application we need to execute the below command:<\/p>\n
\/my-app>npm start\n<\/pre>\nThis will start and launch the application in the default browser. And the output should look like below:<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ReactJS-Dropdown-Project-Structure.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ReactJS-Dropdown-Project-Output.jpg\")