Bu blog g\u00f6nderisindeki e\u011fitimle React uygulamalar\u0131n\u0131zda Excel dosyalar\u0131n\u0131 zahmetsizce nas\u0131l y\u00fckleyece\u011finizi ve g\u00f6r\u00fcnt\u00fcleyece\u011finizi \u00f6\u011frenece\u011fiz. React ile web geli\u015ftirme becerilerinizi geli\u015ftirmek i\u00e7in di\u011fer blog g\u00f6nderilerini inceleyebilirsiniz. \u015eimdi hemen ba\u015flayal\u0131m ve projelerinizi Excel dosya entegrasyonuyla g\u00fc\u00e7lendirelim!<\/p>\n\n\n\n
app.js<\/strong><\/p>\n\n\n\n Github: https:\/\/github.com\/fatihsoysal\/React-Upload-And-View-Excel-Files<\/a><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Bu blog g\u00f6nderisindeki e\u011fitimle React uygulamalar\u0131n\u0131zda Excel dosyalar\u0131n\u0131 zahmetsizce nas\u0131l y\u00fckleyece\u011finizi ve g\u00f6r\u00fcnt\u00fcleyece\u011finizi \u00f6\u011frenece\u011fiz. React ile web geli\u015ftirme…","protected":false},"author":1,"featured_media":2401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[785,786,784],"class_list":{"0":"post-2400","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-excel-upload","9":"tag-react-excel-onizleme","10":"tag-react-excel-upload","11":"cs-entry","12":"cs-video-wrap"},"yoast_head":"\nimport { useState } from \"react\";\nimport * as XLSX from 'xlsx';\n\nfunction App() {\n\n \/\/ onchange states\n const [excelFile, setExcelFile] = useState(null);\n const [typeError, setTypeError] = useState(null);\n\n \/\/ submit state\n const [excelData, setExcelData] = useState(null);\n\n \/\/ onchange event\n const handleFile=(e)=>{\n let fileTypes = ['application\/vnd.ms-excel','application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet','text\/csv'];\n let selectedFile = e.target.files[0];\n if(selectedFile){\n if(selectedFile&&fileTypes.includes(selectedFile.type)){\n setTypeError(null);\n let reader = new FileReader();\n reader.readAsArrayBuffer(selectedFile);\n reader.onload=(e)=>{\n setExcelFile(e.target.result);\n }\n }\n else{\n setTypeError('Please select only excel file types');\n setExcelFile(null);\n }\n }\n else{\n console.log('Please select your file');\n }\n }\n \n \/\/ submit event\n const handleFileSubmit=(e)=>{\n e.preventDefault();\n if(excelFile!==null){\n const workbook = XLSX.read(excelFile,{type: 'buffer'});\n const worksheetName = workbook.SheetNames[0];\n const worksheet = workbook.Sheets[worksheetName];\n const data = XLSX.utils.sheet_to_json(worksheet);\n setExcelData(data.slice(0,10));\n }\n }\n\n return (\n <div className=\"wrapper\">\n\n <h3>Upload & View Excel Sheets<\/h3>\n\n {\/* form *\/}\n <form className=\"form-group custom-form\" onSubmit={handleFileSubmit}>\n <input type=\"file\" className=\"form-control\" required onChange={handleFile} \/>\n <button type=\"submit\" className=\"btn btn-success btn-md\">UPLOAD<\/button>\n {typeError&&(\n <div className=\"alert alert-danger\" role=\"alert\">{typeError}<\/div>\n )}\n <\/form>\n\n {\/* view data *\/}\n <div className=\"viewer\">\n {excelData?(\n <div className=\"table-responsive\">\n <table className=\"table\">\n\n <thead>\n <tr>\n {Object.keys(excelData[0]).map((key)=>(\n <th key={key}>{key}<\/th>\n ))}\n <\/tr>\n <\/thead>\n\n <tbody>\n {excelData.map((individualExcelData, index)=>(\n <tr key={index}>\n {Object.keys(individualExcelData).map((key)=>(\n <td key={key}>{individualExcelData[key]}<\/td>\n ))}\n <\/tr>\n ))}\n <\/tbody>\n\n <\/table>\n <\/div>\n ):(\n <div>No File is uploaded yet!<\/div>\n )}\n <\/div>\n\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n