Barclays’ tech blogs: Gemma McDonald’s experience learning React

I’m a software engineer with a first-class Computing Science degree with a specialism in Human Computer Interaction from the University of Glasgow. I started off as a summer intern, and progressed to getting onto the graduate scheme with Barclays for 2 years,  and have just completed the first year as a permanent front-end developer. In my career so far and in uni, I have always gravitated towards front-end technologies and anywhere on the front lines of where technology meets people, which is how I started creating React front-end project within the bank.
React is a JavaScript library for building user interfaces, particularly single-page applications. It’s developed and maintained by Facebook, and its primary feature is the ability to create reusable UI components, and has become hugely popular in recent years.

The learning curve is impressively short when you first start with React. You can get up and running with minimal setup, and building your first interactive UI feels satisfying. The react.dev/learn quick start tutorial was my go-to resource in the beginning. It covers all the basics, from setting up a React project to understanding JSX (which allows you to write HTML-like syntax within JavaScript). I highly recommend this guide if you’re looking for a place to start.

What really stood out to me during my learning process was how easy it was to create interactive UIs. You can start with simple components, and even with basic knowledge, you can build something functional in no time. This instant feedback loop is incredibly motivating. Seeing your code come to life quickly makes React feel more intuitive than other libraries or frameworks I’ve tried in the past.

Another aspect I enjoyed was the component-based architecture. Instead of thinking about your app in terms of pages or sections, you think in reusable pieces. Each part of the UI can be broken down into small components, and it’s fascinating how these components can communicate with each other through props (short for “properties”).

While the basics of React are quite approachable, things do get a bit more complicated once you start introducing React hooks. Hooks allow you to “hook into” React features like state and lifecycle methods to let you do things such as update the UI based on what the user does. They’re incredibly powerful, but understanding how and when to use hooks—such as `useState`, `useEffect`, and `useContext`—can feel a bit overwhelming at first.

If you’re just starting out, my advice is to keep things simple at first—learn the basics, play around with small projects, and don’t be afraid to refer back to the documentation or seek out tutorials. As you get comfortable, you’ll be ready to dive deeper into more advanced features and patterns.

Helpful Resources I Used

In addition to the react.dev/learn quick start tutorial, I found a few other resources incredibly useful as I continued learning React:

1. React Docs (https://reactjs.org/docs/getting-started.html): The official documentation is thorough and provides detailed explanations with examples. Anytime I got stuck, this was my first stop.

2. Codecademy’s React Courses: Codecademy offers several React courses that are beginner and intermediate friendly.

3. YouTube Tutorials: Sometimes, watching someone else build with React helped clarify concepts I found difficult. When building my first navigation sidebar, it was a YouTube tutorial that took me from beginning to end.