> ## Content Index > Fetch the complete content index at: https://www.ggorantala.dev/llms.txt > Use this file to discover other available public pages before exploring further. # How to master react, continuous deployment using Netlify - URL: https://www.ggorantala.dev/master-react-and-continuous-deployment/ - Published: 2022-08-28T11:52:35.000Z - Updated: 2022-12-13T12:38:21.000Z - Author: Gopi Gorantala - Tags: React.js 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 incredible 😅. 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%5Fuzodzrlr)). **BUT... why can't you learn by doing?** For starters, on react homepage [ReactJS](https://reactjs.org/), four example code snippets guide 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, and it won't come up. Read documentation [ReactJS](https://reactjs.org/). It's the best site that gives insights into every line of code you write. I would say you don't mimic already existing applications. Here are some of my ideas. If it helps, try, and if 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 ![](https://storage.ghost.io/c/e3/0b/e30b8112-16a4-4a70-8441-b0c5d5f2b4d7/content/images/2022/08/mui.png) ## React hook form ![](https://storage.ghost.io/c/e3/0b/e30b8112-16a4-4a70-8441-b0c5d5f2b4d7/content/images/2022/08/react-hook-form.jpeg) ## React Query ![](https://storage.ghost.io/c/e3/0b/e30b8112-16a4-4a70-8441-b0c5d5f2b4d7/content/images/2022/08/react-query.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 reusable components right away. - Start simple, check StackOverflow and get some ideas for 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 hard-coded data. I recommend [Firebase](https://firebase.google.com/) as your database, everything JSON, and you'll love it 😍. ![](https://storage.ghost.io/c/e3/0b/e30b8112-16a4-4a70-8441-b0c5d5f2b4d7/content/images/2022/08/firebase.png) - Connect the Firebase with your app. Get some data and refactor the hardcoded data with API payloads. - Now, make them a reusable component wherever you feel you duplicate code. Like `Card`, `ChipInput`, `Modal`, `Button`, `TextField`, `Notification`, `Select`, `Image`,c `FileUpload`, `ToolTip`, `AutocompleteTextField`And much more etc. - 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 ensure the code is readable. - Check for code quality, and your code should not flood the state. - Now, check how many times each of your components are rendered. It would be best if you used `useCallback` or `useMemo` reduce the number of re-renders, lowering the burden on DOM. ## Deploy the app using Netlify ![](https://storage.ghost.io/c/e3/0b/e30b8112-16a4-4a70-8441-b0c5d5f2b4d7/content/images/2022/08/Netlify.jpeg) This is relatively easy. Follow the steps along to make 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. 3. Create a repository(either public/private repo) and push all of your react app code to this new repository. 4. Go to [Netlify](https://app.netlify.com/) and signup. 5. After signup, you are redirected to the sites screen, click **New Site from Git, connect**, and choose your **GitHub** account. 6. Don't choose **All Repositories. Choose** **only repositories** to select 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 the **Site is Live** on Netlify **Deploy Log**. 9. You can set up your domain, or Netlify gives you a URL so you can share. **Note:** Consider using NextJS to take your app to the next level. --- Don't buy all the paid courses. There are plenty of free online resources available which would help you. Spend a week determining if you still feel bits and pieces are missing. You can always buy a paid course. I love React ❤️. Frontend gives me some aesthetic vibes!!!