首页 > 其他 > 详细

五分钟学习React(二):我的第一个Hello World

时间:2018-01-14 12:34:20      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:pre   模板   介绍   现在   gpo   定义   back   解释   一个   

我的第一个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应用。

五分钟学习React(二):我的第一个Hello World

标签:pre   模板   介绍   现在   gpo   定义   back   解释   一个   

原文:https://www.cnblogs.com/eason-peng/p/8282481.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号