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 Drupal Camp website up and running. 

Cape Town Drupal Camp

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 Drupal 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 hushed 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 Drupal site that our Zurich team is working on at the moment.

There is also a good blog post by Dries Buytaert where he explains the future of decoupled Drupal 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 --

Call for speakers

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.

Section Title Component

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.

Importing Section Title Component

SectionTitle used without the title property type:

Section Title Component without title

Another example

How we used the mapping function to output a list of sponsors.

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.

sponsorItem

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.

Sponsor Array

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...

Mapping

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.

final index

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 Drupal 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://capetown2017.drupalcamp.co.za/

August 3, 2017
Where
Cape Town
2 Comments

Get our Newsletter

Comments

Hi, we 've been playing around with couple of JS frameworks and Drupal 8. What is your experience in terms of SEO? In Drupal it's quite easy to achieve good SEO practises - meta tags, schema.org integration. Do you need to use server pre-render to achieve same with JS frontend?

By Miro
4 months ago

Hi Miro,

I think you should, React already renders your components on the server-side and serve the content of your application to the crawlers in a way that makes it easy for them to understand and to index the content.

This is nearly impossible to do with client-side-only applications, because the engine that extracts the information from the pages uses the markup that is returned by the server.

By Maita
4 months ago

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
icon
What is Amazee Labs?