Bye Node, Hello React!

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.

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.

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.

export default class AddClassForm extends Component {

    constructor(props){

        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);

    }

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:

export default componentName;

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.

PS: If you want to know the tutorial I’m using look for: The Complete 2023 Web Development Bootcamp by Angela Yu.

Hope this Helps!