Is this how to create a website or app in React?, React Learning,Questions about React tools

29d (edited) • 🔔 Wins

These few days of learning React and React 19, I learned state management, styling options in React, tanstack query, react router:

The purpose of state management is when multiple components need to share data, when you notice there may be prop drilling or you need to pass props down to other components(even if all of the components don't use the prop), and also

Styling options is like the styles to style each component, your app, and website. This is just like CSS except this is for React and there are multiple options to style in React and React 19.

The traditional CSS and module css is different because in traditional css, you have to give each thing with the same class different name, like if you have the button class, you have to name one of them button 1 , button 2, or just differentiate the name if there are things that are the same thing, but in modules css, you can have the same components and name it a name and it won't affect the other components that are the same thing. (I hope I am explaining this the right way.)

The purpose of Tanstack Query is to fetch data, cache and store data. Tanstack query works with asynchronous data. (Asynchronous data means the data don't show up or come immediately in the app or browser, it takes time.)

Tanstack Query is used when your app or website talk to servers a lot and you want the website or app to feel fast and be fast and smooth for the user while the tanstack is talking to the server. You also use tasnstack query when there is certain data that needs to be constantly updated on the screen or just updated.

You don't use Tanstack query when your website or app isn't talking to servers a lot or certain data don't need to be updated constantly.

The purpose of React Router is when you have a website that has multiple pages and the user can go to different pages. There is a homepage, about us page, contact us page, testimonials page, or any page.

I also learned even though I am not done with the React guide in the Senior Dev Accelerator and the React Course on Udemy is that to create a website in React, it is divided up into two categories. The two categories are for pages that is gone show on every page the visitor go to like the navigation bar, the footer, the header, and these go in the layout in the app.js.

The second category is pages that have their individual pages where they will show on the screen when the user visit or go to that page. The second category of pages go in the routes where each page has a route.

Then for each component that is going to show on each page in the layout and for each page that is going to show when the user visit that page that is in the route, you create a separate file for both categories and write the code of what you want to show for these components on the ui for each component in the layout that is going to show on every page, and you create separate file for the routes pages and write the code in these files for each individual file of what you want to show on the ui for that page when the visitor goes to that page.

You also import these components and pages for the route in the app.js, and also imports when a component or page is going to be used in another component or page.

If you want to add more pages, then you add it to the routes, and create a separate file and write the code for that page of what you want to show or return on the ui and what you want users and visitors to see for that page.

The step I learned to set up a React project is:

Step 1: Install npm, set up the basics of the React project like the basic components,like header, footer, navigation bar and put these in the layout (because you want this to be shown on every page, only put the components that you want to be shown on every page the user visits)

Step 2: Install routing from react router for each individual page(or any routing library)

Step 3: Create a separate file for each of the components and routes for individual pages and write the code including the styling option code to style each component and each individual page(for both layout and routes(components that show on each page and also individual page in the routes) for each component and individual page that you want to show on the ui for that component and page in that file.

Step 4: Set up Tanstack Query to fetch data in the root file

Step 5: code the react project as usual and set up the react hooks (useState, etc.)

Step 6: Set up state management if you notice props are shared among multiple components/prop drilling,your app or website or code is growing in the sense of multiple components need to share the same data or state.

Then after you are done with these steps, and coding your website or app, setting everything up, installing everything, then you publish your website. The steps to publish your website and make it go live:

Step 1: Run npm run dev and then click the link that show the vite + React application, but now it show your current project and styles.

Step 2: Open the profiler tool during development in developer tools & start interacting with the website like a user (click buttons, submit forms,typing in inputs etc) ,

Step 3: keep Profiler in developer tools still running, and open the browser performance panel and Lighthouse. Then after looking at all 3 tools stop Profiler.

Step 4: See what the issue was, what re-rendered in the Profiler, Lighhouse, and Browser Panel and the issues in these tools, what went to slow, any performance issues, and what re-rendered.

Step 5: Choose an optimization strategy that is best for the issue that was found in profiler, light house and the browser panel (do research by looking up documentation, telling ai what re-rendered and the issues from the profiler, browser panel, and lighthouse, choose a strategy from the Optimizing React Performance in the Senior Dev guide in React)

Step 6: Run npm run build to see in production mode, then open the profiler in the dev tools again and record again with the profiler to see if the optimizations you made is working and fixed the issue.

Step 7: Once you see that the issue is fixed and the website or application is working in both development mode and production, you run npm run build for production mode then you publish the site , and then users and visitors can go to it.

I also learned you don't use the profiler and other two tools at the end before you decide to publish your website, but you can use profiler in developer tools, light house, browser panel each time after you build a component or a page with the components on it to make sure that early on everything is rendering properly, and there are no unnecessary rendering on the screen, performance issues, or anything going slow.

Is all of this correct Hayk or did I get something wrong?

Hayk, is the profiler , light house, browser panel only for checking unnecessary rendering, performance issues, website or application going to slow, or are these 3 tools for checking any issue in React and debugging these issues?

11 comments