五分钟学习React(二):我的第一个Hello World
我的第一个React应用
接着我们上一期所讲的内容,通过create-react-app
脚手架创建的应用,它是基于ES6的语法生成的。我们清空src目录下的文件,并分别创建index.js和index.css文件。
cd my-app/src
rm -rf *
touch index.js
touch index.css
现在我们编辑index.js文件,
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
启动npm start,页面上显示:
代码解释
Hello World应用虽然简单,但是已经把react的基本架构包含在内。我们解释下每行的意义。
第一行:import React from 'react'
中的react是React库的入口文件,React库的顶级API都在这个文件中定义。包括React组件(components)、创建React元素(createElement)等
第二行:import ReactDOM from 'react-dom'
中的react-dom包提供了应用顶层使用的DOM特定方法,如render()、hyrate()、unmountComponentAtNode()、findDOMNode()、createPortal()等
第三行: 引入css文件使index.js中的react-dom能够被index.css渲染。
第四-七行:
ReactDom.render()方法的定义如下:
ReactDOM.render(
element,
container,
[callback]
)
这段代码的意思是将<h1>Hello, world!</h1>
这个React元素放入一个id为root的container容器中中。这里值得注意的是<h1>Hello, world!</h1>
并不是传统意义上的HTML模板,而是叫JSX的一个React扩展文件。
在这一期我们讲了一个基本的React应用,它是基于ES6的语法生成的。它通过render的方法将React元素加载到container中。
下一期我们将介绍下非ES6的React应用。
最新文章
- ASP.NET中处理自定义错误的最佳方式
- 原!!jar包 --可执行exe文件--安装包
- 使用AIDL远程调用服务中的方法
- 操作properties文件,注意抹掉最前面的";file:";
- Linux内存管理之地址映射
- OpenFlow Switch学习笔记(二)——OpenFlow Ports
- ormlite性能对比
- JS中for循序中延迟加载实现动态效果
- 《Linux命令行与shell脚本编程大全》第九章 安装软件程序
- D. Longest Subsequence
- GitHub趋势:Vue.js大有超过TensorFlow之势!
- 自定义控件辅助神器ViewDragHelper
- atlium designer 我画的pcb板到出元件清单, 里面显示 Board Stack Report
- Spring Cloud的概述(二)
- 1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(方案总揽)
- hybird app混合开发介绍
- 四则运算level2
- [转载]windows7中没用boot.ini文件而是改用BCDEDIT来配置了
- Laravel 多where组合
- 详解Linux系统下PXE服务器的部署过程