React从安装到实战
建议：初学者看之前请先看一遍菜鸟教程
可以安装一个ATOM编辑器，本人觉得很好用
一、安装并启动项目:网址
搭建好的项目目录为：
二、开始写项目：
1.组件到界面流程：
定义一个组件app.js导出------->index.js获取app.js组件------->渲染到index.html中
1.组件：app.js
import React, { Component } from 'react';
class App extends React.Component{
render(){
return (<div>这是一个组件</div>);
}
}
export default App;
1）组件的return函数里返回的HTML节点必须是一个
2）定义一个组件的方式ES6语法：
class APP extends React.Component{......}
也可以使用React.creactClass({})
3)可以给外部使用的组件：使用 export default 导出组件
export default class APP extends React.Component{......}
或者是
class App extends React.Component{
render(){
return (<div>这是一个组件</div>);
}
}
export default App;
2.入口的定义：index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
3.页面：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2.同时渲染多个组件的写法：
3.代码初始化和this.state的使用:
4.父页面向子页面传递参数：
5.子组件向父页面传递参数：
6.从onClick点击事件中向函数传递参数的方式：
7.表单验证使用propTypes属性
注意：react15.5.0版本以后废除了这个属性，要想使用这个属性在组件中必须引入propTyps：
import PropTypes from 'prop-types'
可以在package.json中查看react的版本号；
具体写法:
15.5.0以后版本写法为：必须导入propTypes包
isRequired表示：是一个必须传入的参数import PropTypes from 'prop-types'
组件名.propTypes = {
name: PropTypes.string.isRequired
}
15.5.0以前的写法：不需要导入proptypes包
组件名.propTypes = {
name: React.PropTypes.string.isRequired,
};
8、给组件定义默认的参数使用：defaultProps
如果父页面中传递的参数会覆盖默认参数
9、爷爷向孙子页面传递参数：
10、组件的Refs:从组件获取真实的DOM
方法的定义：<input ref="myInput" />
方法的获取：this.refs.myInput
Refs是访问到组件内部DOM节点唯一可靠的方法
Refs会自动销毁对子组件的引用
不要再render或render之前对Refs进行调用
不要滥用Refs
具体用法如下：
11、独立组件间共享：Mixin
不同的组件间共用功能，共享代码
和页面具有类似的生命周期
cmd中安装Mixin的命令：
npm install --save react-mixin
在文件中导入包:import ReactMixin from 'react-mixin';
12、样式：
1)内联样式的写法：
2）内联样式中的表达式：
3)外部引用css文件：
13.react-router 4的使用方法：参考网站
安装react-router:默认安装4.0.0以上版本：
npm install --save react-router
1）react-router 中默认加载一个页面App.js
2)Link的使用方法:
Router标签一定要包住return中的所有的标签才不会报错
3)Link传参及获取参数：
14、Ant Design插件的使用:网址
安装命令：
cnpm install antd --save
注意：如果安装完antd后，出现编译错误，使用如下方法解决：
1）把项目中的node_modeules删除
2) 执行npm install重新加载包
15.新闻类接口：
https://www.juhe.cn/docs/api/id/235
16.免费图标使用网站：
https://www.iconfinder.com/
17.导入本地图片的方法：
18、react-responsive插件的使用：自适应插件
https://github.com/contra/react-responsive
19、fetch网址:ajax ,json:
安装命令：
npm install fetch --save
React从安装到实战的更多相关文章
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- 运维监控-Open-Falcon安装Agent实战篇
运维监控-Open-Falcon安装Agent实战篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文参考链接来自:http://book.open-falcon.org/zh/ ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- 王家林系列之scala--第69讲：Scala并发编程react、loop代码实战详解
刚才看了一下,群里王家林老师又更新课程了,真为王老师的勤奋感到佩服,于是迫不及待的下载下来观看学习.本期讲的是关于scala并发编程的react.loop代码实战. 信息来源于 DT大数据梦工厂微信公 ...
- keepalived安装配置实战心得(实现高可用保证网络服务不间断)
keepalived安装配置实战心得(实现高可用保证网络服务不间断) 一.准备2台虚拟机 安装的系统是:centos-release-7-1.1503.el7.centos.2.8.x86_6 ...
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
随机推荐
- 09.正则表达式re-3.常用的匹配规则
模式 描述 \w 匹配字母.数字及下划线 \W 匹配不是字母.数字及下划线的字符 \s 匹配任意空白字符,等价于[\t\n\r\f] \S 匹配任意非空字符 \d 匹配任意数字,等价于[0-9] \D ...
- html_entity_decode()、空格、 乱码问题
普通 ASCII 码空格为 32,但是浏览器会对普通空格进行自动归并,也就是如果你输入10个 0x20 的空格在HTML页面里面,可能会被合并成一个空格. 如果想要一致的呈现多个空格,就要用到 编码标 ...
- matplotlib的annotate用法小结
这个是matplotlib自定义的annotate方法的文本: 一. def annotate(self, s, xy, *args, **kwargs): a = mtext.Annotation( ...
- vue中的slot理解和使用
最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...
- poj 1466 最大独立集
#include<stdio.h> #include<string.h>//这个分开后男的站在一边女的站在一边,不肯能有les或者gay.最大独立集=n-最大匹配数 #defi ...
- 0708关于理解mysql SQL执行顺序
转自 http://www.jellythink.com/archives/924,博客比价清晰 我理解上文的是SQL执行顺序 总体方案.当你加入索引了以后,其实他的执行计划是有细微的变化,比方说刚开 ...
- Redis参数
phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: Redis::__construct构造函数$redis ...
- 【VC编程技巧】窗口☞3.6以渐变效果加载对话框
平时我们常常能够看到非常多应用程序启动过程非常酷.什么百叶窗.渐变,各种效果,今天我们看一下怎样在程序中添加这样的效果. 一.演示样例展示: watermark/2/text/aHR0cDovL2Js ...
- 使用 F# 列表
使用 F# 列表 在 C# 中使用 F# 的列表,是全然可能的,可是,我建议不要用,由于,仅仅要再做一点,就会使事情在 C# 看来更加自然.比如,把列表转换成数组非常easy.用List.toArra ...
- ZOJ2724_Windows Message Queue(STL/优先队列)
解题报告 题意: 看输入输出就非常明确. 思路: 优先队列. #include <algorithm> #include <iostream> #include <cst ...