创建React工程:React工程模板

  这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍。

这是一个小系列。都是在同一个模板中搭建的,但是代码是不能正常执行的。

>>index.js

  

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React工程模板</title>

	<!-- react.js 是React的核心库 -->
	<script src="./build/react.js charset="utf-8"></script>
	<!-- react-dom.js是作用是提供与DOM相关的功能 -->
	<script src="./build/react-dom.js" charset="utf-8"></script>
	<!-- browser.min.js 的作用是将JSCX语法转换成Javascript的语法 -->
	<script src="./build/browser.min.js" charset="utf-8"></script>
	<!-- 还可以直接通过网址引入browser.min.js文件 -->
	<!--比如: <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

</head>
<body>
	<!-- React渲染的模板内容会插入到这个DOM节点中,因此这里的<div>将作为一个容器 -->
	<div id="container">

	</div>

<!-- 在React开发中,使用JSX语法,跟Javascript不兼容,所以在使用JSX语法的地方,要设置type:text/babel -->
<!-- 而babel是一个转换编译器,它能把ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">

	<!-- 在此处编写React代码 -->

</script>

</body>
</html>

  

时间: 2024-10-28 23:53:58

创建React工程:React工程模板的相关文章

如何创建一个前端 React 组件并发布到 NPM

首先npm文档摆在这里: https://www.npmjs.cn/ 参考组件 https://github.com/rakuten-rex/rex-dropdownhttps://www.npmjs.com/package/react-slot “造轮子”是非常有效的学习方法.在熟练掌握API的搬运方法之后,我们可以通过自己“造轮子”来进一步掌握和理解更底层的知识.自己完成一个组件的开发之后,我们可以打包上传到 NPM 来分享自己的成果.在后面的步骤中,将会实现以下几个小目标: 配置开发环境

创建第一个react项目

由于新项目的缘故,接触了一下React这个 Javascript 库.下面我就简单的总结一下经验以及遇到的一些问题,希望能够帮到需要的朋友. 一.安装 Node.js. 以下是我百度云盘的分享. https://pan.baidu.com/s/1ftU3mn2jN9bnOGevMdcrDg     提取码:wow3 二.安装cnpm cmd命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 三.安装yarn cmd命

重谈react优势——react技术栈回顾

react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优势,WTF? React的收益有哪些?React的优势是什么?react和vue.angularJS等其它框架对比优势? 而作为总结回顾.react在工程实践中,带来哪些思想上的质变? virtual dom虚拟DOM概念 它并不直接对DOM进行操作,引入了一个叫做virtual dom的概念,安插

React的React Native

React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边.而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,模块化的支持似乎已成定局. 我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来. 这篇文章就给还没走在这条路上的前端一

[深入剖析React Native]React 初探

认识React React是一个用于构建用户界面的JavaScript库. React主要用于构建UI,很多人认为React是MVC中的V,即视图. React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源. React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和实用它. React特点 声明式设计 - React**采用声明范式**,可以轻松描述应用. 高效 - React通过对DOM的模拟,最大限度地减少与DOM的交互. 灵活 - R

小谈React、React Native、React Web

React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出,是觉得还有些用处). React.React Native共同特点 起源 Facebook 的内部项目 理念 Learn once, write anywhere,而不是Write once, run anywhere.简单说就是,让你在Web.Mobile原生的开发套路一样,但你还是需要写两套代

React: 研究React Redux的使用

一.简介 在上一篇的Redux文章中,详细介绍了Redux的概念和综合利用,开发者可以通过Redux的State管理系统管理整个应用程序的数据流,依靠功能完备的Store来分发Action,进而渲染和更新组件的UI.在我们之前的文章介绍中,根组件是保存State的组件,一般的Web开发,都是将State数据作为属性,从根组件向下传递给子组件,当子组件触发事件时,数据再通过回调函数的属性沿着组件树向上回到了根组件.这种数据在组件树中向上和向下传递的过程增加了程序的复杂性,于是乎,类似Redux的库

提高Intellij创建Maven工程的速度

按照默认的方式创建Maven工程的时候会发现Maven插件加载的很慢如下 解决方法:在创建的过程中,在Properties中添加一个参数archetypeCatalog=internal . 因为archetypeCatalog表示插件使用的archetype元数据,不加这个参数时默认为remote,local, 即中央仓库archetype元数据,由于中央仓库的archetype太多了,所以导致很慢,指定internal来表示仅使用内部元数据.

maven创建web工程Spring配置文件找不到问题解决方案

使用maven创建web工程,将Spring配置文件applicationContext.xml放在src/resource下,用eclipse编译时提示class path resource [applicationContext.xml] cannot be opened because it does not exist错误.但是用mvn clean package命令编译时成功的.web.xml配置的如下 <context-param><param-name>context

DuiVision开发教程(1)-创建DuiVision工程

DuiVision的源代码工程有两种类型:主程序和插件工程,可以通过人工方式创建DuiVision工程,也可以通过Visual Studio向导自动创建工程. 人工创建主程序的方法 1.创建一个基于DuiVision的界面程序是比较简单的,在VC中创建一个MFC对话框工程,注意工程要使用Unicode库: 工程创建之后,需要将默认对话框资源中的几个按钮和文字都删除,变成一个干净的对话框资源: 2.设置DuiVision的头文件和lib文件目录 将DuiVision的头文件和lib文件放在某个位置