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的界 ...
随机推荐
- docker容器的使用整理
2019/10/24, docker 19.03.4 摘要:docker容器常用命令整理 gitbooks文档 docker脚本安装 使用官方脚本安装docker,从阿里云下载: curl -fsSL ...
- 在ASP.NET MVC中加载部分视图的方法及差别
在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. ...
- Java自学-数组 增强型for循环
Java 中如何使用增强for循环 增强型for循环在遍历一个数组的时候会更加快捷 步骤 1 : 增强型for循环 注:增强型for循环只能用来取值,却不能用来修改数组里的值 public class ...
- selenium 定位元素方法
1.通过id定位元素 写法1: element = driver.find_element_by_id("kw") 写法2: from selenium.webdriver.com ...
- form组件 初始化
class MyForm(Form): user = fields.ChoiceField( # choices=((1, '上海'), (2, '北京'),), initial=2, widget= ...
- VMware 设置虚拟机Centos 上网的两种方式
能在VMware上面安装虚拟机,不可能说是不让链接外网,只是在自己电脑上玩玩就可以了.因为学习需要,经常在自己笔记本上面搭建虚拟机,我经常使用的两种上网方式 一 NET方式上网 设置VMware Ne ...
- 六、Linux_SSH服务器状态
一.保持Xshell连接Linux服务器状态 1.登录服务器后 cd /etc/ssh/ vim sshd_config 找到 ClientAliveInterval 0和ClientAliveCou ...
- ITIL 4Foundation认证
2019年5月参加了ITIL 4Foundation培训和认证.最新的ITIL4版本中,结合了Lean.Agile和DevOps的思想.经过学习后,在思想上有很大的收货. 在此记录自己的成长.
- HDU4548美素数——筛选法与空间换时间
对于数论的学习比较的碎片化,所以开了一篇随笔来记录一下学习中遇到的一些坑,主要通过题目来讲解 本题围绕:素数筛选法与空间换时间 HDU4548美素数 题目描述 小明对数的研究比较热爱,一谈到数,脑子里 ...
- JMeter+Maven+CSV数据驱动
1.整个工程的目录结构: 2.工程说明: # ddcapitest XXX_API自动化测试 # 一.文件说明: 1. ddcapitest/src/是工程的入口 ddcapitest/pom.xml ...