建议:初学者看之前请先看一遍菜鸟教程

可以安装一个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从安装到实战的更多相关文章

  1. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  2. 运维监控-Open-Falcon安装Agent实战篇

    运维监控-Open-Falcon安装Agent实战篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文参考链接来自:http://book.open-falcon.org/zh/ ...

  3. React.js 入门与实战课程思维导图

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...

  4. 王家林系列之scala--第69讲:Scala并发编程react、loop代码实战详解

    刚才看了一下,群里王家林老师又更新课程了,真为王老师的勤奋感到佩服,于是迫不及待的下载下来观看学习.本期讲的是关于scala并发编程的react.loop代码实战. 信息来源于 DT大数据梦工厂微信公 ...

  5. keepalived安装配置实战心得(实现高可用保证网络服务不间断)

    keepalived安装配置实战心得(实现高可用保证网络服务不间断) 一.准备2台虚拟机     安装的系统是:centos-release-7-1.1503.el7.centos.2.8.x86_6 ...

  6. React Native移动开发实战-5-Android平台的调试技巧

    Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...

  7. React Native移动开发实战-4-Android平台的适配原理

    打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...

  8. React Native移动开发实战-3-实现页面间的数据传递

    React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...

  9. React Native移动开发实战-2-如何调试React Native项目

    在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...

随机推荐

  1. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  2. BZOJ 3329 Xorequ (数位DP、矩阵乘法)

    手动博客搬家: 本文发表于20181105 23:18:54, 原地址https://blog.csdn.net/suncongbo/article/details/83758728 题目链接 htt ...

  3. 哈哈,找到一种方式来简单模拟EXTJS中与服务器的AJAX交互啦。

    一直在测试客户端的EXTJS,但遇到服务器端就麻烦了,要建库,要写JSON,要有HTTP返回值. 今天测试了一个简单的方法,经过测试是OK了. 那,就是Python的SimpleHTTPServer模 ...

  4. G - Balanced Lineup

    G - Balanced Lineup POJ - 3264 思路:水题,线段树的基本操作即可. #include<cstdio> #include<cstring> #inc ...

  5. 使用Android Studio 1.3 版本号进行NDK开发

    众所周知Android Studio 1.3 版本号新增了NDK支持,能够非常方便的在上面开发C++或者C代码了,但是预览版功能不是非常完好,须要非常多步骤,另一些奇怪的BUG,整了半天最终能够使用A ...

  6. 命令行使用Eclipse的debug签名失败“找不到 xx.keystore证书链”

    1.debug签名位置 2.查看debug.keystore具体信息 3.使用命令行签名 注意:debug签名password为android 4.出错原因是签名的别名写错,应为androiddebu ...

  7. UVA 10888 - Warehouse(二分图完美匹配)

    UVA 10888 - Warehouse option=com_onlinejudge&Itemid=8&page=show_problem&category=562& ...

  8. Codeforces Round #349 (Div. 2) D. World Tour 暴力最短路

    D. World Tour   A famous sculptor Cicasso goes to a world tour! Well, it is not actually a world-wid ...

  9. Android之UtilsRequesServicetHelp工具类

    package com.example.getnetutil; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; ...

  10. luogu2714 四元组统计 莫比乌斯反演 组合数

    题目大意 给出一段序列,求其中最大公约数为1的四元组的个数. 思路 我们要用到反演.正难则反的思想.对于每一个大于1的数字\(x\),求出最大公约数为\(x\)的四元组的个数\(g(x)\),然后用排 ...