React Vernacular Campaign

Through the "React Framework Vernacular Campaign" series of articles, we hope to help readers better understand the various applications of React by using a verbalized glossary and simple code examples.

The series of articles will cover the following:
1. Understanding ES6 JavaScript syntax
2. Understand how React works
3. Understanding React's state management
4. Use React Hook to manage state and access data

React11-React-Hook-useState

React Hook useState – React Vernacular Campaign 11

useState is a React hook for adding state to functions. useState allows us to define and manage state data within a function. useState returns an array of two values, including: the current state: when the function is first rendered, its value will be equal to the initial value we passed to useState. The current state: when the component is first rendered, its value will be equal to the initial value we passed to useState.

React Hook useState – React Vernacular Campaign 11 Read More »

React10-React-Life-Cycle

React Lifecycle - React Vernacular Campaign 10

React Lifecycle - The previous post took the React syntax a step further, React JSX - React Vernacular Campaign 06 learned how to build a React component, and learned about the parent-child relationship between components. In this post, we'll talk about the component lifecycle, including the three stages of the lifecycle, the lifecycle of class objects, and the lifecycle of function objects.

React Lifecycle - React Vernacular Campaign 10 Read More »

React08-Building a React Project

Building a React Project - React Vernacular Campaign 08

Building a React Project - React Vernacular Campaign: The previous post introduced three terms, namely: what is Babel, what is Webpack, and what is Npm? This article will build a React project by hand, including: setting up the environment, building a React project, starting the project, and how to use React extensions. It also includes: official CRA build environment and self-built environment.

Building a React Project - React Vernacular Campaign 08 Read More »

React06-React-JSX

React JSX - React Vernacular Campaign 06

React is one of the most popular JavaScript packages for web and mobile front-end development, developed by Meta to enable developers to create reusable components to complete front-end pages, and JSX is one of the more common ways to write React, so we're going to talk about what JSX is, its syntax, and how to use JSX to build React. components.

React JSX - React Vernacular Campaign 06 Read More »

How React works

How React Works - The React Vernacular Campaign 05

React is one of the most popular JavaScript packages for developing web and mobile front-ends, developed by Meta (formerly Facebook) to enable developers to create reusable components to complete front-end pages.

However, it's important to note that React is not technically a framework. That's because it's only responsible for presenting the components of the UI. However, React provides an alternative solution to frameworks such as Angular and Vue, allowing us to work with it on complex front-end page functionality.

How React Works - The React Vernacular Campaign 05 Read More »

Javascript Higher Order Function - HigherOrderFunction

JavaScript Higher-Order Function - React Vernacular Campaign 04

This article introduces the very important concept of JavaScript functions - higher-order functions, which are functions that take one or more functions as parameters or return a function as a result. In this article, we will explore in depth what is a higher-order function, the benefits of using higher-order functions and how to use higher-order functions in real-world applications, what is the function orientation? Pure Functions, Higher Order Functions, Correlation.

JavaScript Higher-Order Function - React Vernacular Campaign 04 Read More »

React03-Javascript-Async-Await

JavaScript Async & Await - React Vernacular Campaign 03

Welcome to the third installment of the React Vernacular Campaign series, where we're going to dive deeper into asynchronous operations in JavaScript and introduce two important keywords: Async and Await. In this post, we'll demonstrate the concepts of asynchronous operations through real-world examples, as well as how you can use Promise, Fetch, Async, and Await to handle asynchronous code more In this article, we will demonstrate the concept of asynchronous operations and how to use Promise, Fetch, Async, and Await to handle asynchronous code more effectively.

JavaScript Async & Await - React Vernacular Campaign 03 Read More »

react-vernacular-campaign-02 JavaScript ES6 Object

JavaScript ES6 Object - React Vernacular Campaign 02

In the previous post, we introduced let, const, var difference, template literal, and arrow function. This article will introduce other new syntax of JavaScript ES6, such as: Object Decomposition, Object Syntax Enhancement, Array Decomposition, and Extension Operator. We hope that through the above contents, it can help you learn React front-end framework more easily.

JavaScript ES6 Object - React Vernacular Campaign 02 Read More »

en_USEnglish