Phase two of the program is a little bit more challenging than the first phase. After completing phase 1, I can build a simple app with Javascript, CSS and HTML. In the second phase of the program, I was introduced to React which is completely built outside of Javascript by using the combination of dependencies. Thus, using React to build an app is different compared to using Javascript while React provides the specific ways to organize and structure the design of web applications. When I learned React, I was introduced to JSX which is an extension of Javascript with specific syntax that allows us to write code that looks like HTML. Moreover, JSX uses the component to separate codes into different blocks, and when these components are combined, they form a fully working web application.
My phase-2 project is a Dogs Breed web application that was built by using React. Snippets of JSX get separated into four components which are Home, Navbar, DogListCard, and DogListContainer. CSS files were added to support for DogListCard and DogListContainer. Each component creates each page in a web application. Each page contains different types of content, so users can easily understand the app.
Firstly, the App component is the main component that would be used to combine all other components to render the app. There is an issue where I was trying to use react-router-dom. React-router-dom no longer supports <Switch>, so I updated the newest version for react-router-dom; it still didn’t work out. I spent the whole day researching, and finally, I found out that I needed to use <routes> instead of <switch>.
Another obstacle I have is GET the object from a separate file of JSON-Serve which is one of the requirements. To do this I set up the front end and back end into separate Ports which are 3000 for the back end and 3001 for the front end.
Next, Navbar components are used to create the navigation bar which allows users to navigate inside the application. In this app,a responsive Navbar was created by using react-router-dom.
In the Home component, a short description about dog breed and an image of a smiling dog is provided. A function named Home was called, and it has the same name as the component. Inside the Home function, it has JSX code which <img />, h1, p. And all of this code would be exported at the end of the component, then it will be used to import to the App component.
The list of dog breeds will be displayed in a card container for each dog breed. The card container will contain an “image”, “dog breed name” of dog breed and a like and delete button. I created a separate component for the dog breed list which is DogListContainer and DogListCard because I want to build two separate CSS files for each component. The styleContainer.css is created for DogListContainer and styleCard.css is for DogListCard.
In DogListContainer, I use the map() method to render attributes of dog breed to the DogListCard component.
In DogListCard, I use JSX syntax to disclose attributes of dog breeds in the Card.
The last component is NewDog which allows users to contribute to the dog breed list. NewDog includes a JSX syntax form and the style of the input form is coded as a part of the App.css file.
The newDog component also has a POST method which is used to add a new dog breed to the JSON server.
Moreover, every card also contains two buttons which are “likes” and “delete”. When clients click on the like button, the “likes” number will increase and it will be updated to the JSON server by using the “PATH” method. On the other hand, when clients like to remove one of the dog breeds, they will hit the delete button, and then the one that was deleted will be removed from the server by using the method “DELETE”
In conclusion, it is too different between the project of phase one and phase two. Although they are built using JavaScript and CSS, React is very interesting. By using React, we can use JSX syntax instead of HTML in separate files. Components structure is good to organize the code; however, it is easy to confuse when passing the props between components. Over all, React is also a good tool to build an app.