How to Get Started With ReactJS

I started working as a Web developer at COBE about three months ago. The first project I was assigned to was really big and it required skills I haven’t had mastered at the time. So, naturally, my first thoughts were “How am I going to do this?” I remember everything felt new to me, from working in an agile environment to learning different processes, but I didn’t panic. I knew what COBE was about, the value of my team and that I can count on people to help me out. Also, I remember thinking how in three months I’m probably going to laugh about all my concerns — and indeed, I am 😄.

The first few weeks went by quickly with an enormous support from my web team. The guys always made sure I understood everything. I remember I did a lot of research, watched tutorials and read articles on best practices, and whenever I felt stuck, my team managed to show me the way out. Some technologies I had to get more familiar with, for working on the project, were ReactJS, TypeScript, and GraphQL.

Previously, I have worked with Ruby on Rails, eCommerce solutions and WordPress. I remember I was always intrigued by ReactJS, but I didn’t have the opportunity to learn it and work with it from scratch (if we exclude having a touch with it in terms of styling components). Little did I know I was going to write an article in the future on how to get started with ReactJS. But here I am! 🤗

Since I’ve mastered UI development, regarding modern HTML, CSS (including its frameworks as well as pre- and post-processors), responsive web design and jQuery, I was ready for something more. And that’s why I came to COBE.

GraphQL

I started off my learning journey with GraphQL — it took me about a day to get into it. One of my teammates explained it very thoroughly for me: “This is the interface, this is where you write queries, here you can write variables and there you’ll get your response. There are schemas and docs, you can search both query and response, and that’s pretty much it.” And honestly, I didn’t need much more information than that. But you can find more, here. Just in case. 😅

GraphQL interface

ReactJS & TypeScript

When it came to learning ReactJS and TypeScript, it wasn’t as simple as with GraphQL. For Typescript, I followed the original documentation where I found all information on the installation, while my beginning with ReactJS was more about learning plain JavaScript, than it was about ReactJS.

I was familiar with JavaScript before and had a basic understanding of its standard objects, expressions, operators and functions but then I came across Eloquent JavaScript. With videos and articles on topics like object-oriented programming, functional programming, higher-order functions and arrays in JS, I recommend this book to anyone who plans on getting started with ReactJS.

I also came across an interesting GitHub repository with a collection of pure Vanilla JS web projects. When it came to React tutorials, my teammate suggested Complete Intro to React and Intermediate React by the amazing Brian Holt on FrontendMasters. Currently, I’m on Intermediate React, taking things quite slowly, and making sure I understand everything. ReactJS has some great documentation, but I’d like to single out this one article, “Thinking in React”, that is definitely worth a read!

Turning theory into practice

When I first started working on the project, I was mostly doing small bug fixes. But don’t get me wrong, finding a chunk of code to fix, at that time, took more time for me than fixing the bug itself. But at the end of the week, I always felt proud — for every bugfix I did, for every PR I created that got approved and for every “Well done team” we received from the client.

It didn’t take long for me to start doing features instead of fixing bugs. Along with that, I started a deeper research of understanding data itself for the frontend side of development. Writing GraphQL queries and investigating samples of data are not a mystery to me now, as well as creating ReactJS components and styling them using styled-components, adding those to the Storybook, and populating them with real data. I’m also actively using TypeScript and trying to keep up with the latest ES standards.

Three months is not a long time, but for me it was just about enough time to find value in my new team and to learn new things. I’m starting to understand JavaScript better and I’ve noticed some positive changes in the way I write code.

one-liner function: const getAirports = (locale: string) => (locale === Locale.de ? airportsDE : aitportsEN)

This one-liner function that returns an array of airports based on the locale param happened about two months ago. It may be nothing to you, but this single line of code made me so happy and proud. 😊 It’s so clean you can almost see it shining! No if-else statement, no return keyword, no let, no var and added type to the locale param.

Coding makes me happy, it’s simple as that. Of course, it doesn’t happen overnight, it takes a lot of time, motivation, and determination. But take small steps each day and make sure you have a goal in your head. Plus, if you have a great team that supports you and answers all your questions, you’re good to go.

Happy learning and coding! 🤞

‍