As I mentioned in my previous blog post, this past week I was able to get the most current Craft Center project. The backend was for the most part working as expected, but the front-end was missing functionality. Our team therefore decided that fixing up the front-end was the best move to make. However although I was used to web development with Node.js, I wasn’t part of the class that experienced web development with React. Honestly, I felt a bit overwhelmed, but I remember that I had bought a Udemy course at the advice of a team member back when I took the database class. <\/p>\n\n\n\n
I remembered that it covered the most popular frameworks and render engines, so I went back to take a look at it. As I skimmed across the videos I noticed the React one. It was incredibly helpful, especially considering that much of the content had been updated for 2023. I learned about components and how the React framework is designed to be modular, so that only the individual parts of a website that are updated need to be rendered. Not only does this make the operation of a website faster, it simplifies the project file structure. Websites can now be layered with different components each adding functionality to the website without having to understand long pages of codes. <\/p>\n\n\n\n
This tutorial was invaluable as I had run across classes, like the one shown below, and I wasn’t sure what is was meant to do. <\/p>\n\n\n\n
export default class AddClassForm extends Component {<\/p>\n\n\n\n
constructor(props<\/em>){<\/p>\n\n\n\n super<\/em>(props<\/em>);<\/p>\n\n\n\n this<\/em>.handleSubmit = this<\/em>.handleSubmit.bind(this<\/em>);<\/p>\n\n\n\n }<\/p>\n\n\n\n With the course I realized that this was the original way of using components, which had now been supplanted by hooks for React. Hooks are created by using useState() from React to hold a variable\/object or functions which act on user changes. Additionally the individual component can be exported with a single line at the end of the file:<\/p>\n\n\n\n export default componentName;<\/p>\n\n\n\n Luckily for developers and myself, these new changes are compatible with the old class system so as I move to fix and add functionality, I won’t have to rewrite old code that works. <\/p>\n\n\n\n <\/p>\n\n\n\n