---
title: "React Learning Notes - A First Look at React - Part 1"
description: "A beginner's guide to React, covering project setup, State and Props, conditional rendering, list rendering, and the component lifecycle. It also includes a comparison with the other major front-end frameworks, Angular and Vue."
canonical_url: "https://blog.markkulab.net/en/post/react-get-start"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/en/author/mark-ku"
site: "Mark Ku's Tech Notes"
date_published: "2022-07-06 01:01:01 +0800"
category: "Frontend"
tags: ["react", "typescript", "frontend", "component", "state", "lifecycle"]
language: "en"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "when reusing or quoting, credit the author and link back to the original"
---

# React Learning Notes - A First Look at React - Part 1

## Introduction
In recent years, the React front-end ecosystem has become increasingly rich. A vast number of packages are developed with React, and it's being adopted by more and more companies. This made me want to understand React as well. Having gone from Angular to Vue, and now to React, I've finally collected all three major front-end frameworks. I guess I can summon the dragon now.

## The Advantages of the Three Major Frameworks
Angular - The framework has clear specifications, a complete solution, and a powerful CLI, making it easier for back-end developers to get started.  
Vue - Fast development, simple API, and lightweight to use. It's relatively easy to integrate into and rewrite legacy systems.  
React - A more complete front-end ecosystem. Writing it feels closer to plain JS syntax. For many companies, it's stable and secure, and version upgrades don't require a complete rewrite.

## Project Setup
### Create a React project with TypeScript
```
npx create-react-app jira --template typescript
```
P.S. npx is very smart about identifying modules. If a module exists, it uses it. If not, it temporarily downloads it and then deletes it after use.

### Change `baseUrl` in `typescript.json` to set the default directory to `src`

Add `src`  
```
{
  "compilerOptions": {
   "baseUrl": "src",
...
}
```

## Two Properties in React That Trigger Rerenders
### React State
When state changes -> it affects the virtual DOM -> the DOM is re-rendered, and the page updates.
### React Props (Passed from outside)
#### class component
```
class ContactInfoBlock extends React.Component {
  constructor(props) {
    super(props);
  } 
  ...
}
```
#### function component
```
import { FC } from "react";
const ContactInfoBlock: FC<ContractProps> = () => {
...
}	
```

## Rendering with `for` loops - You just write your own `map` to render.

```
import React from "react";

export const Test = () => {
  let items = [1, 3, 5, 7];

  return (
    <div>
      {items?.map((item, index) => (
        <span key={index}>{item}</span>
      ))}
    </div>
  );
};

export default Test;
```

## Conditional Rendering - You also write a function that returns an HTML tag
```
import React from "react";

export const Test = () => {
  let items = [1, 3, 5, 7];

  function showItem(item: Number) {
    if (item === 3) {
      return;
    } else {
      return <h1 key={item.toString()}>{item}</h1>;
    }
  }

  return <div>{items?.map((item, index) => showItem(item))}</div>;
};

export default Test;
```

## Component Lifecycle Has Become Much Simpler
Mounting: Inserted into the real DOM  
Updating: Being re-rendered  
Unmounting: Removed from the real DOM  
![React component lifecycle diagram showing mounting, updating, unmounting phases](https://blog.markkulab.net/content/markku/posts/react-get-start/images/KnnGOO7.png)

## Thoughts
When I started writing React, I noticed it lacked a lot of syntactic sugar, which felt strange at first. The code is really closer to plain JS. The rendering engine has almost no framework-specific syntax; it's just pure JS. Here are the biggest differences I noticed:

1. Lacks a lot of framework-specific syntactic sugar
2. The only things that trigger a component re-render are props and state (which makes it very simple)
3. A simpler lifecycle - Mounting, Updating, Unmounting
4. Conditional rendering - You just write a function that returns an HTML tag
5. Rendering loops - You just write your own `map` to render
6. A high degree of freedom in how you write code (which isn't necessarily a good thing)
But one thing all three major frameworks have in common is a growing trend towards full TypeScript support.

## References
[References](https://www.runoob.com/react/react-component-life-cycle.html)

---

## About this article and its author

Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/react-get-start)

License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original

### About the author

**[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider

- 10+ years senior software engineer, now an AI Builder
- Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing
- Combining AI Agents and automation to build evolvable product foundations

### Free tools built by the author

All of these are free to use:

- [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded.
- [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer.
- [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux.
- [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT).
- [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single <MermaidViewer>, with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT).
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace.
- [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is.
- [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT).
- [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT).
- [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students

### Daily podcasts

- [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml
- [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml

### Newsletter

[Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.