What is React?

And where did web-apps come from?

You Might Also Like

React is a tool that helps us make web applications.

Let's start with that:

What is a web app?

From around 2005 to 2010 you may have noticed that websites got a lot more advanced. They became much more than just places to read information. There were becoming more of a place to do things. Between Social Media platforms, interactive maps in the browser, and even to spreadsheets and word processing with tools like Google Drive, websites started to feel more app-like.

As Web Developers, we started to use terminology to distinguish traditional websites from these more advanced sites. We started calling them "web applications" because the amount of logic with code that we were writing skyrocketed along with tons of app-like behavior and business rules that resembled traditional applications that you install. A web app is really just a website made from HTML, CSS, and JavaScript, but instead of building a house (website) the scale was more like we were building skyscrapers (web apps). Facebook.com would be an example. So is twitter.com, netflix.com and even your bank's site. Being a web app or website is a spectrum, but for many sites clearly on one end or the other. There can be many indicators of where a site is on this spectrum, but often times "more reading" or "more doing" can be the differentiator.

For example, compare the sites of a landscaper vs Twitter. The landscaper's pages are filled with content to read which is fairly static and when you click on the site you're probably clicking to navigate to another page which also has static content. Of course we're always reading things on every site, but Twitter's scale feels much different. The content you read is user-created (behavior), it has a mix of static and dynamic content, and requires a very complex software algorithm to determine what is displayed dynamically. More or less, you do things on Twitter. In other words, your clicks are not only taking you places but they're opening menus, they're submitting forms, they're hooked up to some sort of business logic that has to be programmed. The complexity of these app-like sites is far greater than traditional websites.

The lines are blurry

Sometimes the lines between website vs web app are a little blurry. For example, if you went to netflix.com, you're going to be looking at their marketing website that tries to show off their product and get you to sign up. This is more website-like but also it might be a distinctly separate project within the company vs their web app. The user experience seems seamless but when you login you could be looking at the effort of a different project team in the company that makes the web app.

So while the user-experience might be blur the lines, often times the technical process of building these things draws the line clearly between the project that is the app and that which is the site.

Web apps use JavaScript

At the time, servers were where our programming logic was for determining what page you were going to see as a user. If you did a search for products, the server's programming language would dynamically create the UI for you and "serve" it to be rendered in your browser. Then if needed, JavaScript could be used in the browser to add some basic behavior. As time went on and we required more and more complex behavior in the browser we started to create "frameworks" that would assist us in doing so. The logic and business rules of our sites started to slowly shift from backend (server) to frontend (browser). Around 2009 to 2014 there was somewhat of a renaissance of ideas and technologies for these newer high-behavior websites (and even new works like web app).

So where does React come in?

Facebook was one of the first big companies to decide to start rendering their UI completely in the browser vs on the server. The server is still required of course, but this represented a massive shift of logic being moved from backend to frontend. They found it difficult to use existing JavaScript frameworks that were supposed to help with this because Facebook's complexity needs to too great. So they created their own JavaScript framework called React.

React is Free and Open Source

Even though Facebook created React for themselves originally, they "open sourced" it in 2013. This just means that they made it available for everyone in the world to use and developers can even read all its source code to see how it's built. They also made its license so it can be used for free. So what does Facebook get out of it? If they can get many developers and companies to use React, we'll find fixes to make it better and help improve it. Then Facebook gets to use those improvements too, so it's a win-win. Plus Facebook themselves use other people's open source code for free so there's an element of "we need to give back" involved too.

React is very popular

Most JavaScript frameworks that become popular are only able to be so for a few years. But React has stood the test of time and has been very popular for ten years now (as of 2023). This can matter sometimes because if you're trying to grow your team, just know there are lots of developers out there who know React.

Who's using React?

Lots of companies are using React. From banks to airlines, universities, and governments to startups and even giant tech companies like Google, Apple, Netflix, AirBnB, PayPal, IBM, Microsoft, AT&T, and many more. React has risen to be the preferred tool for building web applications by many.

Is React easy to learn?

React itself is a JavaScript library which just means it's a bunch of JavaScript code already made for you. React being easy to learn or not depends on how well someone already knows how to program and specifically how to program in JavaScript. Even then, it's still fairly subjective since programmers tend to prefer various programming techniques over others and all libraries are opinionated on how they do things. The good news is, as far as programming languages are concerned, JavaScript is fairly easy to get started with.

i love react
© 2024 ReactTraining.com