react网站模板（react 模板）

本文目录一览：

• 1、开箱即用的React前端框架——ReactAdmin
• 2、如何在jsp页面中使用react
• 3、使用React创建Wordpress博客
• 4、如何用reactjs构建一个完整的前端页面

开箱即用的React前端框架——ReactAdmin

ReactAdmin是一个Github上免费开源的前端框架（不是组件库，也不是模板，它是一个框架），采用es6、React和Material Design构建基于Rest/GraphQl API的Web应用程序。在React上star数超过8k。

ReactAdmin不是个UI组件库，它是一个前端框架，因此你基本上基本上只要按照官网的文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，意识就是都给你集成好了。

你可以直接使用以下命令进行安装（这是安装react-admin及所有的依赖）

下面我们看一下官网提供的一个最简单的示例，你可以在它的主仓库中获取

我们进入到simple中，大致看一下代码和目录结构

我们安装一些依赖然后启动

成功后打开浏览器，这是使用react-admin最简单的一个例子

一图了解

由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。

ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！

如何在jsp页面中使用react

用reactjs构建一个完整的前端页面的步骤：

准备：React 的安装包，建议去安装

1、使用 React 的网页源码，结构大致如下：

!DOCTYPE htmlhtml head script src="../build/react.js"/script script src="../build/react-dom.js"/script script src="../build/browser.min.js"/script /head body div id="example"/div script type="text/babel" // **用户代码 ** /script /body/html

上面代码有两个地方需要注意。

首先，最后一个 script 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。

$ babel src --out-dir build

3、渲染转换成html节点，以方便操作dom：

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

这里以插入hello world为例来说明

ReactDOM.render( h1Hello, world!/h1, document.getElementById('example'));

4、运行结果。

使用React创建Wordpress博客

==wp rest api：

1.安装phpStudy和wordpress

2.phpStudy站点域名设置和hosts内容添加

3.wordpress安装wp rest api插件

给浏览器安装json-handler插件 ，这样获取的json格式能在浏览器当中自动换行显示

==redux：

三大块： action、reducer、store，它们都是相应的函数处理模块，三者的顺序为先action，然后reducer，最后store。

action： 返回一个对象给 reducer ，触发动作

reducer： 处理接受 action 传递过来的东西

store： 接收 reducer 传递过来的东西，其相当于一个仓库，把网站的所有数据都储存在里面

==各部分组件机构：

组件模板：

==moment的用法（import moment form 'moment' ）：

如何用reactjs构建一个完整的前端页面

用reactjs构建一个完整的前端页面的步骤：

准备：React 的安装包，建议去官网下载安装

1、使用 React 的网页源码，结构大致如下：

!DOCTYPE htmlhtml  head    script src="../build/react.js"/script    script src="../build/react-dom.js"/script    script src="../build/browser.min.js"/script  /head  body    div id="example"/div    script type="text/babel"      // **用户代码 **   /script  /body/html

上面代码有两个地方需要注意。

首先，最后一个 script 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。

$ babel src --out-dir build

3、渲染转换成html节点，以方便操作dom：

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

这里以插入hello world为例来说明

ReactDOM.render(  h1Hello, world!/h1,  document.getElementById('example'));

4、运行结果如下：

关于react网站模板和react 模板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。