React Thinking

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

A Simple Hello World in React

//index.html
<div id="root"></div>

//index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello,world!</h1>);

Above code will display a heading saying Hello, world! on the page.

createRoot() - Create a React root for the supplied container and return the root. render() - Used to render the React element into the DOM

Thinking in React

React can change how you think about the designs you look at and the apps you build.

• When you build a user interface with React, you will first break the entire application into pieces called Components.
• Then, you build these components individually
• Finally, you will connect these components together so that the data flows through them.

Consider below example:-

Let's understand above diagram:-

• The entire webpage is broken into smaller components - Dashboard, Header, Main, Side, Article, ArticleItem and Footer.
  1. Dashboard has the entire application
  2. Header has navigation links
  3. Main has cover image
  4. Article contain list of articles
  5. ArticleItem has article data
  6. Footer has copyright text and links to navigate
• These smaller components will be designed individually
• Finally, they will be connected together.

---

Let's connect. I share my learnings on JavaScript and Web Development.

Connect with me:

GitHub

LinkedIn

YouTube

Instagram