Nerd For Tech
Published in

Nerd For Tech

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

Photo by Maksym Kaharlytskyi on Unsplash

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.

Diagram by author

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.

Sample how-to tutorial

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.

Image by author
Image by author

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.

Image by author

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.

Image by author

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?

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Intro To Angular HTTP Interceptors, And How To Create A Backendless App With Them.

Symbol Super Telegram/Discord bot Projects

Two Ways of Managing State in a Functional React Form

Soft edges on display sources in Open Broadcaster Software

React Performance Optimization

8 Things You Should Do Before Going Live with React Native

Create a dynamic grid carousel with Tiny Slider

RabbitMQ with Node JS — 01

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
William Infante

William Infante

R&D Engineer

More from Medium

Google clone

Deploying a React App on Github Pages With a Custom URL

an image showing a homepage property added to the head of a package.json file

MEAN Stack versus MERN Stack For Web App Development — Comparison Between Technology Stacks

Authenticate Google and GitHub account Using Firebase