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的界 ...
随机推荐
- GO实现Cron解析和定时任务
Go的Cron表达式解析库:github.com/gorhill/cronexpr 核心类型和方法 // 表达式对象 expr *cronexpr.Expression // 解析cron表达式 ex ...
- 如何给SAP云平台购买的账号分配Process Integration服务
在云平台控制台里,给global Account分配Integration Suite下面的Process Integration的API和Runtime两种服务: Process Integrati ...
- Combox控件绑定大量数据卡顿问题与解决办法
一般我们WPF中Combox的绑定都是下面这种写法. XAML: <ComboBox IsEditable="False" ItemsSource="{Bindin ...
- linux修改当前用户环境变量永久生效
在linux环境中,修改当前用户环境变量,且永久生效的方法如下. 1,编辑~/.bash_profile文件 1 2 3 # Get the aliases and functions 4 if [ ...
- 通过request获取服务器相对路径及绝对路径
一. String scheme = request.getScheme();//http String serverName = request.getServerName();//localhos ...
- golang方法和接口
一． go方法 go方法:在函数的func和函数名间增加一个特殊的接收器类型,接收器可以是结构体类型或非结构体类型.接收器可以在方法内部访问.创建一个接收器类型为Type的methodName方法. ...
- mysqdump+binlog恢复数据
备份全库 [root@db01 b]# mysqldump -uroot -poldboy123 -A > /b/full.sql Warning: Using a password on th ...
- OpenStack云计算简介
1. 云计算的发展 云计算是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. IT系统架构的发展到目前为止大致可以分为3个阶段: 1> 物理机架构 这一阶段,应用部 ...
- 用java刷剑指offer(数组中只出现一次的数字)
题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 牛客网链接 思路 链接:https://www.nowcoder.com/questionTer ...
- 攻击链路识别——CAPEC（共享攻击模式的公共标准）、MAEC（恶意软件行为特征）和ATT&CK（APT攻击链路上的子场景非常细）
结合知识图谱对网络威胁建模分析,并兼容MITRE组织的CAPEC(共享攻击模式的公共标准).MAEC和ATT&CK(APT攻击链路上的子场景非常细)等模型的接入,并从情报中提取关键信息对知识图 ...