Everything React — All about React!

9 min readFeb 5, 2019

Our Journey Begins!

Hello Reacts fans.

Welcome to the Everything React blog series (Yeah, I know I couldn’t come up with a better name 😭). This series is all about building your knowledge about React and its ecosystem in a bottom-up fashion, so make sure to clap and share it with fellow devs to motivate me to keep putting effort into this series and you up to date about React. So without further ado, lets start with the most basic question that beginners ask.

Figure 1. Le you learning to harness the power of React

What is React? 😱

React is an open-source JavaScript Library for building User Interfaces. These interfaces are thought of being made up of atomic reusable components that can be re-used on different or same sections or pages.

React is mostly used for creating Single Page Apps (SPAs), Mobile Apps using React Native and Desktop Apps using Electron, and is by far the most popular web framework in 2019 (sorry Angular and Vue fans 😅).

A great way of working with React is by breaking down our design into wire frames. This makes it easy to map components and their hierarchy for our application. Here we can identify a minimal of Navbar, Button, Card, News and Ads component, among which Button and Card component can be used in many places with dynamic content, hence making our life easier when we actually start to build the app.

The following are the most important method/tools that are used when working with React apps (I won’t be describing about Webpack and State-management tools since they aren’t best fit for beginners)

JSX

Reacts apps are written in JSX (you can write them with pure JavaScript, but rarely you’ll see devs do that since its a pain to work with it). JSX syntax looks identical to that of HTML’s but in reality it is just a syntactic sugar for creating React elements.

Babel

The purpose of a web browser is to display web pages, but since our React app is written in JSX, it cannot be understood by any web browser. So how will our web page be displayed in a browser? Well, that’s where Babel comes into play. Babel is an open-source JavaScript compiler and transpiler which is used with React apps to transform our JSX code into plain JavaScript.

Node Package Manager (npm)

npm is a package manager that comes out-of-the-box when you install Node.js. It helps us manage a project/app (any JavaScript app to be precise) by keeping track of dependencies (packages) and their version in a package.json file. It also lets us write scripts in the package.json file, which can be executed to perform certain tasks such as building our app for production or running automated tests to check if our app is still working fine. Finally, npm allows us to share our project to a group of users which can then collaborate to extend or fix problems arising in our project.

Why React? 😕

A lot of you may already know or heard about Angular or Vue, and may be wondering why would I learn React when I could just learn the other one. Well I am not here to win you from the other side, but rather to show you the best parts React has to offer.

#1. Best Framework to work with Web apps in 2019

#2. Tons of job opportunities

#3. Easy to Learn (Its my experience; but Angular has a very steep learning curve)

#4. Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. (Yes, this is from react’s official web page 😂)

#5. Re-usability: Components created can be reused throughout the entire application, and even beyond, can be used in other applications as well.

#6. Performance: React minimizes the operations performed on the actual DOM by introducing something that is known as an Virtual DOM. The actual DOM is only updated when the Virtual DOM deems it necessary.

#7. A large community at your disposal: A lot of devs have already tried and tested most of the functionality that you are going to implement, therefore you will be able to find help easily when you get stuck of a problem.

There are more pros when coming to React, but I believe these to be the most important ones, specially since they matter the most.

React’s Ecosystem 😖

React may seem like a small library at first but in reality it needs to collaborate with a fair amount of packages to build large scalable applications.

As you can see, React’s ecosystem is quite large. Not all React apps need to work with all of them, it all depends on your requirement. A Server Side Rendering App with Type checking will only require you to work with React, TypeScript and Next.js only.

If you are overwhelmed with how much setup is required when trying to start a new project, don’t worry. Facebook has you all covered with a package called create-react-app. This package comes built in with much of the aforementioned packages, making our life a lot easier and allowing us to focus on development rather than boiler plating the project (More than 50% community prefers to use this package to start a project).

Note: I didn’t add React’s Core API, Styling, Internationalization and Other testing paradigm tools just to make the ecosystem image look simpler, and also didn’t mention tools that will be seen in most of the legacy apps.

Story Time — React’s Rise to Power 😎

Since we have gotten much of the basic questions out of the way. I will take this time to explain the motivation and reason behind why Facebook implemented React (For those who despise history lessons, this is a good opportunity to skip the section and move on to create your first app).

It all started in 2011 when Facebook created XHP (a JavaScript port) and embedded it in its PHP stack. XHP was a HTML component framework for PHP which removed the burden of scrubbing user submitted information as well as had the notion of creating components.

Meanwhile, Facebook Ads were gaining a lot of attention and they needed to be expanded to offer more functionality, but it was hard to manage them. An Engineer at Facebook named Jordan Walke proposed a solution (inspired by the XHP component based approach), and after six months came up with FaxJS (An early prototype of React). The first component by FaxJS was shipped as a search element and proved to be successful.

Happy with the results, Facebook had the pressure to decouple this framework from their app and open-source it, and in May 2013 at the JS Conf React was open-sourced. Unfortunately, devs thought that this was a huge step backwards, and React didn’t gain much popularity. Creators realizing their mistake started to push devs to try React our by touring places. The same year, React was also made available on JSFiddle, Ruby on Rails and Python.

In 2014, React was gaining reputation but devs were concerned about its stability on a live environment. The creators not willing to give up, changed their strategy and started targeting enterprises such as Netflix. The creators also targeted the #1 browser and released React Developer Tools to aid developers while building a React app. React Hot Loader was also released that allowed components to be reloaded without losing state.

2015 was probably the best year for React. It was stable. Netflix and Airbnb were using React. Redux was released by Dan Abramov and Andrew Clark. Relay and GraphQL was revealed along with React Native at React.js Conf. This was Mark Zuckerberg’s Mission in 2013 where he said and I quote

Our Biggest Mistake Was Betting Too Much On HTML5 and Facebook would deliver better mobile experience very soon

Fast Forwarding to 2019, React is now at the heart and is a go-to front-end solution when it comes to build large scale apps. According to Stack Overflow’s 2018 developer survey (2019 developer survey results will be out soon), most wanted skill was React.js followed by Node.js.

So whatchyou waiting for. Lets Learn React. 😁

Your First App — Create-React-App? 💻

Since we have covered a lot, why not close the curtains after creating an app with the create-react-app package (and to get you familiarized with it as well). This package provides us with an environment and various tools to build React apps, to learn about what’s included in this package, head on over to their github page.

There are two ways to create a React app (follow which ever seems best to you).

1. Installing create-react-app globally and creating a project

npm install --global create-react-app
create-react-app <path_to_directory>

The first command installs the create-react-app package globally in your computer. It can be used later on to create a new React app just by executing the second command.

2. Executing create-react-app and creating a project

cd <path_to_directory>
npx create-react-app .

The npx (its actually npx and not a typo) command allows you to execute a package without keeping its content in your computer. This allows you to just execute the create-react-app package and create a React app in the desired directory.

Time to run the React app

Since we are all set up by now. All we need to do is run the React app created by the Facebook package (make sure you are in the base directory of the app before executing the command).

cd <path_to_base_directory> // if you are somewhere else
npm start

After the second command has executed, your default browser will pop up and will take you to http://localhost:3000/, where you will see the React app in action (we won’t be touching the source code and will leave it for another day — yeah I am sorry, no Hello World app today! 😢).

Figure 4. create-react-app application in action

Subscribe to the Newsletter

If you liked this and want to stay updated about the new released about this series then make sure to subscribe below by typing in your email address.

PS: Don’t worry, I won’t be spamming you with unnecessary content.

The End! 😶

Phewww! That was a much to take in, but I hope, many of you reading have gotten a clear-cut picture about what React is and why one should strive to learn it.

This was the first of many to come blogs of this series. I wish that the tip of the iceberg was helpful to you guys, and if you liked it, then you can continue ahead with the next one — All about JSX.

It would really mean a lot to me if you could clap 👏 and share this blog on your socials. Comments are always welcome to point out improvements so that I may avoid the same mistakes in the upcoming blogs. In the meantime follow me on Medium or LinkedIn to be notified about the next blog of this series.

Thanks for Reading. 😄