React
React 是Facebook开发的一个用于构建用户界面的 JavaScript 框架
项目搭建
搭建 React 框架项目非常简单,可以在安装 Node.js 的前提下使用以下命令创建 React 项目工程
1 | npx create-react-app [项目名] |
方法2:安装脚手架,然后通过脚手架构建 React 项目
1 | npm install -g create-react-app |
1 | create-react-app [项目名] |
运行项目
建立项目过后会自动创建一个文件夹,c d 进去可以使用命令运行项目。
1 | npm start |
如果运行错误,可以使用命令安装依赖。再运行一次。
1 | npm install |
此时官方的基本示例就已经显示在浏览器里了。现在我们可以试着自己写一个 Hello World !
Hello World
首先我们可以先把 src 目录下的文件全部删除掉。并建立 index.css
、index.js
。然
后在 index.js
中引入这 三行代码:
1 | import React from 'react'; |
我们可以在 index.js
下编写一个自己的 Hello World 并去浏览器预览.
(其中 root 意指 根
)
1 | ReactDOM.render( |
如果你没把启动项目服务关掉,你会发现它自动刷新了网页内容。是的,没错。React 可以这样。
1 | npm start |
认识 JSX
1 | const element = <h1>Hello, world!</h1>; |
现在,你可以看到这个有趣的代码。它里面有标记语法但既不是字符串也不是 HTML。
它被称为 JSX,是一个 JavaScript 的语法扩展。可以在 React 中配合使用。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到标记语言,但它具有 JavaScript 的全部功能。
上面的例子我们创建了一个 element 变量来存储 JSX,我们可以在 render 中调用它。
1 | const element = <h1>Hello world</h1>; |
组件
React 中可以使用函数来定义组件。下面这个函数可以传递着 props 到 元素中。这类组件被称为 "函数式组件"
1 | function Welcome(props) { |
除了函数也可以使用 ES6的 class 来定义组件。
1 | class Welcome extends React.Component { |
组件渲染
上面我们遇到的 React 元素都是 DOM 标签
1 | const element = <div/>; |
React 元素也可以是用户自定义的组件
1 | const element = <Welcome name="Chen" />; |
例如,这段代码会在页面上渲染 “Hello,Chen”
1 | function Welcome(props) { |
组合组件
组件可以在其输出中引用其它组件。例如以下代码会输出:Hello,小陈
Hello,小白
Hello,小红
1 | function Welcome(props){ |
元素渲染
React 的网页元素是静止一帧不变的。但可以像下面这个例子实现刷新。
在函数中插入 ReactDOM.render 并使用 setInterval() 来调用函数。实现内容的更新渲染。
1 | function time(){ |