How To Master React Library And Continuous Deployment

React is one of the most popular libraries in the frontend world.

Being a backend developer for over 10 years, I agree I started with React 4 years ago and found it awesome 😅. And there is no reason for me to switch.

Developers, you can buy some paid courses online by Stephen Grider(react), and Andrei Neagoie(zeroToMastery.io).

BUT... why can't you learn by doing?

For starters, on react homepage ReactJS, there are four example code snippets guiding you to the basics. This alone documentation is enough for you to bootstrap your react app from just printing something on a browser/console to building a full-stack application.

Start writing something, it won't come up... read documentation reactjs, it's the best site that gives insights on each and every line of code you write.

I would say you don't mimic already existing applications. Here are some of my ideas which if it helps, try it and if it not, please don't hesitate to ask questions.

Advice

For starters, learn the basics that's enough, don't go deep...

• First bootstrap a react application with CRA npx create-react-app my-application or any boilerplate code.

• I would recommend using functional components with hooks,MaterialUI, React Hook Form for form data, React Query for queries etc.

Material UI

React Hook Form

React Query

• Now think of an idea or application you want to build. I recommend you build an app that represents your resume (more like a portfolio website). You can showcase this to recruiters once it's deployment-ready 🤩.

• Don't build re-usable components right away.

• Start simple, go check StackOverflow and get some ideas in building Appbar, Sidebar, Navbar, or check for ideas to do them.

• Now, write some code and bring up the app.

• Hardcode data, for now, there is no rush in getting data from API, and don't mess the code right away with APIs, databases, etc.

• When you think your app is ready with hardcoded data. I would recommend Firebase as your database, everything JSON and you'll love it 😍.

• Connect the Firebase with your app. Get some data and refactor the hardcoded data with API payloads.

• Now where ever you feel you duplicated code, make them a reusable component. Like Card, ChipInput, Modal, Button, TextField, Notification, Select, Image,c FileUpload, ToolTip, AutocompleteTextField, and much more etc.

• Now once this is up and working... install redux and inflate the state. Connect the store and get it ready.

• By this time your hands are dirty and you know what's happening within the app.

• Now you are an intermediate React developer--------------

Do you want to become an expert?

• Have an API wrapper that takes the request and serves you API data. This will be a pattern all your XHR requests follow.

• Each Component should serve a single purpose, if you think the feature you're adding should be separated, don't hesitate... Just separate, and later you can clean and make sure the code is readable.

• Check for code quality, your code should not flood the state.

• Now, check how many times each of your individual components are rendered. You should use useCallback or useMemo to reduce the number of re-renders, this will lower the burden on DOM.

Deploy the app using Netlify

This is quite easy, follow the steps along to make your react app live.

We will use Github + Netlify to do the continuous deployment. So, whenever there is a new change in the repository, Netlify watches the changes and deploys the latest artifacts onto the server.

1. You need to build the app first, by running the command npm run build. This will minify the app into the build folder under the root project directory.

2. log in to your GitHub account, or signup if you don't have one.

3. Create a repository(either public/private repo) and push all of your react app code to this new repository.

4. Go to Netlify and signup.

5. After signup, you are redirected to the sites screen, click New Site from Git and connect choose your Github account.

6. Don't choose All Repositories, choose Only select repositories to choose the latest repo you created and click install.

7. Don't change the defaults on Netlify, click on Deploy Site. This will start deploying your site and it will take some time to run the builds.

8. When the deployment is successful, you see Site is Live on Netlify Deploy Log.

9. You can set up your own domain or Netlify gives you a URL so you can share.

Note: Consider using NextJS to take your app to next level.

Don't buy all the paid courses. There are plenty of online free resources available and they would definitely help you. Spend a week determined and if you still feel there are bits and pieces missing. You can always buy a paid course.

I love React ❤️ frontend gives me some sort of aesthetic vibes!!!