React 入门教程之三 -- 介绍 JSX
请看下面的一个定义:
const element = <h1>Hello, world!</h1>;
它既不是一个 string 也不是 html。它叫做 JSX,是一种对 JavaScript 语法的扩展。推荐在 React 中使用 JSX 来描述 UI,它用来创建 React 类型的 elements 然后将其在 DOM 中渲染。
下面对 JSX 做一些基本介绍。
string(1) "5"
请看下面的一个定义:
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 搭建程序。
TypeScript 是微软开发的开源编程语言,在全世界的开发者中流行。
本质上来说 typescript 是 JavaScript 的超集,为其添加了很多功能。标志性的就是添加了 static type 静态类型定义,它可以声明期待的数据类型,例如:声明 function 中的期待的传入数据类型,期望的返回值的类型,object 的结构及 property 的数据类型等。
typescript 是一个强大的工具,给 JavaScript 项目开启了新的世界。它使我们的代码更加的安全有力,在程序发布前就可以防止很多的 bug 出现。在编写代码期间就能够及时反映出问题点,并且它已经被整合在现代的编译器中,如 VS code。
production environment 产品环境和 development environment 开发环境可以设置不同的配置。
node.js 默认为 development env 开发环境。通过设置环境变量:NODE_ENV=production
可以告诉 node.js 当前为产品环境。Linux 中可以通过如下指令修改:
export NODE_ENV=production
这样在当前 shell 中就会以 production 模式运行 node 程序,如果要永久修改此环境变量可以将命令写入 ~/.bashrc 文件。
也可以在运行 node 程序时定义 NODE_ENV:
NODE_ENV=production node app.js