After an intense week of DOM manipulation, I'm now on Week 9 at Northcoders' Coding Bootcamp - and that only meant one thing: React!

Northcoders teach React for 2 weeks (at the moment - the curriculum is updated a lot!) - this blog is about my experience of the first week of learning it!

The DOM

In case you're new to the DOM, it defines the logical structure of HTML (and XML) as well as the the way you can manipulate and access elements of the DOM. And this all made sense - although it seemed a little clunky!

The Answer

Luckily, we were soon to be shown the light - React! It was so strange going from clunky DOM manipulation to React, which rendered all of your components - your buttons, sections, pages - all into a single element! 

We spent the first week getting to grips with the basics of React and the all-important components, states, and props. Make no mistake - it was a learning curve.

But why did I struggle through and learn React in the first place? It was not hard to see that Northcoders is all about teaching the skills and languages that the industry wants. In fact, I found out that learning the DOM is brand new to the curriculum after feedback from industry experts and hiring managers.

Day 1 

Our first day of React began with one of the longest lectures on the course - there was a lot of new content and new concepts! I felt excited - it seemed very slick compared to what we'd done before, but there were definitely concepts I'd need to try out myself before it really made sense.

The first day was a one-off: a day without pair programming, to help us try and get to grips with how different React was to DOM. This was invaluable; I couldn't have imagined trying to explain to a pair how we could pass functions as props from one component down to another and make the state of the first component change! To manoeuvre our way through React 101, we made To-Do lists, the 'Hello World' of Front-End. Day 1 was about learning and seeing as many of the possible pitfalls and errors we could run into as possible!

Days 2 - 3 

Next, we made 'Tiny Apps' - lots of different mini applications such as emoji-filters, random word-generators, calculators... all things that we foolishly thought wouldn't be too difficult...! This sprint gave us more exposure and confidence with state, props, components and classes and, most importantly, how to organise the components in our apps.

We were back to pair programming for most of this sprint, and all I can say is Pair Pair Pair whenever you can! It's so easy to fall into bad habits when you're exploring something new, like making all of your components classes because you don't yet understand why some things need to be classes and some not. 

Days 4 - 5 

At the beginning of the week, we had no idea how to use React whatsoever. Yet by Day 4 we were pairing to make copies of websites we knew - in our case, Twitter, using the Twitter API to pull real data from the real Twitter!

First, we learnt about the miraclulous Webpack which allowed us to make full use of ES6, which we've all become fond of, seeming slick and neat compared to the slightly older ES5!

This sprint really taught us the importance of component and state organisation - things got pretty messy when I wanted to change the state in the profile component from the timeline one. Luckily, the tutors were on hand to unravel the mess and help us understand how to approach the problem! I don't think we've ever Tweeted "Is this working..?" so many times from our accounts...

It was also an opportunity to explore the component lifecycle that we'd learned about in lectures. For this sprint, we used the lifecycle to fetch the relevant data whilst the components mounted, so that all the relevant Tweets could be rendered when the time came!

A Powerful Technology

Wow - React - so slick especially when compared to manipulating the DOM with the DOM API! I really enjoyed learning React with Northcoders, and after my second week of it I felt really confident building dynamic web apps with it.

Get on board and become a confident Software Developer - check out the Northcoders coding bootcamp here!