Dev.to

Learning JS frameworks with me(part 4): React.js(1/3)-Getting Started with the UI Library That Changed the Web

After exploring vanilla JavaScript, jQuery, angular.js and Vue.js in our journey through frontend frameworks, it's time to tackle the elephant in the room: React. As one of the most influential and widely-used UI libraries in the world, React deserves our undivided attention—which is why I'm dedicating not one, but three blog posts to mastering it. When I first approached React, I'll admit I was intimidated. Coming from jQuery and even Vue, React's component-based architecture and its JSX syntax looked alien. Where were my familiar templates? Why was I writing HTML inside JavaScript? Yet, as I pushed through that initial confusion, I discovered a mental model that fundamentally changed how I approach building user interfaces. In this first installment of our React mini-series, we'll focus on the essentials: setting up React, understanding components, and building a simple version of our task application. Let's begin this exciting chapter of our learning journey together. React's Rise to Dominance Created by Jordan Walke at Facebook in 2011 and released to the public in 2013, React was built to solve a specific problem: building large applications with data that changes over time. Traditional DOM manipulation became unwieldy as Facebook's UI grew more complex, so they needed a new approach. React introduced a revolutionary idea: what if we treated our UI as a function of state? Instead of manually manipulating the DOM when data changes, we could simply describe what the UI should look like for any given state, and let React handle the updates. This paradigm shift, combined with React's component-based architecture, propelled it to become the most popular frontend library in the world. Today, React powers millions of websites and applications, from small personal projects to giants like Facebook, Instagram, Netflix, and Airbnb. Why React Matters in 2025 Despite being over a decade old—an eternity in the JavaScript ecosystem—React continues to dominate frontend development for several compelling reasons: Component-Based Architecture: React's component model has proven to be an elegant and scalable way to build UIs, influencing virtually every framework that followed. Massive Ecosystem: With over 3 million packages on npm, countless tutorials, and robust tooling, React has the largest ecosystem of any frontend technology. Career Opportunities: React consistently tops the list of most in-demand frontend skills, with more job listings than any other JavaScript framework. Future-Proof Investment: React's core principles have remained stable despite its evolution, making it a safe long-term investment for developers and companies alike. Meta's Commitment: With continued investment from Meta (formerly Facebook), React remains actively developed with regular improvements. React Native: Learning React opens the door to mobile app development with React Native, allowing you to leverage your skills across platforms. React's Core Philosophy Before diving into code, it's crucial to understand React's fundamental philosophy, which can be summarized in a few key principles: Declarative UI: Describe what your UI should look like, not how to change it. Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Learn Once, Write Anywhere: React's core concepts transfer across platforms (web, mobile, desktop). Unidirectional Data Flow: Data flows down from parent to child components. Virtual DOM: An abstraction of the DOM that allows React to update only what needs to change. These principles might seem abstract now, but they'll become clearer as we put them into practice. Setting Up Your First React Project For this first post, we'll use the simplest approach to get started with React—using script tags in an HTML file. In later posts, we'll explore more sophisticated setups with build tools. Step 1: Create Your Project Structure react-project/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js Step 2: Set Up Your HTML File React Task List My React Task App Step 3: Use The Same CSS To maintain visual consistency with our previous examples, we'll use the same CSS styles from our earlier projects. Step 4: Writing Your First React Component Now for the exciting part—let's write our first React code: // js/main.js // Simple Task App - First Version function App() { // State using React Hooks const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); // Effect Hook for localStorage React.useEffect(() => { const savedTasks = JSON.parse(localStorage.getItem('tasks')) || []; setTasks(savedTasks); }, []); // Save tasks to l

Mar 30, 2025 - 11:02
 0
Learning JS frameworks with me(part 4): React.js(1/3)-Getting Started with the UI Library That Changed the Web

After exploring vanilla JavaScript, jQuery, angular.js and Vue.js in our journey through frontend frameworks, it's time to tackle the elephant in the room: React. As one of the most influential and widely-used UI libraries in the world, React deserves our undivided attention—which is why I'm dedicating not one, but three blog posts to mastering it.

When I first approached React, I'll admit I was intimidated. Coming from jQuery and even Vue, React's component-based architecture and its JSX syntax looked alien. Where were my familiar templates? Why was I writing HTML inside JavaScript? Yet, as I pushed through that initial confusion, I discovered a mental model that fundamentally changed how I approach building user interfaces.

In this first installment of our React mini-series, we'll focus on the essentials: setting up React, understanding components, and building a simple version of our task application. Let's begin this exciting chapter of our learning journey together.

React's Rise to Dominance

Created by Jordan Walke at Facebook in 2011 and released to the public in 2013, React was built to solve a specific problem: building large applications with data that changes over time. Traditional DOM manipulation became unwieldy as Facebook's UI grew more complex, so they needed a new approach.

React introduced a revolutionary idea: what if we treated our UI as a function of state? Instead of manually manipulating the DOM when data changes, we could simply describe what the UI should look like for any given state, and let React handle the updates.

This paradigm shift, combined with React's component-based architecture, propelled it to become the most popular frontend library in the world. Today, React powers millions of websites and applications, from small personal projects to giants like Facebook, Instagram, Netflix, and Airbnb.

Why React Matters in 2025

Despite being over a decade old—an eternity in the JavaScript ecosystem—React continues to dominate frontend development for several compelling reasons:

  1. Component-Based Architecture: React's component model has proven to be an elegant and scalable way to build UIs, influencing virtually every framework that followed.

  2. Massive Ecosystem: With over 3 million packages on npm, countless tutorials, and robust tooling, React has the largest ecosystem of any frontend technology.

  3. Career Opportunities: React consistently tops the list of most in-demand frontend skills, with more job listings than any other JavaScript framework.

  4. Future-Proof Investment: React's core principles have remained stable despite its evolution, making it a safe long-term investment for developers and companies alike.

  5. Meta's Commitment: With continued investment from Meta (formerly Facebook), React remains actively developed with regular improvements.

  6. React Native: Learning React opens the door to mobile app development with React Native, allowing you to leverage your skills across platforms.

React's Core Philosophy

Before diving into code, it's crucial to understand React's fundamental philosophy, which can be summarized in a few key principles:

  1. Declarative UI: Describe what your UI should look like, not how to change it.
  2. Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs.
  3. Learn Once, Write Anywhere: React's core concepts transfer across platforms (web, mobile, desktop).
  4. Unidirectional Data Flow: Data flows down from parent to child components.
  5. Virtual DOM: An abstraction of the DOM that allows React to update only what needs to change.

These principles might seem abstract now, but they'll become clearer as we put them into practice.

Setting Up Your First React Project

For this first post, we'll use the simplest approach to get started with React—using script tags in an HTML file. In later posts, we'll explore more sophisticated setups with build tools.

Step 1: Create Your Project Structure 

react-project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

Step 2: Set Up Your HTML File 


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>React Task List<span class="nt">
     rel="stylesheet" href="css/style.css">
    
    
    
    
    


    

        
My React Task App

    


    

         class="todo-app">
            
             id="app">