React.js入门实例教程之创建hello world 的5种方式

2024-10-01 05:22:51

一、ReactJS简介

React 是近期非常热门的一个前端开发框架。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

ReactJS官网地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

ReactJS中文地址：http://reactjs.cn/react/docs/getting-started.html

React是什么？

React是由工作在Facebook的优秀程序员开发出来的用于开发用户交互界面的JS库。其源码由Facebook和社区优秀的程序员维护，因此其背后有着非常强大的技术团队给予技术支持。React带来了很多新的东西，例如组件化、JSX、虚拟DOM等。其提供的虚拟DOM使得我们渲染组件呈现非常之快，让我们从频繁操作DOM的繁重工作之中解脱。了解React的人都知道，它做的工作更多偏重于MVC中的V层，结合其它如Flux等一起，你可以非常容易构建强大的应用。

二、ReactJS特点

1，虚拟DOM

通过DOM diff算法，只会更新有差异化的部分，不用渲染整个页面，从而提高效率

2，组件化

把页面分成若干个组件，组件中包含逻辑结构和样式

组件只包含自身逻辑，更新组件的时候可以预测，利于维护

页面拆分多个组件，可以做到重用

3，单向数据流

数据是从顶层组件传递到子组件中

数据可控

三、入门React 编写 Hello，world 首先了解下什么是JSX

React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM，虚拟DOM也可以通过JavaScript来创建，例如：

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2);
React.render(
<div>{root2}</div>,
document.getElementById('container5')
);

使用这样的机制，我们完全可以用JavaScript构建完整的界面DOM树，正如我们可以用JavaScript创建真实DOM。但这样的代码可读性并不好，于是React发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM：

var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
React.render(
<div>{root}</div>,
document.getElementById('container6')
);

四、React 编写Hello，world 入门的5种方式

第1种方式

<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>,
document.getElementById('example1')
);
</script>

第2种方式

<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'),
document.getElementById('example2')
);
</script>

第3种方式

<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可
return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>,
//或者双括号 <CreateEl></CreateEl>
document.getElementById('example3')
);
</script>

第4种方式

<div id="example4"></div>
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null),
document.getElementById('example4')
);
</script>

第5种方式

<div id="example5"></div>
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data='5 hello' />
<World />
</h1>,
document.getElementById('example5')
);
</script>

五、上结果图

附上代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
<style>
*{ margin:0; padding:0;}
body{ background:#333;}
#box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;}
#example1,#example2,#example3,#example4,#example5{ margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box; }
</style>
<div id="box">
<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>,
document.getElementById('example1')
);
</script>
<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'),
document.getElementById('example2')
);
</script>
<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可
return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>,
//或者双括号 <CreateEl></CreateEl>
document.getElementById('example3')
);
</script>
<div id="example4"></div>
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null),
document.getElementById('example4')
);
</script>
<div id="example5"></div>
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data='5 hello' />
<World />
</h1>,
document.getElementById('example5')
);
</script>
</div>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</body>
</html>

下面给大家补充点知识：

React 术语

React Elements

代表 HTML 元素的 JavaScript 对象。这些 JavaScript 对象最后被编译成对应的 HTML 元素。

Components

封装 React Elements，包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如分页，侧栏导航等。

JSX

JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的，我们完全可以使用 JavaScript 来编写 React 应用，不过 JSX 提供了一套更为简便的方式来写 React 应用。

Virtual DOM

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。

实现React单页应用的方法详解

首先在学习这门框架前,你需要对以下知识有所了解: 1.原生JS基础 2.CSS基础 3.npm包管理基础 4.webpack构建项目基础 5.ES6规范以上五个知识点也是目前学习其他前端框架所必须了解的前置任务. JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了.而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势.至于ES6规范虽然现在主流浏览器还不兼容,但可以
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
想用好React的你必须要知道的一些事情

前言 React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架. 实现了一个虚拟 DOM,用 DOM 的方式将需要的组件秒加,用不着的秒删.本文主要给大家介绍了关于想用好React的你必须要知道的一些事情,下面话不多说,来一起看看详细的介绍: 一.容器性组件(container component)和展示性组件(presentational component) 使用React编写组件时,我们需要有意识地将组件划分为容器性组件(container component)和展示性组件
React.js入门学习第一篇

一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法
React实现双向绑定示例代码

前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数
使用React实现轮播效果组件示例代码

前言我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req
React.js入门实例教程之创建hello world 的5种方式

一.ReactJS简介 React 是近期非常热门的一个前端开发框架.React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http:
MyBatis入门实例教程之创建一个简单的程序

准备: (1) IDEA 2021 (2)Java 1.8 (3)数据库 MySQL 5.7 (SQLyog 或 Navicat) 在 MySQL 中创建数据库 mybatisdemo,编码为 utf8 新建表: USE mybatisdemo CREATE TABLE users( uid INT PRIMARY KEY AUTO_INCREMENT, uname VARCHAR(20) NOT NULL, uage INT NOT NULL ); INSERT INTO users(uid,
Vue.js快速入门实例教程

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <
ReactJS入门实例教程详解

目录一.ReactJS简介二.对ReactJS的认识及ReactJS的优点 1.ReactJS的背景和原理 2.组件化三.下载ReactJS,编写Hello,world 四.Jsx语法五.ReactJS组件 1.组件属性 2.组件状态 3.组件的生命周期 4.组件的嵌套六.ReactJS小结七.参考资料现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我
Next.js入门使用教程

目录简介创建Next.js项目手动创建Next.js项目 creact-next-app快速创建项目 Pages 路由 Link Router 参数传递与接收动态路由钩子事件获取数据 getStaticProps 构建时请求数据 getServerSideProps 每次访问时请求数据 CSS支持添加全局样式表添加组件级CSS 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架. 官网链接:www.nextjs.cn/ 优点: 零配置自动编译并打包.从一开始就
node.js入门实例helloworld详解

本文实例讲述了node.js入门实例helloworld.分享给大家供大家参考,具体如下: 将下面的代码保存为:server.js存到E盘下面的node目录中. var http = require('http'); function myNode(request, response){ response.writeHead(200, {'Content-type':'text/plain'}); response.write('hello world'); //hello world resp
react hooks入门详细教程

State Hooks 案例: import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); //count:声明的变量:setCount:改变count值的函数:0:count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => set
Python 多线程，threading模块，创建子线程的两种方式示例

本文实例讲述了Python 多线程,threading模块,创建子线程的两种方式.分享给大家供大家参考,具体如下: GIL(全局解释器锁)是C语言版本的Python解释器中专有的,GIL的存在让多线程的效率变低(哪个线程抢到锁,就执行哪个线程).在IO密集型程序中,多线程依然比单线程效率高(GIL通过IO阻塞自动切换多线程). 解决GIL(全局解释器锁)的问题的三种方法: 1.不要用C语言版本的Python解释器. 2.让子线程运行其他语言代码(例如:主线程运行Python代码,子线程运行C语言
Oracle创建Database Link的两种方式详解

创建一个dblink,命名为dblink_name,从A数据库连到B数据库,B数据库的IP为192.168.1.73,端口为1521,实例名为oracle,登录名为tast,密码为test. 一菜单方式: 打开plsql,点击[File]-[New]-[Database link],打开如下图所示窗口填好各项信息后,点击[Apply]即可完成Database Link的创建. 二SQL方式 -- Drop existing database link drop public database
详解C++ 创建文件夹的四种方式

在开头不得不吐槽一下,我要的是简单明了的创建文件夹的方式,看得那些文章给的都是复杂吧唧的一大坨代码,不仔细看鬼知道写的是啥.因此,为了方便以后自己阅读,这里自己写一下 C++ 创建文件夹的四种方式: 貌似都是 Windows 的提前说明:从参数角度上看,其实都应该使用 char*,但是为了方便这里使用的都是 string.在 SO 上找到一个方式把 string 转成 char*,就是调用 string 的 c_str() 函数. 本文示例都是在 E:\database 路径下创建一个叫做 t

React.js入门实例教程之创建hello world 的5种方式

相关推荐

随机推荐