My first experience with using react from scratch, not following any tutorial examples, but referencing my old code from time to time has been good practice. It is challenging and each figuring out how to do every little thing is helping me understand it better which was the goal of this. My previous project was created using JHipster, a full-stack platform that lets you more easily create React/Angular apps with a Java back-end. I used this initially because I wanted to get things up and running up quicker, but after realizing all the extra overhead and my lack of how everything worked, I decided to redo it from scratch so that I could learn everything about React. I know Java very well, as I am a back-end developer who has worked with Java for 7 years, not including using it as our main language in college. It was tough to start from scratch because I had done a lot already, but I know how beneficial it will be for me in the long run.
I first ran into issues trying to use TypeScript instead of JavaScript. I had used TypeScript in my previous project so I couldn’t understand what the issue was. After a lot of research and trial and error, it turned out to be a mixture of issues with VS Code and the TypeScript version I was using. I’ll write about what that exact issue was later, but for now I am just happy to be over that hump.
The first thing I did was create a new Homepage component, and remember how exactly to display it as the Homepage when you go to the site. This was easy in the app.tsx you can just import that component and use it within the return. You don’t have to use a component for the home page. You could just simply add the html for the home page directly in the return.
Next I created a simple registration component. I then wanted to add a link to the home page that would route me to the registration page where I could fill out the form. This is where the fun began. I knew about React-router-dom and based on how my objects were created in my previous project I kind of knew how it worked but wasn’t 100% sure about everything. I looked at the routes.tsx file I had in my previous project along with some sample code from https://www.geeksforgeeks.org/reactjs-router/ . First you install react-router-dom(see https://reactrouter.com/web/guides/quick-start ) then you import the needed components. (reference the geeksforgeeks link mentioned above). In short, you will import these components in the app.tsx file. Then you wrap everything in the return with the <Router> component. Now with this, I want to create a link to my register page. To do so I could create a link directly in app.tsx, but that could get to be a lot when you add more and more routes. Instead I followed what my previous project did. I created a routes component, and I added a link to my register page there. Next, in my app.tsx file I import the routes component I just created and I put that inside the <Router> component that I added previously. with the routes component and a link to my register page that looks like (<Link to=”/register”>Register a new account</Link>) I can now click on that link on my home page and be routed to the register page.
What’s next? I already have the endpoints created in Java using Spring Boot, so I will now have to use things like props which are used to pass data between components, and state which is used to store data we want to be able to reference at different points in the applications. I will also be using Axios to make the API calls to my spring boot application.
Recent Comments