Week 2 CST438
Summarize what you learned about React this week. In your opinion, what are the strengths and weaknesses of React.
This week we learned about front-end development utilizing the React JavaScript Library. My only previous front-end development experience involved the Internet Programming courses where we used Node.js and Express with templates and server side rendering, so it was quite interesting learning a different approach to front-end development through a JavaScript library like React. What I have learned about React is that it usually relies more on the browser side to build and update the user interface, while Express with templates relies more on the server side to render the pages before sending them to the browser. React is a component-based framework where the interface is sort of broken into components which are basically re-usable JavaScript functions that return an HTML like JSX code; React uses it to create or update the elements in the DOM. Something that is interesting about React is the use of a virtual DOM and how it practically will only update the real DOM when necessary which improves the performance and responsiveness.
Other significant features of the React framework I had learned has to do with the hooks and props. There are four hooks that we have gone over which are the useState, useEffect, useContext, and useRef. I learned that the application of the useState hook involves managing the changing data in the component and is defined with a variable and a setter function. The other hooks like useEffect is used to run the code when a component renders or a certain value changes and in the lab we had utilized it as something to fetch data upon the first rendering, useContext shares the data across components globally, and lastly useRef can be used to reference the DOM elements when needed. I think something I need to get better at understanding is the use cases of useContext and useRef, for example with useRef I was a bit confused with the .current; since the actual element is within the ref.current. Additionally from what I had learned is that props are essentially immutable arguments that can be passed to a component from another. We utilized the Props in our OrderHistory jsx file where we had passed the getOrders fetch function and the order's data to the EditOrder jsx. From the lab alone it did not seem like much but there was a lot for me to unpack and understand about React. I’ll definitely need to go over more and watch some outside video sources about this framework.
One of the strengths with React seems to come from the virtual DOM performance since it minimizes the DOM updates and makes it feel faster and responsive. It was surprising to understand that the application would avoid full-page reloads, and it was quite noticeable when engaging with Lab3. Something else that I thought was a strength of React was the vast libraries that can be integrated with it. An example is the React Router which lets the React app have multiple views without actually reloading the browser page. With an Express app using EJS, the routes usually involve Express receiving the request then rendering the view and the browser loads a new page, but with the React Router it switches between the components in the browser based on the URL path allowing a user to move between the views without a full page refresh. Since this is my first time using React I don't have any real judgment of the weaknesses since everything seems to be working smoothly for me. Though I would mention that figuring out the JSX and the small subtle differences from HTML confused me a bit like having <Outlet/> and <Link> tags. I'll need to go through some documentation to figure out which tags are not actually HTML elements. Additionally figuring out the vast libraries that can be associated with a React project will take some getting use to.
This week we learned about front-end development utilizing the React JavaScript Library. My only previous front-end development experience involved the Internet Programming courses where we used Node.js and Express with templates and server side rendering, so it was quite interesting learning a different approach to front-end development through a JavaScript library like React. What I have learned about React is that it usually relies more on the browser side to build and update the user interface, while Express with templates relies more on the server side to render the pages before sending them to the browser. React is a component-based framework where the interface is sort of broken into components which are basically re-usable JavaScript functions that return an HTML like JSX code; React uses it to create or update the elements in the DOM. Something that is interesting about React is the use of a virtual DOM and how it practically will only update the real DOM when necessary which improves the performance and responsiveness.
Other significant features of the React framework I had learned has to do with the hooks and props. There are four hooks that we have gone over which are the useState, useEffect, useContext, and useRef. I learned that the application of the useState hook involves managing the changing data in the component and is defined with a variable and a setter function. The other hooks like useEffect is used to run the code when a component renders or a certain value changes and in the lab we had utilized it as something to fetch data upon the first rendering, useContext shares the data across components globally, and lastly useRef can be used to reference the DOM elements when needed. I think something I need to get better at understanding is the use cases of useContext and useRef, for example with useRef I was a bit confused with the .current; since the actual element is within the ref.current. Additionally from what I had learned is that props are essentially immutable arguments that can be passed to a component from another. We utilized the Props in our OrderHistory jsx file where we had passed the getOrders fetch function and the order's data to the EditOrder jsx. From the lab alone it did not seem like much but there was a lot for me to unpack and understand about React. I’ll definitely need to go over more and watch some outside video sources about this framework.
One of the strengths with React seems to come from the virtual DOM performance since it minimizes the DOM updates and makes it feel faster and responsive. It was surprising to understand that the application would avoid full-page reloads, and it was quite noticeable when engaging with Lab3. Something else that I thought was a strength of React was the vast libraries that can be integrated with it. An example is the React Router which lets the React app have multiple views without actually reloading the browser page. With an Express app using EJS, the routes usually involve Express receiving the request then rendering the view and the browser loads a new page, but with the React Router it switches between the components in the browser based on the URL path allowing a user to move between the views without a full page refresh. Since this is my first time using React I don't have any real judgment of the weaknesses since everything seems to be working smoothly for me. Though I would mention that figuring out the JSX and the small subtle differences from HTML confused me a bit like having <Outlet/> and <Link> tags. I'll need to go through some documentation to figure out which tags are not actually HTML elements. Additionally figuring out the vast libraries that can be associated with a React project will take some getting use to.
Comments
Post a Comment