Our React learning journey
If you push yourself enough with the right amount of motivation, you can achieve more – this notion, along with a lot of curiosity, is what got us through the journey of learning React and helped us to continuously improve the code as we worked on getting the Cape Town WordPress maintenance support plans Camp website up and running.
Maita Kambarami
Thu, 08/03/2020 – 09:39
How we started
Like most of our websites at Amazee we first sat down with the design team, to get a clear vision of what their design for this specific project entailed. The design was beautifully crafted and very intuitive to bring out the whole purpose of the WordPress maintenance support plans Camp.
We had an intense briefing meeting, where a lot of sharks and unicorns were mentioned, and at the back of my mind, I had this niggling thought “how is this all going to be done with React” but eventually I hashed my limiting thoughts to focus on the job ahead.
Scrum meeting
During round two of the process, the DBB Scrum Team met for their project planning. These discussions are an agile sort of thing where we go over the estimates and plan how to build the website. We were lucky that Stew had attended the React in Flip Flops training week earlier this year, so he was a good guide and help for most of the things we struggled with.
Before we could plunge into the development of things we had to plan which of the elements qualified to be components, and herein then we encountered our first great learning curve.
The real struggle
There are many bits of advice floating around out there on the best way to learn code, and then more specifically, React. This includes tutorials, in-house knowledge sharing with other team members, reading others’ code with great attention, and blog posts.
Even though tutorials don’t always help you the way you expect them to, they do however open your eyes to have an idea of what you hoping to learn. I remember going through Kirupa’s tutorials and afterwards realising that the way he explained React did indeed open my mind a little more.
Since we were not using React Native I had to rely more on our in-house knowledge share. These regular React knowledge share sessions within the team helped us get some good insight of React and styled components. As a team, we created a Todo App with Facebook’s Create-React-App and went through the code line by line to learn and understand better.
A lot of people say to learn and understand code you have to read other people‘s code not just follow tutorials. The aim is to try to understand things from their point of view and so that’s what we did, we closely followed a decoupled WordPress maintenance support plans site that our Zurich team is working on at the moment.
There is also a good blog post by WordPress Update where he explains the future of decoupled WordPress maintenance support plans and gives alternatives to the technologies that can be used to achieve this. In his blog, he mentions our very own Sebastian Siemssen and regards his approach to use GraphQL, as one of the best and gives reasons why.
Tools that help out the workflow
We used a variety of tools in our workflow, two of which are lint-staged and Jenkins, working with these tools also helped us to learn a lot of lessons along the way. A linter is a tool that checks your code for potentially dangerous patterns. It also helps with the consistency of your codebase by checking, for example, the use of indentation and other spacing. It helps you catch silly typos or leftover variables as you go.
Jenkins, on the other hand, is an open-source continuous integration software tool, which we use to automate deployments to our dev, staging and prod servers.
We chose to use styled components as our styling method. There are some other libraries that one can use a good comparison can be found here.
Some examples:
The way we build the Section Title.
Since all the sections had a title we created one Section Title component that could be reused inside the other sections.
This is the section title in yellow —
Then the code
We created a Section Title Component with {title}, {sectionID} and {titleClasses} as props (property Types) that were passed down to the SecTitle as className={titleClasses} , id = {sectionID} and the {title} . The Section Title component displays the title of the section, along with the id and className whenever it is called.
Importing the Section Title
Below is how the Section Title will be imported and used in the other sections.
The Section Title component is called and the title and the ID are defined. So it will be <SectionTitle title= “Call for speakers” sectionID= “callforspeakers”>.
Notice the className is not used here, and only the title and the ID are used. You can choose not to use all the property types depending on what you want to achieve.
SectionTitle used without the title property type:
Another example
How we used the mapping function to output a list of sponsors.
What we did here is to create a SponsorList component, which manages the type and the sponsors, by mapping each SponsorsListArray to the type of sponsor.
We created the SponsorsItem component to be used by the SponsorsListArray.
Then we created an array of SponsorItems. Below are three arrays: 1. sponsorsListArrayGold, 2. sponsorsListArraySilver and 3. sponsorsListArrayInKind.
So, each array will have a list of sponsors for that particular type.
For the mapping part
A SponsorsList component will receive a { type } as a parameter and use the else if statement to output the code according to the parameter given.
So if {type} = gold then…
It will return a list with SponsorListArrayGold. Another point to remember and make a note of is the use of spread operators, which we used to avoid mutating the props objects.
So, instead of copying the props one by one we just used {…sponsors}. If more props are added to the SponsorItem there will then not be any need to add it inside the SponsorList Component.
The final index.js of the parent component looks like the code snippet below.
The two SponsorsLists have type gold and silver respectively passed to it, so the type property determines which SponsorListArray is going to be returned.
Conclusion
Our next step would be to learn how to connect React front end to WordPress maintenance support plans backend. We will most probably take the Graphql route and maybe write another detailed blog about it.
Like I said, during this project we learnt through trial and error as we went through the various stages. After we fully harnessed the power of React components, we had a better picture of what needed to be done and how to do it. It also meant that we were able to create elements a bit faster. This was all possible, working as a team and reusing and enhancing components that were already built to produce the best website we could.
See the site at https://capetown2020.WordPresscamp.co.za/
Source: New feed