官网地址: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起手式的更多相关文章

  1. 创建一个vue单页面应用

      最最开始是要安装cli3  1.npm install -g @vue/cli      2.npm install -g @vue/cli-service-global 然后是创建单页面应用si ...

  2. 应用脚手架创建一个React项目

    安装脚手架,这里会自动安装到你的nodejs里面 npm install create-react-app -g 进入创建目录 我这里创建一个为 react03的项目,等待下载..... create ...

  3. 开发日志系列:一个表单页面的呈现与提交(一)——JSON的操作

    JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...

  4. 简单创建一个SpringCloud2021.0.3项目(二)

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上一篇教程 3. 创建公共模块Common 4. 网关Gateway 1. 创建Security 2. Security登陆配置 3 ...

  5. 创建一个简单的Django项目

    1.首先,启动pycharm,点击File->New Project,如下图所示. 2.在New Project对话框中,选择Django,在Location中设置项目路径以及项目名称,在App ...

  6. 简单创建一个SpringCloud2021.0.3项目(一)

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 新建父模块和注册中心 1. 新建父模块 2. 新建注册中心Eureka 3. 新建配置中心Config 4. 新建两个业务服务 1. ...

  7. 通过beego快速创建一个Restful风格API项目及API文档自动化

    通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...

  8. 以sb7code为基础创建一个基本的OpenGL项目

      以sb7code为基础创建一个基本的OpenGL项目   从github上面下载sb7code代码: https://github.com/openglsuperbible/sb7code 打开H ...

  9. 通过beego快速创建一个Restful风格API项目及API文档自动化(转)

    通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...

随机推荐

  1. C# vb .net实现负片特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的负片特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  2. 重新学习Spring一--Spring在web项目中的启动过程

    1 Spring 在web项目中的启动过程 Spring简介 Spring 最简单的功能就是创建对象和管理这些对象间的依赖关系,实现高内聚.低耦合.(高内聚:相关性很强的代码组成,既单一责任原则:低耦 ...

  3. CGContextRef&CGMutablePathRef&UIBezierPath简单学习

    简单的四句介绍 Quartz是一个二维绘图引擎,使用的是CoreGraphics库,同时支持iOS和Mac系统 CGContextRef:获取图形上下文.或者叫作用域,即画布,他是专门用来保存绘画期间 ...

  4. 【开发笔记】- SSM使用velocity模板语言

    1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...

  5. Java 数组实例——实现棋盘落子

    五子棋.连连看.俄罗斯方块.扫雷等常见小游戏,都可以通过二维数组实现. 棋盘落子效果图: 源码: package my_package; import java.io.BufferedReader; ...

  6. Java 缓存实例

    重复创建相同的对象没有太大的意义,反而加大了系统开销,某些情况下,可以缓存该类的实例,实现复用. 实现缓存实例:定义一个private static成员变量存储类的实例(多个可用数组)先检测上面的成员 ...

  7. SVN 报错 Can't install '*' from pristine store, because no checksum is recorded for this file

    SVN同步.cleanup都会出现下面的提示: svn: E155017: Can't install '*' from pristine store, because no checksum is ...

  8. 源码解析-url状态检测神器ping-url

    前言 ping-url是我最近开源的一个小工具,这篇文章也是专门写它设计理念的科普文. 为什么会做这个ping-url开源工具呢? 起因是:本小哥在某天接到一个特殊的需求,要用前端的方式判断任意一个u ...

  9. Linq 等式运算符:SequenceEqual(转载)

    https://www.bbsmax.com/A/nAJvbKywJr/ 引用类型比较的是引用,需要自己实现IEqualityComparer 比较器. IList<string> str ...

  10. equals与hashCode

    当我们需要将自己的类存入HashMap或HashSet时一般都要重写其equals与hashCode方法,但在重写时要符合规范否则会出问题. 1.equals方法 首先equals方法需要满足如下几点 ...