ReactJS in Focus: A Talk with Share IT’s Frontend Developer

At Share IT, we use a wide range of technologies in order to create the best possible solutions for our clients: from .NET and JavaScript to HTML5 and other languages - we got it covered. Our skillful developers have comprehensive knowledge and are committed to continuous professional development, which ensures every written piece of code is structured and search-compliant.

Today, we wanted to share some insights about ReactJS, an open-source JavaScript library used in web development to build interactive elements on websites. It is especially praised for building single page applications and amazing user interfaces which include buttons, search bars, menus, and all the other elements which enable users to interact with a certain website or app.

ReactJS was created by Jordan Walke, a software engineer at Facebook. It was first deployed on Facebook’s newsfeed in 2011 and then on Instagram the following year.

Want to find out more about ReactJS and its potential, and just how we at Share IT use it? Read more about what our freshly employed frontend developer Stefan Maretic has to say about it, and discover how he found his place in the company.

An Early Chance for Professional Growth

Maretic is a Computer Science graduate and a frontend enthusiast, passionate about JavaScript and its modern ecosystem. In addition, he’s been playing guitar over fifteen years and loves discovering and listening to new music.

Maretic has been working in Share IT for 7 months now:

“I got into Share IT while still going to college. My talent was recognized and I was given an opportunity to work here, even though I didn’t have a lot of work experience. What I like the most about Share IT is a pleasant working atmosphere and a nice work-life balance where professional growth is encouraged.”

Company’s hiring policy relies on recognizing talents and offering space and resources for learning. Like many businesses in the IT industry, the focus is always on the individual’s potential and motivation - even though we value knowledge and professional skills too. Still, from our experience, having the will to learn from seniors, being ambitious and having an inner drive while also feeling comfortable in the company’s culture is often far more important.

Now, to focus on ReactJS! Here’s what Maretic had to share on this topic.

ReactJS is Excellent for Making Websites and Apps

Firstly, we were curious to find out how Maretic fell in love with ReactJS and frontend in general:

“What I like about React is that it taught me how to love JavaScript. In recent years, the usage and growth of JavaScript has inclined astronomically. React was there to push its growth. It is the most popular library for developing modern frontend applications, by a long shot. All of us who work with React have been witnesses to the directions its development took leaps to. I believe it is one of the reasons modern web development got to the place where it is currently at.”

As he explained, the main advantage of React is that it provides an excellent developer experience for making websites and applications. That is, if you’re efficient at it. Although users can’t tell the difference between an application built with React and some other technology such as Angular or Vue, developers enjoy massive benefits that also influence user experience in the long run:

“*Working with ReactJS, we as developers have the massive benefit of component composability and reusability. When we build our websites in such a way, we extract pieces of a puzzle, and enable ourselves to develop every piece in a self-contained state.

When we build components in isolation that can work without bugs, I think that’s where the users benefit the most. Of course this is in the ‘hands’ of the developer. No framework can help you if you write bad code, but frameworks can help us to make less mistakes in scenarios where it’s easy to make them, and hard to notice.*”

How ReactJS Works: Getting Technical

Now for the technical part! We asked Maretic to explain how ReactJS works:

“React works in such a way that it injects a dynamic virtual DOM into a single HTML node. We can have multiple nodes where we will inject our code into, but each node will have a separate tree structure built on top of it. However, these multiple trees will not share state between each other.”

And what are refs, props, and state in React exactly? Maretic shared his knowledge with us:

“*We can think of refs as selectors for our HTML nodes. They represent the ways we can access inputs in an uncontrolled manner. We can also use refs to programmatically execute code on certain elements, inputs, etc.

Props are properties that we pass in a unidirectional way downward for our JSX tree. They can be of any type - string, number, boolean, object, function, even another component. There is just one rule about props: they are read-only. We don’t change them, ever. They are there as a reference to what is supposed to be rendered in our browsers, and whenever our props change due to an external action or state change, our component tree re-renders.

State is what we use to store data inside of our components. We can pass state along as props but not vice-versa. If we want to update any value that gets rendered over time it should be handled by state. We have a direct way to update our state in an immutable manner through setState methods.*”

ReactJS: Controlled, Uncontrolled Inputs, and More

The next thing we were curious about were controlled and uncontrolled inputs. Why do we have both of them in ReactJS?

“Controlled inputs are the preferred method of storing form and input state inside of our application. Instead of inputs handling their own values, we control their values with state we specify inside of our components. Uncontrolled inputs are inputs that control their own values. By default, every HTML5 input is an uncontrolled input, unless we bind a value and onChange handler to it”, said Maretic.

So, which ones should be used? Our interlocutor said their usability depends mostly on the chosen approach:

“Either approach works, although if we want to have complex state management solutions and process form data, uncontrolled inputs will quickly become insufficient. For example, if we want to store state across page refreshes, it’s much easier to store state in the client’s browser than it is to sync uncontrolled inputs to past values.”

And what about the key property? Here’s why it’s needed:

“*In a tree of siblings, usually rendered through array functions, we need to provide unique keys for each sibling which JSX will reference and know not to update those that haven’t changed. If we didn’t provide keys for each element inside of a list, all of them would get an update on any change in any single component.

Hooks are a new addition in React. They let you use state and other React features without writing a class. My favorite hook is the useReducer hook. It takes a reducer function, and initial state as arguments. Basically it gives us the opportunity to take a redux/flux based approach of updating our state, except the state isn’t global but encapsulated locally wherever the hook is called.*”

The Future of ReactJS Looks Bright

Because of its extra simplicity and flexibility, ReactJS is becoming very popular. According to the data from the end of 2017, more than 1,300 developers and over 94,000 sites utilize ReactJS. We’re pretty sure this number is now significantly higher and Maretic agrees:

“React is growing more popular each day, and a lot of enterprise systems are using it on a large scale. And it’s being developed by Facebook. Even companies like Microsoft are adopting and creating third-party libraries for the ecosystem. React is definitely here to stay, job security is certain, and a lot of companies are trying to adopt it as we speak.”

And what about the future? What will React evolve into? Maretic shares his prognosis:

“My personal opinion is that React will be further developed and will continue to grow in the next five years for sure. A lot can happen in this period, especially in an industry that’s so fast-paced, so it would be hard to state any prediction after that. But I think that, no matter what happens, React will exist as a legacy system. Lots of applications will still be using it in the future so their maintenance will be required for the next ten years or so.”

Are You Just Starting with ReactJS? Here’s Some Advice

If you’re a frontend developer who’s looking to build a career and wants to specialize in ReactJS, here’s some advice from someone who’s taken that road and is still excited to discover new things:

“*React documentation is the best source for learning the library. There is a lot of good resources from other people as well. But a lot of people teach their personal style of programming as something that is standard, which may not be true. React has a really stable and mature ecosystem, even though with hooks - we experienced a mind shift. Best practices have been instilled for some time now.

So in short - study through the documentation fully and take your time. React is pretty easy once you know how to use it, but it’s challenging to get there. Don’t rush anything, and go back a few steps if necessary. Sometimes reading things multiple times is the best thing you can do*”, says Maretic.

We thank Maretic for an exciting talk about ReactJS! If you are an aspiring developer looking for employment or internship, feel free to reach out to us and check if there are currently any available places in Share IT.

In case you are a company that’s looking for web or app development service, reach out to us and we’ll get back to you shortly to discuss your project.