I was recently doing another React project and decided to write down a few of the starting steps, so I can reread them at some point in the future and see if it’s still what I do.
These are just personal thoughts that worked for me so far, so nothing too “best-practicey” and “best-approachey”.
To make a visual example, I’ve sort of recreated this text into React code and deployed it through Vercel (a very simple page, just to show how it’s supposed to work). The result can be seen here and the repo is here.
To simplify things I use Create React App and my code editor is VSCode.
Note: I also use Prettier to make the code look more or less “in-shape”, but that’s not really necessary, so I won’t go through the details about it. In my code it just adds identical tab widths of 2, semicolons and double quotes. Otherwise, if seen on the further screenshots, the file .prettierrc can be ignored.
When you start a new app it will be created within a new folder automatically, so, if you already created one and choose it as initial, you should know that your app will be there in a separate folder. Unless you want this, make sure to choose a folder you need. Otherwise you will have a folder within a folder.
Once the directory is chosen, open the terminal and use the following command (make sure to replace the my-app part with the name of your project or how you would like your project folder to be called, because this is going to be its name; use “kebab-case-format” for it):
npx create-react-app my-app
After a bit of time (depending on your PC) the basic React app structure will be created. Then you can use these commands to run it (it will also be written in the terminal; my-app — is the name you chose earlier):
cd my-app
npm start
However, I usually open a new VSCode window and choose the my-app folder directly. Otherwise, you are one folder up, and every time you need to add something new to your app through the terminal, you need to make sure that you’re in the my-app folder and not in the previous folder you chose initially. For me it’s just easier to reopen the project folder, so my initial path is always the app folder itself. E.g., in that case you can run the app with npm start without the need to cd my-app.
Once you start the app, the basic page for Create React App will be opened in your browser:
And your files structure will look like this:
Starting from bottom to top, I usually do the following next:
- In the README.md clear everything and put some general information about the project. Something like:
You can follow the example of the Markdown format that was in the Readme initially or simply google something like “basic markdown example”.
- Then remove everything from the src folder except for App.css, App.js, index.css, index.js.
- Remove all the comments and reportWebVitals() from index.js.
- Remove everything from index.css (although some may found it useful to leave body { margin: 0 } there).
- From App.js remove imported logo and all the html-elements from the function App. Put some “hello-worldish” element to test that it renders properly later.
- Remove everything from App.css.
- In the public folder delete everything except for index.html.
- Remove all the comments from index.html, change the title tag to what you need it to be, remove all the link-tags.
After this you should see your Hello world page in the browser without any errors.
And the file structure will look like this (as said before, ignore .prettierrc if you don’t use it):
So far there’s one component, App.js which creates “Hello world” tag and it’s then being rendered in index.js.
Then in the src folder I create the following main folders for the project: assets, components, pages. This is subjective, so it can be done differently depending on various standards/preferences (+ I won’t mention making a utils folder as I won’t be using any additional utilities for this app).
Assets stores mostly images, gifs, etc., components is used for the smallest elements which are (ta-dam!) components, and in pages you keep you (another ta-dam!) pages which sum up all the necessary components in them.
I store each component and page in a separate folder as I prefer making a separate CSS-file for each one of them. However, if you use styled components, write all the CSS in one file or do whatever else you prefer, you may not need separate folders (and probably, you also don’t need you App.css file then).
This app will have only one page, but for the sake of example I’ll spread all the files into the mentioned folders just to show how it usually looks in my case.
Files structure so far:
App.js file:
Home.js file:
Header.js file:
Main.js file:
Now, I did some tweaking and basically recreated this article into a React-page. Here’s one final screenshot of the files structure:
I won’t go into details about HTML and CSS used. I just added it the simplest way it seemed possible as it wasn’t the objective for this one (no judgement, ok?). I simply wanted to create and show this same text but made with the basic Create React App.
That’s pretty much it about how it looks and works. If you found this so-called guide useful, I sincerely thank thee kind person.
