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的界 ...
随机推荐
- .NET-异步操作
感觉可以用于log日志的东西,这个东西他还是会走的但是不会影响你下一步的操作,你下一步还是正常怎么操作就怎么操作! 这样可以给用户免掉一些没必要的等待. static void Main(string ...
- .Net Core WebApi(2)—Swagger
上一个版本的入门Swagger提示不够完整,这章着重完善和优化 Swagger用于将我们编写的接口自动生成规范化的文档,便于进行测试和对接 一.创建Swagger 1.1 Nuget 安装 ...
- Angular中ViewChild\ngAfterViewInit\Promise的使用，在父组件初始化时等待子组件的返回值
1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...
- Filter DSL 常用语法 -- 基本查询语法，必会
转发自:https://www.cnblogs.com/ghj1976/p/5293250.html term 过滤 term主要用于精确匹配哪些值,比如数字,日期,布尔值或 not_analyzed ...
- js中cssText批量修改元素样式
平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...
- 使用MUI框架实现JQ购物车增减
// 购物车数量减少$('.reduce').click(function () { addMinus(this,0)}); // 购物车数量增加$('.increase').click(functi ...
- 【vue】vue生命周期---精简易懂-----【XUEBIG】
主要的生命周期函数分类: - 创建期间的生命周期函数:(只会调用一次) + beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属 ...
- Celery：Monitor
参考文档:http://docs.celeryproject.org/en/latest/userguide/monitoring.html#guide-monitoring
- (二)分布式数据库tidb-事务
tidb既然是分布式数据库,所以它的事务应该可其它数据库事务有着不同的区别.我们来了解下tidb的数据库事务. (一)事物 1.几种数据库的默认隔离级别: tidb是乐观锁 (二)事务语句 TiDB ...
- 异常详细信息: System.MissingMethodException: 无法创建抽象类。
asp.net mvc 在使用post向后端传送json数据时报异常,在路由配置中添加如下即可 public static void RegisterRoutes(RouteCollection ro ...