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选项 ...
随机推荐
- 使用pm2启动nodejs+express+mysql管理系统步骤
背景: 由于个人兴趣,了解了一下nodejs+express+mysql项目.在项目搭建完成并开发完成并部署时,遇到一个尴尬的问题,就是后台的servive服务启动问题.日常开发时,打开2个cm窗口, ...
- ThinkPHP5.0 模型查询操作
1.获取单个数据 //取出主键为1的数据 $user = User::get(1); echo $user->name; // 使用数组查询 $user = User::get(['name' ...
- js获取数组中任意一项
1.获取数组任一项 在一些实际应用场景中,会要求实现一个随机的需求,随机获取某一项,来展示出来,都知道要通过javaScript的Math.random()方法来实现,这里我在Array的原型上添加了 ...
- 0419如何利用关系角度看待SQL
转自http://www.open-open.com/solution/view/1389339225820 十步完全理解SQL 1. SQL 是一种声明式语言 首先要把这个概念记在脑中:“声明” ...
- 通过PYTHON操作JIRA的COMMENT注释和TRANSITION工作流
这是目前我们的自动化部署系统要作的,所以先实现吧. >>> from jira import JIRA >>> authed_jira = JIRA(server= ...
- 【ACM】hdu_1862_EXCEL排序_201308091948
EXCEL排序 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- 【ACM】hdu_1234_开门人和关门人_201307300845
开门人和关门人Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- vs code--使用教程
这是Cnode论坛上的i5ting写的,很详细 教程地址 这个是微软官方的英文版的教程,这个更详细一些 微软官方vs code教程
- [bzoj4196][Noi2015]软件包管理器_树链剖分_线段树
软件包管理器 bzoj-4196 Noi-2015 题目大意:Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件 ...
- atomikos实现多数据源支持分布式事务管理（spring、tomcat、JTA）
原文链接:http://iteye.blog.163.com/blog/static/1863080962012102945116222/ Atomikos TransactionsEssenti ...