React

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 »

Javascript, React Vernacular Campaign, Technical Article,
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 »

React Vernacular Campaign, Technical Article,
React Props - React 白話文運動 09

React Props - React Vernacular Campaign 09

React Props - the React vernacular movement. This post will take a closer look at the React syntax. In the previous posts, we learned how to create a React component, and we learned that components have a parent-child relationship. This post introduces the concept of React Props, including: React component declaration, React Props.

React Props - React Vernacular Campaign 09 Read More »

React Vernacular Campaign, Technical Article,
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 »

React Vernacular Campaign, Technical Article,
Babel & Webpack & NPM - React Whitepaper Campaign 07

Babel & Webpack & NPM - React Whitepaper Campaign 07

This post will explain three terms that are needed to build a React project: what is Babel, what is Webpack, and what is Npm. Of course, the main focus is on the concept of using these tools, but there are other tools to choose from, such as Npm and Yarn.

Babel & Webpack & NPM - React Whitepaper Campaign 07 Read More »

React Vernacular Campaign, Technical Article,
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 »

React Vernacular Campaign, Technical Article,
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 »

React Vernacular Campaign, Technical Article,
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 »

Javascript, React Vernacular Campaign, Technical Article,
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 »

Javascript, React Vernacular Campaign, Technical Article,
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 »

Javascript, React Vernacular Campaign, Technical Article,
en_USEnglish