What I love about React…
Recently I have been on a journey to a new career path. That journey has thrown up some twists and turns with one of the most interesting twists being the introduction to React. And the instant connection I felt when using it.
What is React?
The standard definition is that it is: an open-source, front end, JavaScript library for building user interfaces or UI components. It was developed and maintained by Facebook.
When I was first introduced to React at the start of October last year, it felt like a natural progression from the sites I was building in HTML, CSS and vanilla JavaScript. It felt like an upgrade, an easier way of programming and opened the door to many more possibilities.
React allows you to build interactive apps because you have a single HTML page it uses something called the virtual DOM (document object model). What this does is allows you to update parts of the page that need to be updated without reloading the page. So if you have a TO-DO list you can add or delete a task and it does not have to reload the page, it does everything behind the scene. Which is great for performance as it makes things a lot faster and more dynamic. Speaking of TO-DO’s, here’s one I made earlier: https://jamies-todo.netlify.app
React hooks are another reason for loving React. useState and useEffect have made regular appearances in my projects and are important tools for making a developers life easier. React components are not just static, they are dynamic, and the reason for this is that React components have a built-in state object.
State
The state object is where you store property values which React keeps track of. So when we update a state value React knows that something has changed and it re-renders the HTML it has previously built, for all components listening to that state. Something that would be 10 times harder to achieve with regular vanilla JavaScript.
Learning and finding my way around App state and Global state was a challenge at first. But I also wanted to name drop another library called Redux. Using Redux for the first time was another mind-blown moment for me. It adds a whole new dimension to state and global data. Without the need to send in props and plan the flow of data. And for this reason it also makes it to the top of my favourite tools list.
Components
One of the my favourite things about React is the challenge of building a website/app from smaller components. I love designing individual components, trying to make them as reusable as possible. And in the process making your code cleaner, easier to read and update. In some cases you can build one component and reuse it multiple times. Like, for example, in a Twitter style messaging app where you mount the message component multiple times: https://think-happy-thoughts.netlify.app
As much as I love working with React, I realise the importance of learning the basics of the JavaScript fundamentals was a must before tackling it. Understanding: data types, loops, array methods, asynchronous code, fetch’s and promises played a big part in the “natural progression”.
So far I have built 9 apps using React and I already have two more personal projects planned once the boot-camp has finished. For someone who enjoys good structure and likes things to be neat and tidy — me and React are the perfect match.
