react学习-2.Hello Word

如果不考虑工程化的问题,React的运行基础环境非常简单,只需要在HTML文件中引入两个js文件(react.min.js和react-dom.min.js)即可开始工作。首先我们访问 https://facebook.github.io/react/,下载这两个文件。

  • react.js:实现React核心逻辑,且于与具体的渲染引擎无关,从而可以跨平台公用。如果应用要迁移到React Native,这一部分逻辑是不需要改变的。
  • react-dom.js:包含了具体的DOM渲染更新逻辑,以及服务端渲染的逻辑,这部分就是与浏览器相关的部分了。
  • babel-core.js:解析JSX语法以及es6语法。后面学习jsx语法需要引入,本章可以不引用,只引用前两个。

由于国内墙太高问题,可以到bootcdn,下载所需资源。

注:react已经更新了很多次,现已无法直接引用js来直接开发。15.6.1(包括15.6.1之前的版本可以)
不过推荐使用最新版本来开发。

所以我们在练习demo时,首先需要搭建开发环境。

具体怎样使用webpack搭建简易开发环境,首先需要学习webpackhttps://www.jianshu.com/p/97cae0978e52。这里就不介绍了,贴一下配置,直接开始demo。

image

1.Hello word

首页在main.js入口文件中添加一下代码

import React from 'react';
import ReactDOM from 'react-dom';
var element=React.createElement('h1',null,'Hello world')

ReactDOM.render(
    element, document.getElementById('root'));

预览,可以看见它渲染了一个 “Hello, world!” 的标题。

这个是最简单的react demo。

  • 引入React包,用来处理JSX
  • 引入ReactDOM包,用来渲染组件
  • 调用渲染函数render()
  • 引用react封装好的React.createElement方法创建html结构
  • document.getElementById('root')一个HTML容器

React.createElement(type,attr,child)

React.createElement是React的最基本方法。用于创建并返回一个给定类型的ReactElement元素。type参数可以是一个html标签名称字符串,也可以是一个ReactClasss。这个type参数对于createElement来说是必须的。第二个参数是该标签的属性,这个参数是可选的。第三个参数是该元素的子节点,同样也是可选的。

ReactDOM.render()

ReactDOM.render是React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。

下一篇——react学习-3.JSX语法原理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,840评论 1 18
  • 原文地址:Learning React.js is easier than you think原文作者:Samer...
    sunshine小小倩阅读 9,679评论 3 41
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 7,911评论 0 24
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 5,663评论 0 5
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 11,411评论 0 9