events 处理

处理 React elements events 和处理 DOM elements 很相似，但有一些语法区别：

• React events 命名使用 camelCase 规则，而不是 lowercase
• 使用 JSX 传入 function 作为 events handler，而不是 string 字符串

HMTL 中处理 events 示例如下：

<button onclick="activateLasers()">
  Activate Lasers
</button>

React 中示例如下：

<button onClick={activateLasers}>
  Activate Lasers
</button>

注意它们的区别之处一个是 event 名称，一个是 handler 定义方式。

阅读全文

rendering elements 渲染元素

一个 element 表示我们想要显示在屏幕上的内容：

const element = <h1>Hello, world</h1>;

不同于浏览器 DOM 中的 elements，React elements 是简单的 objects 且可以很方便的创建，React DOM 会严格的刷新 DOM 并匹配对应的 React elements。

容易混淆的概念是 component 和 element，区别是 component 是用来创建 element 的。在后续章节会介绍。

阅读全文

请看下面的一个定义：

const element = <h1>Hello, world!</h1>;

它既不是一个 string 也不是 html。它叫做 JSX，是一种对 JavaScript 语法的扩展。推荐在 React 中使用 JSX 来描述 UI，它用来创建 React 类型的 elements 然后将其在 DOM 中渲染。

下面对 JSX 做一些基本介绍。

阅读全文

下面我们通过创建 Create React App 介绍 React 的基本语法。

通过上一节介绍的方法创建一个新程序 my-app-1:

npx create-react-app my-app-1
cd my-app-1

关于创建新项目及可能出现的问题参考上一篇：https://blog.niekun.net/archives/2175.html

Create React App 官方教程：https://create-react-app.dev/docs/documentation-intro

阅读全文

React 是一个用来创建用户界面的 JavaScript 库。

它从一开始就被设计为 gradual adoption 渐进式融入的模式，你可以根据需求使用 React 到你的项目中，无论是使用 React 对你的 html 页面做简单交互，或者完全使用 React 搭建程序。

阅读全文