Improve your React skills (and create a responsive destination site) using the semantic UI template
Reusing and Refactoring the React Semantic UI Homepage Layout Template
You’ve finally decided to have a go at learning ReactJS and would like to see a pathway for you to build your own react app in no time. There are different approaches and levels for your learning React journey but I did notice a gap from the usually recommended ones. This article will help address that missing link by providing an “unstructured template” example to help you fast track building your own React app from scratch that’s easy to maintain.
For beginners, taking a short course that introduces you to the foundations would be a good start. I would recommend Stephen Grider’s Modern React with Redux that introduces concepts through example short projects. After this, you probably want to level up and look at guided tutorials. One example I would recommend for the how-to tutorials may be the covid app tracker.
Now you’re really itching to create your own React app. A fast-tracked way is to use existing templates with structured folders and probably modify some text or images and you’re good to go. Okay, so you’ve done that but can you already say: `cool, I’ll build mine from scratch now`? And just to qualify building from sratch, it could still mean that we’re using the `create-react-app` boiler plate but have the capability of refactoring and organising components into your desired folders.
When I was at that stage of finishing some how-to tutorials and structured templates, I would have wanted an activity that is somehow guided but, at the same time, let me have a go to reorganize files and add components like it’s almost building from scratch.
I then stumbled upon an example Layout Semantic UI template as a guide to creating say a destination website. This seems to fit my usecase and what’s more, they basically have a one-file for their React to build this homepage. This dummy template was intentionally made as one file. It doesn’t link to any external sites and only have links and buttons partially coded. This seems like a good pratice since for me since I will need to refactor the code and place them in industry recommended React folders and code most parts of the components. This seems to be a good practice of what I’ve learned from previous React courses and tutorials and should be a stepping block to creating your own React app from scratch. The one
On the plus side too, this will also help me create a sample destination website. As you can see, the layout from the template is almost similar to the sample site I created. nd I’ve published this at https://trinuts.vercel.app with the github repo in here.
Moving folders
From a single homepage layout file, I’ve split this into multiple components and added more components later on. There could possibly be more grouping like placing all the container components in the container folder but this could easily be implemented in the future.
Adding components
Given this freedom to group and move around components helps you experiment say in adding more components from other libraries like the Link from react-scroll for a more controlled scrolling feature.
During the development, there are also different containers for the mobile version and the web version, so this was again a good practice to reuse components for both containers. Sanity checking for both version was also needed. I did find initial bugs from these checks.
We could further add components like the LocalImage component or other frame components. As a side note on the maps frame, I could probably use the Google Maps API to create a more customized design but for the purpose of this destination website, just creating the iframes from Google MyMaps did the trick.
Final Thoughts
Having a go at modifying one-file templates and converting them to more manageable and easily maintainable system may just be what you’ll need to say that you can now build react apps from scratch.
The activity itself of moving folders can be quick and easy to implement. I am not saying that the code found in my repository is the best way to refactor or reuse this template, but this is just to demonstrate how this can be part of your exercise.
Practice, practice, practice could be the definitely be a key to building your react application from scratch, but there could be smarter ways of doing this practice. If you’ve already tried courses, how-to tutorials and structured templates, why not try out unstructured templates too like the one presented here?
