Creating a React App and Designing the UI
When looking for an app or website to make it can be difficult to think of something to build, then when looking to start an app there are a bunch of languages with a bunch of frameworks on top of a bunch of plugins and dependencies, which can get overwhelming very quickly. So luckily for new developers, some smarter developers have created simple ways to start an app!
When looking to start a React app there are a couple of ways you can start, you can start from scratch and mess around with plugins and optimizing webpack, but in my personal opinion that is waste of time since other people have done it already. You should learn the “under the hood” stuff so you know how everything is connected, but trying to optimize and build from scratch will take time from you developing.
Starting a React app is especially easy thanks to the React team creating and constantly maintaining their single line command create-react-app. I personally use create-react-app opposed to others due to the ability to change some advanced settings. Configurement of things like webpack and Bable are also a plus. There are a couple of package managers than you can use to run the command as well such as npx, npm, and yarn. The ability to add flags, — template typscript, and have the line provide you a template is a huge thing for developers who prefer to use TypeScript.
There are other starter frameworks such as GatsbyJS and NextJS. They come with routing solutions and have great features such as pre-fetching, code splitting, and offline support out-of-the-box. These frameworks make apps SERIOUSLY fast, due to it’s server-side rendering and static-site generation.
NextJS focuses on server-side rendering which means upgraded SEO (Search Engine Optimization) capabilites. NextJS also makes it very easy to deploy apps thanks to Vercel, the company behind NextJS. NextJS gives developers an easy way to to create APIs within the application.
These frameworks to have some downside though, such as if you have a lot of dynamic data GatsbyJS is not going to be your best route due to the poor client side fetching that needs to be done. If the data that is rendering is going to be static than Gatsby can be good for you, but if not then I wouldn’t trying to make it work. NextJS only has one way of dealing with routes which is honestly it’s only downside. NextJS is limited to its file-based router, and dynamic routes are only possible when used with a NodeJS server.
After figuring out the scaffoling and what framework you want to use to start your application, comes the UI and design of your application. You can have the best features on an app, but if they look bad with no color or style a user of your site or app won’t care if it how good it works if it looks unappealing. Most users of the web and apps don’t know what goes into creating a small feature of an app or creating a entire site, so they can’t fully appreciate what goes into all of it. That’s why UI has grown into the amazing monster it is.
The UI can be styled and designed in so many ways from UI frameworks to plain CSS. You can learn and should learn CSS, because it can be very powerful in design and making your website responsive, but also the UI frameworks and libraries such as React-Bootstrap, Semantics-UI, and Material-UI. Implementing a UI framework or library is very easy and gives you access to a lot of easy to plug in styled components such as buttons, lists, and inputs.
The only effort put into adding a framework is an install and import into a component. Which for me is great, because it gives me more time to develop and think of features that I can add to my app. In my opinion, the libraries are just too easy and too accessible to not be implemented into your application if you are working on a project solo or a small team.
