An Introduction to React

By Yeo Yong Kiat in ReactJS

15 min read
Come join me in my journey to learn ReactJS. I'm not a professional web developer, but all the more I'm eager to demonstrate that it doesn't take a professional coder to master the fundamentals of ReactJS, or React for short. I hope to outline my journey in learning React, and may it be a learning resource for all who are keen. In this first article, I write generally about what React is all about, who should learn it, and why.

A Moment Before React

Before speaking about React, let's just harken back to the early 2000s. You see, in the past, the Internet was simple. Websites, webpages and web applications were all retrieved and rendered from the server. In those days, web interactions were all about the HTTP GET method. Let me explain.

You would be sitting in front of your computer, using a browser (in web dev speak, that's called a client). You would visit a URL, and what that means is that the browser would use the GET method to request for a HTML file and all of its associated CSS and JS files from a server (which is this crazy big computer backend that hosts all the files).

After waiting for a while, you would then see the HTML being rendered in your browser. The CSS file tells your browser how to design and style the page, and the JS file just has a bunch of coding statements that allows you to interact with the webpage (largely through IF and FOR loops, really).

For every single link you click on, or for every URL you visit, well, the above process continues. Ad infinitum, ad nausea. So everything meaningful to your experience is just done by the server. You, as the client, just plays the role of clicking through page by page, and requesting for each page. This was the age of JavaScript past - and most web developers dealt with libraries such as jQuery.

So What's Modern Javascript?

New age JavaScript focused on what we call "Single Page Applications (SPAs)". So you might have heard of things like Angular, React etc. Well, these are essentially SPA JavaScript frameworks that allow you to conceptualise web development in a way that shifts the focus from the server to the client.

Here's how the new web kind of works - you visit a webpage as before, but instead of requesting a comprehensive HTML file and all its associated CSS and JS files, you actually only request (in an ideal case), a very simple HTML file, and one JS file. The cool thing is that this JS file now works in your browser to render even more complicated HTML and CSS functions, and produces this really complex HTML to render in your browser.

A true SPA would then also make it such that whenever you move from page to page within the same website, you actually don't request for more files from the server! Your browser actually uses the initial JS file to render each new page.

You got it - it's as if entire web experience is being delivered through code. The server just dishes out JS files (well, and a bare bones HTML file of course), and these JS files are executed in your browser to generate the complex webpage you see.

So, What's React?

So those SPAs I spoke about? Well, React's one of them! It makes whatever I mentioned above possible in the new age of JavaScript. That's why people speak of creating an "app" in React. An "app" is just a neatly (and tightly) organised collection of JS, delivered once over the Internet to your browser. Once this JS is sent to your browser, whatever SPA framework is responsible for creating the web experience just takes over the generation of web content.

Long and short: React is a JavaScript library that allows you to write SPAs, in JS, that delivers that experience I just wrote about. It is used to create user interfaces based on the idea of "reusabililty" and "composability".

Who Created React?

This may sound like plain history, but it's one of the important reasons why people choose to learn React. You see, React was created by Jordan Walke, a software engineer at Facebook who open-sourced it in 2013. And, surprise surprise, while being open-source now, it's being maintained by Meta (formerly Facebook) and a community of individual developers and companies.

So React is naturally always kept up-to-date and relevant. In fact, React has a cousin called React Native, which allows you to create apps across android and iOS systems with React. The politics and entire community behind React is itself a good reason to pick up React - the community itself is a hotbed of innovation and discussion.

No, But Really, Why React?

So why not just plain vanilla JS for creating your apps? Well, technically you could, and you should if the apps you're writing have such highly specialised UI requirements that require special handling through plain vanilla JS. But if I could sum it up, I think React provides the following for web developers:

  • Composability & Reusability: at the highest level, React forces you to think in terms of components, to break down any app into simpler portions, and to then focus on coding those portions. It makes updating and maintaining an application so so much easier. And trust me - when you can organise code well, conceptualise code into components, it just makes your entire application more elegant.
  • Flexibility Through Building Blocks: it's not just conceptual! React actually allows you to create actual code components that can be maintained separately! And it's not just the code you write, everything around React consists of building blocks. If you need to route pages, well, there's React-Route. If you need state management, there's Redux. You choose what you want to add onto React to make your web application more robust.
  • Functional Programming: You must understand that React is a JS library, and the ecosystem around React also embraces JS. And well, JS is well known as a programming language that in turn embraces functional programming. You now write web pages as web applications (i.e programs) through functions essentially, and you now code declaratively rather than imperatively.

Great! Who Should Learn React?

Well, I'm no professional web developer, so anyone really with an interest really. But beyond coders, I think two groups of people might be interested in picking up React:

  • Designers & UI/UX Folks: I'm guessing these folks already know HTML and CSS fundamentals. It only takes a little bit of JS fundamentals to get started with React, this would really help them move from design towards implementation details. Being able to know and articulate how something works in code is always a plus.
  • Product Owners: essentially, you would then be able to understand all the essential parts in a React app. You'll be able to improve the overall conceptualisation of the tech architecture, even if you aren't the best coder in town.

Well, let's hope I keep this learning up. Ta-ta for now, see you around.

I'm thinking an article on node and npm next would be useful. I did not know about these before I started.

Find more ReactJS stories on my blog. Have a suggestion? Contact me at [email protected].