How To Master React Library And Continuous Deployment
Tags: react, webdev, redux, javascript
Published: 2022-03-14 17:08:21

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](https://www.udemy.com/course/react-redux/)), and Andrei Neagoie([zeroToMastery.io](https://academy.zerotomastery.io/p/complete-react-developer-redux-hooks-graphql-zero-to-mastery?affcode=441520_uzodzrlr)). 

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


![React JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcu2ulw8t52eio96jemf.png)

For starters, on react homepage [ReactJS](https://reactjs.org/), 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](https://reactjs.org/), 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](https://mui.com/), [React Hook Form](https://react-hook-form.com/) for form data, [React Query](https://react-query.tanstack.com/) for queries etc.

#### Material UI
![MUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzkygfpg1sritp5imvjk.png)

#### React Hook Form

![React Hook Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvf0yr75q2zmgs16yy20.png)

#### React Query

![React Queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oof5hidkw1ur7d11a5qa.png)

- 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](https://firebase.google.com/) as your database, everything JSON and you'll love it 😍.

![Firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9dewftlc2xeiq0m7wmg.png)

- 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


![Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igbpoksqa76ov6fyeq6t.png)

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](https://github.com/) account, or signup if you don't have one.

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

3. Go to [Netlify](https://app.netlify.com/) and signup.

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

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

6. 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.

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

8. 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!!!