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

可以安装一个ATOM编辑器，本人觉得很好用

一、安装并启动项目:网址

 搭建好的项目目录为：

二、开始写项目：

1.组件到界面流程：

定义一个组件app.js导出------->index.js获取app.js组件------->渲染到index.html中

1.组件：app.js

  1. import React, { Component } from 'react';
  2.  
  3. class App extends React.Component{
  4.     render(){
  5.         return (<div>这是一个组件</div>);
  6.     }
  7. }
  8. export default  App;

1）组件的return函数里返回的HTML节点必须是一个

2）定义一个组件的方式ES6语法：

  1. class APP extends React.Component{......}

也可以使用React.creactClass({})

3)可以给外部使用的组件：使用 export default 导出组件

  1. export default class APP extends React.Component{......}

或者是

  1. class App extends React.Component{
  2.     render(){
  3.         return (<div>这是一个组件</div>);
  4.     }
  5. }
  6. export default  App;

2.入口的定义：index.js文件

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import App from './App';
  4.  
  5. ReactDOM.render(<App />, document.getElementById('root'));

3.页面：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <meta name="theme-color" content="#000000">
  7.     <title>React App</title>
  8.   </head>
  9.   <body>
  10.     <div id="root"></div>
  11.   </body>
  12. </html>

 

2.同时渲染多个组件的写法：

3.代码初始化和this.state的使用:

4.父页面向子页面传递参数：

5.子组件向父页面传递参数：

6.从onClick点击事件中向函数传递参数的方式：

7.表单验证使用propTypes属性

注意：react15.5.0版本以后废除了这个属性，要想使用这个属性在组件中必须引入propTyps：

  1. import PropTypes from 'prop-types'

可以在package.json中查看react的版本号；

具体写法:

15.5.0以后版本写法为：必须导入propTypes包

  1. isRequired表示：是一个必须传入的参数
  1. import PropTypes from 'prop-types'
  2.  
  3. 组件名.propTypes = {
  4.    name: PropTypes.string.isRequired
  5. }

15.5.0以前的写法：不需要导入proptypes包

  1. 组件名.propTypes = {
  2.    name: React.PropTypes.string.isRequired,
  3. };

8、给组件定义默认的参数使用：defaultProps

如果父页面中传递的参数会覆盖默认参数

9、爷爷向孙子页面传递参数：

10、组件的Refs:从组件获取真实的DOM

方法的定义：<input ref="myInput" />

方法的获取：this.refs.myInput

Refs是访问到组件内部DOM节点唯一可靠的方法

Refs会自动销毁对子组件的引用

不要再render或render之前对Refs进行调用

不要滥用Refs

具体用法如下：

11、独立组件间共享：Mixin

不同的组件间共用功能，共享代码

和页面具有类似的生命周期

cmd中安装Mixin的命令：

  1. npm install --save react-mixin

在文件中导入包:import ReactMixin from 'react-mixin';

12、样式：

1)内联样式的写法：

2）内联样式中的表达式：

3)外部引用css文件：

13.react-router 4的使用方法：参考网站

安装react-router:默认安装4.0.0以上版本：

  1. npm install --save react-router

1）react-router 中默认加载一个页面App.js

2)Link的使用方法:

Router标签一定要包住return中的所有的标签才不会报错

3)Link传参及获取参数：

14、Ant Design插件的使用:网址

移动端网址

安装命令：

  1. cnpm install antd --save

注意：如果安装完antd后，出现编译错误，使用如下方法解决：

1）把项目中的node_modeules删除

2) 执行npm install重新加载包

15.新闻类接口：

  1. https://www.juhe.cn/docs/api/id/235

 16.免费图标使用网站：

  1. https://www.iconfinder.com/

17.导入本地图片的方法：

18、react-responsive插件的使用：自适应插件

  1. https://github.com/contra/react-responsive

 19、fetch网址:ajax ,json:

安装命令：

  1. 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. java 定时器任务模板

    1.该定时任务是基于web.xml的监听机制 listener 来实现的 建立监听类: NFDFlightDataTaskListener.java import javax.servlet.Serv ...

  2. 支持移动触摸的jQuery图片Lightbox插件

    简介 这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件.该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用.它的特点还有: 响应 ...

  3. JSONEncoder

    A flat implementation You could use something like this: from sqlalchemy.ext.declarative import Decl ...

  4. cnblogs正式启用

    额,因为最近发现CSDN越来越过分了...现在连数学公式都显示错字体了--于是决定把博客搬至cnblogs. Markdown 测试 \(\frac{-b\pm \sqrt{b^2-4ac}}{2a} ...

  5. 02017_String类方法使用练习

    1.获取指定字符串中,大写字母.小写字母.数字的个数. public static void method(String str){ int bigCount = 0; //大写字母的个数 int s ...

  6. Appendix B: Netsh Command Syntax for the Netsh Firewall Context

    11 out of 19 rated this helpful - Rate this topic Published: December 17, 2004 The following Netsh c ...

  7. 学习Mockito - Mockito对Annotation的支持

    学习Mockito - Mockito对Annotation的支持 博客分类: test junit工作  Mockito支持对变量进行注解,例如将mock对象设为测试类的属性,然后通过注解的方式@M ...

  8. uva 1555 Garland

    题意:有n个灯笼.第一个的高度是A,最后一个是B.灯笼的关系给出.并要求每一个灯笼的高度是非负数的.求最低的B 思路:推出公式:H[i]=2*H[i-1]+2-H[i-2],然后枚举H[2],在知道H ...

  9. C语言之基本算法41—字符串匹配问题

    //字符串匹配问题 /* =============================================================== 题目:输入两字符串S,T,输出在S中存在但在T ...

  10. luogu1920 成功密码

    题目大意:给出x∈(0,1)以及n∈(0,1e18),求sum foreach i(1<=i<=n) (x^i/i)保留四位小数的值. 用快速幂暴力求.考虑到题目只要求保留四位小数,而随着 ...