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

可以安装一个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. 渗透实战（周三）：Ettercap·ARP毒化&MITM中间人攻击

    今天,我们来讲解如何对小型Wi-Fi局域网发动网络攻击

  2. （18）使用模板（thymeleaf-freemarker）【从零开始学Spring Boot】

    整体步骤: (1)            在pom.xml中引入thymeleaf; (2)            如何关闭thymeleaf缓存 (3)            编写模板文件.html ...

  3. java陷阱之spring事物管理导致锁无效

    模拟锁情况无效 1.创建一个表 SET NAMES utf8mb4; ; DROP TABLE IF EXISTS `demo`; CREATE TABLE `demo` ( `id` ) NOT N ...

  4. 洛谷 P2813 母舰

    题目描述 在小A的星际大战游戏中,一艘强力的母舰往往决定了一场战争的胜负.一艘母舰的攻击力是普通的MA(Mobile Armor)无法比较的. 对于一艘母舰而言,它是由若干个攻击系统和若干个防御系统组 ...

  5. cogs 9. 中心台站建设。。。

    9. 中心台站建设 ★★☆   输入文件:zpj.in   输出文件:zpj.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     n个城市之间有通讯网络,从这n个城 ...

  6. 手把手实现Java权限(1)-Shiro介绍

    功能介绍 Authentication :身份认证/登录.验证用户是不是拥有对应的身份:  Authorization :授权,即权限验证.验证某个已认证的用户是否拥有某个权限:即推断用  户能否做事 ...

  7. POJ 1066

    由于到达点时不能绕墙,因为这是无意义的,所以,两点间的最小墙依然是按照直线所穿过的墙计算. #include <iostream> #include <cstdio> #inc ...

  8. IntelliJ IDEA测试学习网站

    IntelliJ IDEA测试学习网站 http://idea.lanyus.com/  嗯,请支持正版:

  9. PHP之实现双向链表（代码篇）

    <?php/** * PHP之实现双向链表 */class Hero{ public $pre=null; public $no; public $name; public $next=null ...

  10. Running the app on your device

    So far, you've run the app on the Simulator. That's nice and all but probably notwhy you're learning ...