When i heard we where going to be learning Javascript as well as React.Js to produce a website of our choosing then later hosting our given website onto a server of some kind i was excited and eager to learn.
Sadly due to unforeseen events the course had to go through s series of changes and thus making learning more difficult. However the course still managed to teach me some website developing skills that are related to full stack development.
During the course of the summer break i indent to extend my understand of React and its Hooks to become a better full stack developer.
When course started we spent a lot of time trying to learn Flux. Sadly Flux was no longer relevant to our studies and so the course evolved to include React.JS. Changing the course outline was the right choice as React is a popular framework that has a lot of resources available online through LinkedIn or at a lesser extent Youtube.
The demos where we were able to utilize the code and mold it to fit the needs for our assessment was rather complicated at first glance . Sadly, i struggle to take my code and another person’s code and mash it all together to form a whole new block of code.
Issue: Hosting
For the purpose of assessment 3 where we needed to host our websites i understood the concept but struggled to replicate the code from the demos into my own project. I spent weeks trying to create the needed back end for my assessment so that it could be hosted by using the required back end.
What did i learn?
I learnt that try as you must if you do not have the correct dependence installed in your project then React will struggle to operate as required.With some help installing the needed React dependence then i was able to host my website locally. Even though i hosted my website locally it still sent and retrieved requests from the back end.
Deleting data
One of the requirements for our assessment was that we were meant to be able to delete data from a table. I created the needed functions in order to delete data of our choosing but sadly the function calls failed to produce the desired outcome.
Course reflection
Overall i still learnt something regarding React and how to host a website using a back end to handle all the logic behind the scenes while the front end displayed the data correctly so that the user can read the information as required.
I do wish that we started the course with React.js and Hooks instead of trying to learnt Flux-which took a almost 6 weeks of course time.
Last year my time management was rather good and i never required extensions or where rushing to complete assessments on the day. All that changed this year with the rise of Covid 19. Thanks to that pandemic my time management went out the window and seven though for New Zealand at least life has returned to normal. Sadly my performance in time management failed to return as it once was.
Impact
The impact of having less than ideal time management made my stress level sky rocket with myself rushing to complete assessments hours before they are due. Sadly the last month i have added time constraints forced upon me as personal matter have surfaced with a family member being submitted to hospital in the critical wing.
What have i learnt?
Having less than ideal time management can have serious effects upon my health and family life. So for the 3rd year I’m going to focus on improving my time management so that i can make the 3rd and final year as productive and stress free as possible.
What real world impact will this have?
regardless if i am completing assessments or preforming tasks at work having great time management not only ensures that my work is of high standard- as I’m not rushing work with little or no sleep, it will also ensure that my stress levels remain low adding.
For Assessment 3 we are required to bring it all together and host our website with the website rendering the information displayed in the view by pulling data from the database using React Hooks.
Why have i learnt this?
Learning each component in a separate manner allowed us to gain a better understanding of what it takes to make a Web application function appropriately.
How have i learnt this?
In class we learnt each needed element in order to make a web application run as full stack. In order to get the website functional we took each element and slowly brought it together step by step.
What do you know now that you didn’t know before?
React, Hooks and how to create and run a back end for a website. As well as sending and retrieving data from a database.
What is the point?
Understanding how it all works together is important and how each component can work together to form a functional website.
What will i do to remember this learning?
Practice and further expand my knowledge by watching more in depth tutorials and practical examples.
For our assessment 2 we needed to have a login system working that sent and retrieved data from a database. The database of our choosing was MYSQL. This will be made possible thanks to a node package npm install MySQL. this package gave us access to the functions we needed to easily connect to the database
Why have i learnt this?
All applications require a database in order to store the information of their products or clients such a e-commerce website. Without a database the information could not be gathered in an appropriate manner and the data would be at risk of theft.
How have i learnt this?
The way i have learnt this is through practical means. MySQL is a well known database and we are with its query syntax.
What do you know now that you didn’t know before?
When you are creating a project using React you are able to install all the needed dependencies for your project to connect to a database using the appropriate npm command. for the assessment i decided to use MySQL as my database of choice and so i needed to use the command npm install MySQL.
What is the point?
All applications require a database regardless if it is a program installed locally on your machine or hosted in the cloud. Present data is a highly valuable resource that should be stored correctly especially if the information gathered is of personal information such as phone numbers, living addresses or bank information.
What will i do to remember this learning?
Explore all the possible databases that are used for web applications such as MongoDB. I will continue to develop small applications that connect to a wide range of database services.
In order to get a better understanding and knowledge of becoming a full stack developer we need to host our websites. In order to do this we used webdev and talos to host our websites
Why have i learnt this?
It is really important to be able to host a website otherwise you will not really unlock the potential of your website and fail to reach all the clients you wish to reach
How have i learnt this?
companies are needing to have full stack developers as their teams are small and cannot afford to have only front end developers.
What do you know now that you didn’t know before?
Hosting a website can be difficult, and without the right packages installed in your project you will not achieve this task
What is the point?
Websites need to be hosted so that they are reachable throughout the internet.
what will i do to remember this learning?
there are a number of web hosting sites that allow you to host a small website for free such as FreeHosting. You can even practice hosting a website locally on your own machine. This will be a great no cost method of working with both the front end and back of services for your website.
Node package manager or NPM for short is a library of thousands of free packages that you can install to use in your projects. Each package offers something different. When you install a package of your choosing it will be installed in a node_modules folder, and any future installed packages will be installed directly into that folder.
Why have i learnt this?
In the Industry environment you will be working on a range of different projects that will require all sorts of different packages.
How have i learnt this?
When we started to make our projects we used the simple command “NPM create-React-app” This was the method of created a React project that had all the needed finals to get us started using React.
During our project we had to have both a backend and a front section on our project so that we could host it through the webdev sever hosted through Talos. In order to created a simple backend we had to use the command NPM install express. This installed the needed packages for our backend.
What do you know now that you didn’t before?
Before i started creating projects with React i had no idea that there were so many packages that could be installed that would create a great template for you as the developer to start with.
What is the point?
React is a well known and used framework that is used by many businesses and projects. It is important to know how to use these packages and understand that they are there to make your life as a developer much easier.
What will i do to remember this learning?
As i explore the framework that is React i will try a wide range of packages for my projects. No doubt there will be the common packages that you will use in almost all your projects such as express, mysql or mongodb but it is important to explore more options.
React Hooks are a new addition that joined the React family in version 16.8
Hooks allow the developer to use React features without the use of classes.
The beauty of Hooks are that they are optional, backwards comparable, don’t break your code
Why have i learnt it?
Even though Hooks are not required they do offer the ability to make complex components become more manageable by breaking down the component into smaller parts and bundle the related parts into their own groups.
How have i learnt it?
React is well documented and is really easy to learn though both tutorials and practical exercises.
What do you know now that you didn’t know before?
Hooks. When i first started to code with React I used a lot of components that reliable on props to call information into the components so that they could be rendered in the view. Classes where not to difficult to use but unfortunately trying to follow the data that is being used by each class and component can be confusing the m
What is the point?
Hooks may be new to the React family but as more developers start to incorporate them into their projects it will become a useful skill to have under our belt making us more valuable to potential employees
What will i do to fill in any gaps in my understanding?
There is only so much time we can spend in class learning React which has only scratch the surface as to what the language has to offer. With the addition of Hooks it is vital that we continue to learn through online tutorials and side projects.
We have started looking at how Web applications connect to a database in order to store the information gathered from registered users.
Why have i learnt this?
In order to become a great software developer one needs to have skills in both front and back end development. By gaining knowledge as a full stack developer means that companies can have you work where they need you. It is not uncommon for developers to work in teams on a project, with each team tasked to work on a particular aspect of the Web application. Having the skills to work in both makes you more desirable to a potential Employer.
How have i learnt this?
For our Assessment 2 we are required to connect to a database using Node.js. In order to achieve this goal we have followed the tutorial laid out by http://www.mysqltutorial.org/mysql-nodejs/
This well documented tutorial provided the knowledge to successfully gain access to the desired database we created in
What do you know now that you did not know before?
How a database connects to a database using node.js.
What is the point?
Any application that collects data needs to have a place to store the data in a meaningful manner, and for a web application there is no exception. It is important to have a great system in place that will store and keep the data that has been collect for the purposes of running the application. The best way to achieve this is by having your web application connect to the database of your choosing via code typically found in a connect.js file.
What will i do to remember this learning?
I found the best way to learn something new is by repatriation. The manner i will enforce the knowledge i have gained is by creating small applications that will have a database connected through the back end of the system.
What new understanding have i gained?
As i have only done font end development in the passed for web based applications gaining knowledge focused more on the back end is a great way to expand my experience and knowledge to become a full stack developer.
What are the real World applications?
As most companies may require their staff to work were needed having the knowledge to work in all aspects of the development process will make you as an employee, invaluable to the company.
What will i do to fill in any gaps in my understanding?
For the course we used mysql workbench for our database needs but in reality there are a wide range of similar products both paid and unpaid that offer database needs for Web applications such as
All of these database solutions offer needs to their clients and it is up to the company or the client as to which solution should be used for the current project.
As the course focuses on MySql for its database needs i Will need to do some further research and practice on the other popular solutions such as MariaDB and SQL Sever. This will be achieved by completing courses offered by Linkedin and http://www.codecademy.com.
React.js is a popular JavaScript library that was developed by Facebook for creating user interfaces for web applications. React.js makes use of components in order to create blocks of code that can be reused and manipulated in order to produce a difference set of outcomes via the use of props and hooks.
Why have i learnt it?
React.js is in high demand and is popular amongst developers. This could be due to the easy nature of the framework that offers code re-use, and thanks to React.js not being browser specific means that it eliminates possible performance issues.
How have i learnt this?
Resources provided in class by the tutor, Linkedin and a lesser extend Youtube.
What do i know now that i did not know before?
I have heard of the framework Reactjs being tossed around the classroom by those who are knowledgeable in the field and i have always wanted to learn more about such a popular and well used framework in the hopes of creating my own apps using the framework in both front and back end.
What is the point?
The point of expanding my knowledge of different frameworks that are being utilized in the real world in a wide variety of projects will help remind me that learning never ends and that in the world of software development there will always be a new way of doing things.
What will i do to remember this learning?
In order to remember the learning i have gained in class i will practice using Reactjs by creating some small side projects that not only furthers my understanding of the framework, but to challenge myself and push my knowledge beyond that of the scope of my assessments.
What new understanding have i gained?
For the first assessment we had to create 5 pages that had some form of navigation to them. Unlike some of the websites we created in the first year that used <a> tags to navigate to each page. Reactjs on the other hand uses <link> tags for the navigation process which links to a page’s jsx file that renders the desired page on the fly.
What are the real world applications?
As a popular framework for web applications chances are that when we become qualified software developers we have a high chance of running into Reactjs at some point due to its growing popularity in the field.
What will i do to fill in the gaps in my understanding?
reactjs.org website hosts a range of well written documentation on the subject of React.js. This will be a good first contact regarding any further information needed regarding the framework.
Bachelor of Information Technology (NMIT) 