React knowledge system 17~19 [Part 1]

[reboottime]

Overview

This article builds the knowledge system of React 17~19 for experienced React developers, with the help of Claude.

Content

• React Core Concepts and their Relationships
• Component and State in React
• React Browser Compatibility For Each React Version

[reboottime]

React Core Concepts and their Relationships

you can read the chart at here

[reboottime]

Component and States

Declarative programming is about expressing the program's logic without explicitly describing its control flow.

React is a way to build websites by breaking them into reusable pieces (components), such that you can describe your UI declaratively. Imagine building a house:

Traditional HTML/CSS:

• Like building everything from raw materials each time
• Hard to reuse parts
• Changes affect everything

React's Component Approach:

• Pre-built rooms (components) you can reuse
• Each room handles its own stuff (state)
• Changing one room doesn't affect others
• Rooms can go inside other rooms (nesting)

Example: A social media feed

• Feed component contains many post components
• Each post component has its own like counter
• Posts can be reused, modified independently
• Updates are fast because only changed parts refresh

The diagram below describes how these concepts are glued together

and the code structure could be as below

<AppContainer>
   <NavigationBar>
       <Logo />
       <SearchBar />
       <UserMenu />
   </NavigationBar>

   <FeedContainer>
       <PostComponent>
           <PostHeader>
               <Avatar />
               <Username />
               <Timestamp />
           </PostHeader>

           <PostContent>
               <Image />
               <Caption />
           </PostContent>

           <PostActions>
               <LikeButton />
               <CommentSection />
               <ShareButton />
           </PostActions>
       </PostComponent>

       <PostComponent />
       <PostComponent />
   </FeedContainer>
</AppContainer>

[reboottime]

React Browser Compatibility

React Version	Chrome	Firefox	Safari	Edge (Chromium)	Legacy Edge	Internet Explorer
React 19	90+	90+	15+	90+	No	No
React 18	64+	63+	12+	79+	Limited	No
React 17	60+	55+	11+	79+	12+	11 (polyfills)
React 16	51+	54+	10+	79+	12+	9+ (polyfills)