Hey reader 👋🏼

This is my first blog on this platform and I hope it finds developers starting their journey trying to wrap their head around web development and are intrigued by React.

I love using React for my projects and would recommend every budding web developer to try React in a heartbeat. I wanted to write a small piece to give a high level overview of the most popular UI library.

So what the heck is React?

React is a JavaScript library for building User Interfaces. It is also the most popular JavaScript library on GitHub with 186k ⭐️ and counting.

A few reasons why React is so popular:

• Hyperactive community 🌏
• Component-based Architecture ⚡️
• Marketing ✨ (Facebook built it, duh)

React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.

React is one of the hottest skills in the Engineering job market at the moment. Its highly scalable and is a really fast way to build a web app.

Components & JSX

React helps us create User Interfaces for web applications that are both fast and scalable.

At the heart of any React app is a Component. A Component is an independent, isolated and re-usable piece of UI. Multiple components then compose together to form a complex User Interface. A component can have a number of properties and functions that are coupled together within it. From an implementation standpoint, a component is typically a JavaScript file.

Which means it runs on top of the HTML that you would normally write (sort of). So you could imagine React to be something like a wrapper that wraps your HTML code to add some React Effects

React maintains its own tree of elements (also called as Virtual DOM, outside of the regular HTML DOM) to govern over the application and look for changes, which we'll talk about in a minute. So in order for React to do this, we need to write our code that is not just understandable to the browser but is also understandable by React.

To achieve exactly this, React recommends JSX

JSX (or less interestingly known as JavaScript XML) is React's way of coupling UI logic with Rendering logic. The developers have written a sweet document explaining everything about JSX. (Introducing JSX - React)

console.log(<p>Hello World</p>);

The above line of React code will log a JSX element to your console. If you were to observe the output, you will find a plain JavaScript object with a bunch of properties and methods that looks almost like a DOM element but isn't. So, the paragraph tag inside the JSX is converted to a DOM element by React, which it maps to the virtual DOM that React builds for us to work with.

JSX vs HTML

To give you a preview, a general HTML snippet such as this:

<button onclick=sayHello()>
  Say Hello
</button>

looks something like this in JSX

function ButtonThatSaysHello () {
  /*
  * Logic that's coupled with the component
  */

  return (
    <button onClick={sayHello}>
      Say Hello
    </button>
  );
}

The above snippet is a valid React component. So React component simply can be functions that return JSX. And where React really comes into the picture is through its own custom render method.

To bring the component that we just saw into the HTML DOM, we do something like this:

function App() (
  <div className="app">
    <Header />
    <ButtonThatSaysHello />
    <Footer />
  </div>
)

ReactDOM.render(
  <App />, document.getElementById("root")
)

As you can see in the above snippet, we structure our components into one JSX block and render it using ReactDOM.render. We also pass a second argument to the render function which is the actual DOM element which acts like the parent wrapper inside which all the action happens.

So, essentially what we are doing is, creating JSX infused with logic instead of plain HTML and use React to render it to our application through its Virtual DOM.

But why do all this?

What does React provide in exchange for the extra lines of code?

Well, for starters, the developers of React believe this is a cleaner and more effective way of writing code and provides better readability and maintainability as well.

Secondly, it makes sense when we think about what React advocates - The Component based Architecture.

Let's do a small dive into some of the core functionalities

Component Based Architecture

Lets try to envision a really complex web-page like Twitter. In a component based architecture, we could easily picture something like this:

<Home>
  <Sidebar />
  <CreateTweet />
  <SearchBox />
  <MainFeed />
  <Messages />
</Home>

See how simple the web page starts to look once we break it down into components? This also reinforces re-usability. The <Sidebar /> component can be reused in several other pages or views without much effort. It also makes maintainability simpler in the sense that any work related to the Sidebar component needs to be done only once and not for every area where the Sidebar is required.

Component State

State in React is unnecessarily deemed complex by some while its not. But one cannot understand State without understanding the relevance of data.

Lets look at the example of Twitter feed, which of course, is made of multiple tweets and looks something like this.

If we imagined every tweet to be a re-usable component, what are the items we see in one tweet?

• Author's profile picture
• Author's username
• Tweet content
• Number of likes
• Number of comments

Now, lets assume you are viewing the Twitter feed and one of the tweets on your feed is trending. When you're viewing it live, the likes for the tweet are increasing every second. Twitter of course updates the likes under a tweet in real-time. But what is the cost of this? Will your feed that is made of thousands of tweets in entirety refresh everytime 1 of the 1000s of tweets gets more likes?

Well, of course not. It makes sense to refresh (or in React terms, re-render) only the component that is directly affected by the change in data. This is exactly what State gives you in React.

By defining a State for a component, we make sure that change in data only affects the component that it directly should affect.

Data Flow

Since we just saw what State is, It's pretty simple to imagine a large application having multiple data points coming from multiple places yet having simple re-usable components.

Data flows down One Way through a React app

We can observe that the data from multiple places flow into the Tweet component at the bottom. Which means that the Tweet component is re-used extensively across the application of Twitter.

Takeaways

React is a very powerful library and provides a lot of innovative solutions of achieving a highly functional component architecture for a web application.

The developers of React have made some really significant and community-driven additions to the library and still continue to.

Lastly, React is both a pioneering and promising library today that millions of developers use to build their User Interfaces.

What's next?

Since React by itself is a light-weight library, it depends on a few other ones to achieve things such as Routing, Complex State Management, HTTP services. So, developers have to come around and learn few other supporting technologies like Redux for complex state management, React Router DOM for routing.

Having come to an end of a high-level breakdown of the library, here are some other resources you could check out to learn React and become a pro ⚡️

React Crash Course - Travesty Media

This is a YouTube crash course where you learn React on the go by building a Task Tracker app all within 2 hours. It requires you to have a little bit of knowledge on basics of HTML, JavaScript and CSS.

Travesty Media also publishes several other courses on other front-end technologies and also some backend technologies.

TypeScript for React - Programming with Mosh

If you want to further your knowledge on TypeScript which is widely used with React, this is a great course.

The Complete React Developer Course (w/ Hooks and Redux)

This is a paid course on Udemy by Andrew Mead where he breaks down every concept on React and takes you on a journey of a web-app end to end.

Happy Coding! 🥳