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( ), and Andrei Neagoie( ). react zeroToMastery.io BUT... why can't you learn by doing? For starters, on the react homepage, , there are four example code snippets guiding you to the basics. This lone documentation is enough for you to bootstrap your react app from just printing something on a browser/console to building a full-stack application. ReactJS Start writing something, it won't come up... read documentation , it's the best site that gives insights on each and every line of code you write. reactjs 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 or any boilerplate code. npx create-react-app my-application I would recommend using functional components with hooks, , for form data, for queries, etc. MaterialUI React Hook Form React Query 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 , , , or check for ideas to do them. Appbar Sidebar Navbar 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 as your database, everything JSON and you'll love it 😍. Firebase Connect the Firebase with your app. Get some data and refactor the hardcoded data with API payloads. Now wherever you feel you duplicated code, make them a reusable component. Like , , , , , , , ,c , , , and much more, etc. Card ChipInput Modal Button TextField Notification Select Image FileUpload ToolTip AutocompleteTextField 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 data. This will be a pattern all your requests follow. API XHR 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 or to reduce the number of re-renders, this will lower the burden on DOM. useCallback useMemo 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 onto the server. artifacts You need to build the app first, by running the command . This will minify the app into the build folder under the root project directory. npm run build Log in to your account, or signup if you don't have one. GitHub Create a repository(either public/private repo) and push all of your react app code to this new repository. Go to and signup. Netlify After signup, you are redirected to the sites screen, click and connect choose your account. New Site from Git, Github Don't choose , choose to choose the latest repo you created and click install. All Repositories Only select repositories Don't change the defaults on Netlify, click on . This will start deploying your site and it will take some time to run the builds. Deploy Site When the deployment is successful, you see on Netlify . Site is Live Deploy Log You can set up your own domain or Netlify gives you a URL so you can share. Consider using NextJS to take your app to next level. Note: 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, it gives me some sort of aesthetic vibes!!! First published here: https://dev.to/ggorantala/advice-to-react-developers-how-to-master-react-development-1l1h

Google

SOLID: Learn About the Single Responsibility Principle With Examples

Have you Used the Streams API in Java?

ggorantala.dev

My Portfolio

Buy My Course: Grokking Bit Manipulation For Coding Interviews.

Buy Me a Coffee

10% off educative.io

The Complete Junior to Senior Web Developer Roadmap (2022)

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Functional Programming

Too Long; Didn't Read

Make resilience your competitive advantage

Get Better at Using React Library And Continuous Deployment

Get Better at Using React Library And Continuous Deployment

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

SOLID: Learn About the Single Responsibility Principle With Examples

104 Stories To Learn About Continuous Integration

Application Deployment: Recipe for Great Serverless Strategy

5 Best Microservices CI/CD Tools You Need to Check Out

5 Most Common Software Deployment Mistakes and How to Avoid Them

SOLID: Learn About the Single Responsibility Principle With Examples

104 Stories To Learn About Continuous Integration

Application Deployment: Recipe for Great Serverless Strategy

5 Best Microservices CI/CD Tools You Need to Check Out

5 Most Common Software Deployment Mistakes and How to Avoid Them

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps