react用脚手架创建一个react单页面项目，react起手式
官网地址：https://react.docschina.org/
确保本地安装了Node.js
node的版本大于8.10 npm的版本大于5.6
1、在本地的某个位置创建一个文件夹，执行以下代码：
npx create-react-app my-app（项目名称 可以自定义）
等待......
创建好项目后，跳转到项目跟目录：
cd my-app
然后运行项目：
npm start
弹出这个页面代表项目已经创建好了！
如何在html页面中写React代码？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react</title>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入dom库 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel将es6转换为es5语法 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head>
<body>
<!-- 写一个dom容器 -->
<div id="app"></div>
<!-- script标签记得加上 type="text/babel" 不然无法识别jsx语法 -->
<script type="text/babel">
//我们的react
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
以上就是最简单的react例子！！
下面添点油加点醋，让我这种react小白更能明白react怎么用：
在原来的基础上加点击事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react</title>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入dom库 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel将es6转换为es5语法 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head>
<body>
<!-- 写一个dom容器 -->
<div id="app"></div>
<!-- script标签记得加上 type="text/babel" 不然无法识别jsx语法 -->
<script type="text/babel">
//这里定义一个MessageBox的组件，添加个点击事件。
// render return的内容就是我们想自己想怎么改就怎么改的东东，
// ReactDom.render就把这个组件MessageBox渲染到id为app的div中啦。、
class MessageBox extends React.Component{
onClick=()=>{
alert("click");
}//注意这里不用加,逗号
render=()=>{
return (<div><h1 onClick={this.onClick}>Hello World!</h1></div>)
}
}
// 渲染MessageBox组件
ReactDOM.render(
<MessageBox/>,
document.getElementById("app")
) </script>
</body>
</html>
要注意的是，这里使用了ES6的写法，为什么呢，因为React已经摒弃了ES5的写法，全力拥抱了ES6。比如：我们创建一个叫Message的组件：
ES5:
var Message = React.createClass({
render: return (<h1>hello</h1>)
})
ES6:
class MessageBox extends React.Component{
render = ()=> <h1>hello</h1>
}
这种ES5的写法未来可能会不受支持啦，多学学新东西有好处，什么箭头函数啊、let、const等等，这里render的return都可以省了。
我们已经定义好了一个组件，而且ReactDom.render只能渲染一个组件，那么多个组件怎么用呢，我们需要把其他组件放到前面的那个组件中去。这里创建了一个组件TimeNow来显示时间，具体内容可以不用管，在MessageBox中的render中，把组件TimeNow放进去就OK。（<div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div>）。
注：
1、render的return只能返回闭合的一个节点，如<div></div>，不能返回<div></div><div></div>这种结构。所以这里在原来的组件中加了一层包裹的div。
2、我们将两个组件定义在了一个地方，但我们一般的操作流程会将不同组件放在不同的文件中，尤其是大的项目，这种最简模式就存在局限，React 文档上也有注明：Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP. 所以在最简模式上直接引入组件文件是行不通的，而是需要服务器环境。解决方法是开一个本地服务器（比如 Apache），这就有点麻烦了，不如使用create-react-app脚手架创建一个项目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react</title>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入dom库 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel将es6转换为es5语法 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head>
<body>
<div id="app"></div>
<script type="text/babel">
class TimeNow extends React.Component{
constructor(){
super();
this.state={
time:""
}
}
componentDidMount=()=>{
setInterval(()=>{
var time=new Date().toLocaleString();
this.setState({
time
})
},1000)
}
render=()=>{
const {time} = this.state;
return <div>时间：{time}</div>
}
} class MessageBox extends React.Component{
onClick=()=>{
alert("click");
}
render=()=>{
return (<div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow/></div>)
}
} ReactDOM.render(
<MessageBox/>,
document.getElementById("app")
)
</script>
</body>
</html>
效果：
react用脚手架创建一个react单页面项目，react起手式的更多相关文章
- 创建一个vue单页面应用
最最开始是要安装cli3 1.npm install -g @vue/cli 2.npm install -g @vue/cli-service-global 然后是创建单页面应用si ...
- 应用脚手架创建一个React项目
安装脚手架,这里会自动安装到你的nodejs里面 npm install create-react-app -g 进入创建目录 我这里创建一个为 react03的项目,等待下载..... create ...
- 开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作
JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...
- 简单创建一个SpringCloud2021.0.3项目（二）
目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上一篇教程 3. 创建公共模块Common 4. 网关Gateway 1. 创建Security 2. Security登陆配置 3 ...
- 创建一个简单的Django项目
1.首先,启动pycharm,点击File->New Project,如下图所示. 2.在New Project对话框中,选择Django,在Location中设置项目路径以及项目名称,在App ...
- 简单创建一个SpringCloud2021.0.3项目（一）
目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 新建父模块和注册中心 1. 新建父模块 2. 新建注册中心Eureka 3. 新建配置中心Config 4. 新建两个业务服务 1. ...
- 通过beego快速创建一个Restful风格API项目及API文档自动化
通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...
- 以sb7code为基础创建一个基本的OpenGL项目
以sb7code为基础创建一个基本的OpenGL项目 从github上面下载sb7code代码: https://github.com/openglsuperbible/sb7code 打开H ...
- 通过beego快速创建一个Restful风格API项目及API文档自动化(转)
通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...
随机推荐
- NETRemoting学习笔记
1..NET Remoting概念 1.一种分布式处理方式.从字面意义上看出,他是基于.net平台的一种远程对象开发技术,该技术是将远程计算机中的数据视为分布式对象来进行开发. 2.一种网络通信技术. ...
- python 4. path的定义及参数，re_path
path定义 path函数的定义为:path(route,view,name=None,kwargs=None) 可以查看官方文档 → 官方文档,下面是取自官方文档关于path的参数 函数 path( ...
- 什么是SAP Intelligent Robitic Process Automation - iRPA
所谓智慧企业,一个特征就是具备将复杂但低附加值的重复流程通过自动化的方式完成的能力.通过自动化,从而将宝贵的人力资源投入到更高附加值的工作中去,比如提供产品和服务的品质,提升用户体验.SAPGUI时代 ...
- hbase完整分布式集群搭建
简介: hadoop的单机,伪分布式,分布式安装 hadoop2.8 集群 1 (伪分布式搭建 hadoop2.8 ha 集群搭建 hbase完整分布式集群搭建 hadoop完整集群遇到问题汇总 Hb ...
- k8s之volume
pause容器为基础架构容器,每一个节点都有一个pause镜像, 为每一个pod提供底层基础支撑设备,所有pod中容器会共享此容器的网络空间,存储卷也是 还可使用csi,存储插件. 使用存储卷步骤1. ...
- MySQL创建用户和加限权
目录 1.权限管理 1.1对新用户增删改 1.2对当前的用户授权管理 1.权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete ...
- Python的插件化开发概述
Python的插件化开发概述 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.插件化开发 动态导入: 运行时,根据用户需求(提供字符串),找到模块的资源动态加载起来. 1> ...
- web页面死链测试方法
一.概述 > 来自百度百科释义 死链:指服务器的地址已经改变了．无法找到当前地址位置,包括协议死链和内容死链两种形式.死链出现的原因有网站服务器设置错误:某文件夹名称修改,路径错误链接变成死链等 ...
- python2+robotframework环境搭建
目前robotframework-ride只支持python3,没办法,只能用python2.好吧 python安装不多说,太简单,下载后直接安装,然后配置两个文件路径:path:E:\mytest\ ...
- Maven之setting.xml 配置详解
文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...