Everything you need to know about... reactJS File Structure ...in only 7 slides. -/-/ ~/ & & Emil @codewithemil SoHey there! & The create-react-app tool is set to create a predeterminate group of files and folders. Today, I’m going to explain you this structure and the uses of every single file/folder so that you have a better understanding of the work that’s going on behind our screens. Swipe left! «> #reactis 02React File Structure 2) + Here's what our original structure should look like after creating a project: + As you can see, there are a lot of files and folders here. Some of them shouldn't be modified at all during production. @codewithemil Ly Sec % favicon.ico Crean Cameleon cP are] Ctra Sea reese ce FT Rod BB App.js A, App.test.js cage) Ls lat Emr) UB a er & setupTestsjs Pred Peele a Peer ae Peal 03C3 Root Folder & “B This is the folder section we're talking about. er Contains all the This file specifies dependencies that are intentionally needed for an initial untracked files that working React app. Git should ignite. This file contains This file can be used several relevant to define/describe ~metadata. usage of the project. @codewithemil 04Public Folder © © Gis —O> This is the folder section we're talking about. File + favicon.ico The Root folder that is The icon that will presented in the web appear when someone as our React App. visits our website. The template file that Defines rules for shows up when we crawlers, spiders & launch our app. scrapers when (Where React renders) accessing the app. @codewithemil 05“ Same folder as last slide! wy The Root folder that is AReact logo with the presented in the. web given dimensions as our React App. (192px*192px). Another React logo with It is used to define our much bigger dimensions app. Contains metadata (512px*51 2px). and is used by mobile phones to add a web app version of our project to their homescreen. @codewithemil 06“B This is the folder section we're talking about. This is our React App Contains styles of our Folder. Components React Components and CSS go here. (App.js). It has very basic React Contains styles/ Components inside. general style setup Replace them for your for our app. root/main component. @codewithemil ‘ 07— Same folder as last slide! A very basic test.for the This file renders our default app. You can components into the replace it with your own! index.html file. An SVG file of the React This file sets up and runs logo used in acomponent _ tests. This file is invoked (App.js) by default. when the command “npm run test” is executed. @codewithemil 08What folders... ...can we edit without causing issues? a public en) teary ei eya aenead EN re) roar Reece Wares Per at Proce alas ie) @codewithemil what you're doing (manifest.json & robots.txt) You can edit all files here! Issue-ometer DON'T! Becareful You can on what edit! you're doing 09Thank you for reading! ¢ #StandWithUkraine By: @codewithemil W