Förra helgen försökte jag hitta repet för ReactJS SPA (Single Page Application) för att ta reda på den bästa mappstrukturen som kan användas för React js-projekt. Jag kunde inte hitta något på mappstrukturen, men kunde hitta två start-/boilerplate-repos. Jag bestämde mig för att lära mig mer om de två start-/boilerplate-reposen för att själv kunna göra ett exempel på mappstruktur som ska användas i ReactJS-projekt.
Create-react-appen är utvecklad/konfigurerad av Facebook som en del av Facebook inkubator. Det här verktyget hjälper dig att skapa React-appar utan behov av någon bygg konfiguration.
“generator-react-webpack” är en yomen-generator för ReactJS-applikationer och kan användas för att snabbt sätta upp ett projekt tillsammans med karmatest löparen och Webpack-modulsystemet.
Jag har installerat create-react-appen i mitt lokala system – den har en mycket enkel installation procedur och kräver ingen konfiguration. Jag föreslår att du går igenom filen “README.md” för att veta mer om installationsproceduren för create-react-app.
Jag har skapat en annan repo att implementera sma-react-boilerplate. Du bör se till att repet är klonat för att se de relaterade filerna som visas i bilden nedan. Jag har inte arbetat med att utveckla en CSS för att göra sidan mer attraktiv eftersom den här handledningen bara är en grundläggande demonstration av verktyget.
Den “public”-mappen innehåller index.html- och .favicon-filer, och de bör inte röras med. Mappen som kräver vår största uppmärksamhet är “src” – mer känd som “en utvecklares lekplats.” Den här mappen innehåller en index.js-fil, som är ett av kärn elementen i programmet. Den här filen används för att skriva applikationens router egenskaper. Rot(“/”)-routern här pekar mot Home-komponenter så att användaren kan se “Hemsidan” när han försöker ringa.
Inuti mappen “src” har jag skapat separata filer för varje sida som Home.js, About.js, Contact.js, etc. Varje fil innehåller en “components”-mapp. Den här mappen används för att behålla komponenterna på varje sida. Du kan hänvisa till Contact.js-filen och kontakt mappen för mer klarhet. Varje mapp kan ha olika komponenter och kan sparas i olika filer.
Slutligen har vi ytterligare tre mappar – “Common”, “layout” och “Forms” – i mappen “components”. Mappen “Common” används för generiska komponenter medan mappen “Layout” används för att spara filer relaterade till sidhuvudet och sidfoten. Mappen “Form” kan nås för element som Textbox, Textarea, etc. Dessa mappar kan betraktas som vanliga komponenter beroende på scenariot.
Jag hoppas att du har en allmän idé om att utveckla en exempel applikation och den mappstruktur som är kopplad till den. Dessa enkla koncept kan användas för att utveckla små och stora applikationer, men kom ihåg att de tunga applikationerna kräver en mer modulär mappstruktur. Du kan kontakta mig på https://twitter.com/shemeermali för alla frågor du kan ha om ämnet.
Glad reaktiv kodning