Our Company
Hamilton Robson is a technology company, specialising in audio visual and software development.
We create unforgettable experiences and solutions for ultramodern spaces.
As a graduate software engineer, and first-time React developer, I would love to share my experience with learning the framework and why I think you should learn it too. I’ll share a project I have been working on over the last few months at Hamilton Robson which will show some of the cool benefits of using the framework. Hopefully, I can convince you to start today and take your first step into the world of React.
To get started, let’s talk about the bread and butter of React: components, states, and props.
React uses component-based architecture, which is just a fancy way of saying that everything is broken up into blocks which can be put together to build your web page. This really encourages you to reuse your code across multiple web pages. A great example of this would be a navigation bar at the top of every screen. No need to copy paste that navigation bar code over and over again!
States are like memory they let your components know what to display inside it, like a number, and they allow you to change the content of your component depending on how you want to handle the data. Imagine you have a web page with a counter and a button, every time you press the button the number increases by 1. The number on screen needs to update, and this responsibility is given to your states!
Props might be the easiest of the 3 to understand. Let’s say you are making your counter component. You want to give your counter an initial value, let’s say 0. So, you set up a state with a value of 0 but how do we tell your component to use that state? This is where props come in. Props are a way for you to pass your data, like a message, to your components so it can be used. We can take your state and give it to your component as a prop so it can display the number.
// **Component**
const Counter = ({ initialValue }: { initialValue: number }) => {
// **State** const [count, setCount] = useState(initialValue); const handleIncrement = () => { setCount(count + 1); };
return ( <div>
{/* **Prop: {count}** */} <h1>Counter: {count}</h1> <button onClick={handleIncrement}>Increment</button> </div> ); };
Now let’s talk about what makes React so great. It's components-based architecture is extremely powerful when it comes to building your application quickly. Taking advantage of reusable components allows you to write a component once, use it anywhere in your application, and make app wide changes by updating a single component. This gives you maintainability, scalability, and improves your overall productivity.
React's declarative nature allows you to dictate how your UI should look while React handles updates to the DOM to display your data. An example of this could be the counter app which increments as the user clicks a button. You tell React how you would like the application to look while React handles updating the information on screen. This ensures your app appears responsive to user input and removes the need to refresh the page to show the new value on your counter.
React has a strong community and ecosystem, you can put your development into overdrive by taking advantage of the vast number of libraries at your disposal through sites like NPM. This gives you access to libraries which can handle already existing solutions to problems you may need to solve. No need to re-invent the wheel!
Learning React opens routes to learning native mobile development. From personal experience, I can say that the skills you develop in React can be transferred easily to React native and give you an entirely different platform to create on.
Over the last few months, I have been working on an app called JobMatcha, an opportunity matching service for the construction industry simplifying identity and regulatory checks and streamlining social value audit for employers. This project had me working with both React and React Native. It was a unique experience because I got the opportunity to develop the same application for web and native Android and iOS showing me how easy it can be to transfer my React skills to React Native.
As you can see from the images above, I have been able to successfully deliver the application on the two different platforms with remarkable resemblance. If you look closely, you can spot the minor differences when comparing both, but if you were given only one image it’s safe to say it would be difficult to identify which UI belongs to which platform.
This is a great example of how learning React to develop web applications can give you a bridge to transition into mobile development for both Android and IOS with relative ease. This is because React and React Native are both extremely similar despite being designed to develop on two completely different platforms. There are some nuanced differences, but all in all they are similar enough to give you a nearly seamless transition.
To me, being able to expand the number of platforms you can develop on without needing to go out of you way too much to learn a new language or framework is enough of a benefit to put React above many other frameworks that don’t come with this benefit.The resources available to get started are abundant and it’s easy to get started for completely free.
Assuming you have no prior experience in web development, I would recommend you get started with the basics of HTML, CSS, and JavaScript! A great resource which has served me well over the years is w3schools. This platform offers excellent coverage over the three fundamental skills you will be using when you dive into React.
If you are already familiar with HTML, CSS, and JavaScript then React's own quick start guide would be a great place to being your React journey. They offer tutorials to get your started, along with their excellent documentation which breaks down how everything works.
If you would like the comfort of a structured course, there are plenty of options to choose from. There are paid options like Udemy and Codecademy, as well as free option like youtube, freecodecamp and many others.
Additionally, blogs can be a great source for learning. A blog I have personally found very useful for learning React and CSS has been Josh Comeau’s blog. Their blog goes into detail on both complex and simplistic topics which have greatly improved my understanding of many problems I have faced on my learning journey.
Feel free to explore the internet to find whatever suits you best for your learning journey!
All in all, that is my take on React. I invite anyone remotely interested in web development, and even those unsure, to take a leap into this dynamic framework. Working with React, as a profession or a hobby, has been immensely rewarding to me. Its versatility, efficiency, and robust community support make it a valuable asset in the world of web development and native mobile development. Hopefully, this blog has inspired some of you to take your first steps on your React journey!
Want to find out how the subject of this blog could help your business?
Our blended team of experts go over and above with our services to our customers, no matter what the challenge. Get in touch to find out how we can work together.
Hamilton Robson is a technology company, specialising in audio visual and software development.
We create unforgettable experiences and solutions for ultramodern spaces.