React Tutorial Part - 3 -> Getting real

In the last post I told you about user interactions in react and I am sure you must have tried some dummy apps (If you haven't you can just do it now). That is you must get a feel for it. You can create a UI with a menu and icon for opening and closing, you can count the no. of times a user clicked a button and all, but now that you have played with it, it is time to get real with it.

Real World Apps

Let me first explain what I mean by real world. These are apps someone (a real person) would use. It must offer some functionality to him. Some examples are: a chat app, a search engine and a social media app (although social media is waste of time).

Real world apps must look good then feel good and finally do little good. If you are on your way to create one you can not do so just with user interactivity, you need a lot of different things and react provides them the right way.

The things that react provides you are

1. Components - Break down your apps into easier to code components
2. Context - Change data across multiple components

That is just it, you've just got two things to handle: Components that is the UI and structure of your app and the data for your app. React has a lot of libraries to support these two further, you may / mayn't use the standards; you can go out of the box and use completely different libraries.

A few libraries for the UI are

1. MaterialUI
2. Tailwindcss
3. React-bootstrap

** A few libraries for managing your data or state are **

1. Redux-toolkit
2. Recoil
3. Rematch

Redux-toolkit is the top choice here and I recommend it, but you need not believe me, so go, try out the new ones.

What else do you need to know

You need to know about some other hooks in react. Some are more important than others, and have their own use cases.

You can view them in the documentation

That is all there is to it. You can build a real world app from scratch using react. The only thing you need to worry about is where to store your data in the cloud. There are several answers to that.

Places to have your data on

1. FaunaDB - A cloud database
2. Supabase - A firebase alternative with user auth and more.
3. Aws Amplify
4. Firebase

There are countless others waiting for a search. I recommend supabase but again you need not count on me, use whatever you want.

All that is remaining is to get your data from the backend (where your data is ) to the frontend (where the user is) and you can do so, while querying your data. There are a few libraries for that as well. They will cache the data, help in mutations and much more.

Libraries for building the bridge

1. RTK query
2. React query
3. Apollo

I like RTK query because it comes in with Redux Toolkit all but again as I have said go experiment with a few.

The most important thing here

The thing people don't understand is it seems easy on paper and pen, but if you haven't written such programs before ( or even if you have) building such a thing is a lot of code, a hell lot of code for some people. If you don't practice clean coding and write spaghetti on your pc. It will be overwhelming for you.

So, what do you want to do is keep a cool mind and just split out your code as much as possible write comments see other's code and learn from it.

The new path

It is the third blog in the series on day 3 and we are already getting real. In the next couple of blogs we will create a todo app with user authentication. The stack will include

1. React (of course,)
2. Redux-toolkit (for the data and bridge)
3. Supabase (for the backend)
4. tailwind (for the beauty)
5. Codesandbox (for the code editor)

You can choose whatever code-editor you want but online code editors are just a lot more hassle free and straight up on point.

Thanks for reading and please share your opinion with me

Follow me on twitter