Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

跟我一起学习React(一)

Posted on 2017年3月23日2017年3月23日 by king2088

React如今已经非常流行了,不论你去哪里进行面试web前端开发,面试官都会问你会不会react、vue、angularjs之类的。搞得好像作为一个前端开发者,必会的东西就是jQuery、react、vue、angularjs、CSS3、HTML5、nodejs等等技术。工作的需要,自己没有办法不去努力学习。因此,下面我们就一起来学习下react吧,如果你还不知道如何在nodejs下配置react开发环境,那么请看我这篇文章《ReactJS环境搭建》
本系列课程都是使用ES6进行开发,因此你需要了解相应的ES6基本知识

一、安装React Developer Tools

建议大家都使用chrome浏览器进行安装,下载地址:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi,如果打不开的童鞋,请自行翻墙(更改hosts,或者使用goproxy)。

React Developer Tools
React Developer Tools

二、创建一个react组件

react组件:其实就是一个js文件。因此,我们可以将一个页面分为很多个不同的组件,比如header组件、body组件以及footer组件,正如你使用div+css进行布局一样。

1、在src/components目录下,新建Header.js、Body.js、Foot.js这三个文件,并且删除原来的main.js
Header.js中,打入下面的代码:

'use strict';
require('styles/App.css');
import React from 'react';
class Header extends React.Component{
render(){
return(

//切记:在renden中使用div的class属性,必须要使用className来设置,如下:

This is Header

);
}
}
export {Header as default}

2、Body.js代码

'use strict';
import React from 'react';
class Body extends React.Component{
render(){
return(

This is body

);
}
}
export {Body as default}

3、Foot.js代码

'use strict';
import React from 'react';
class Foot extends React.Component{
render(){
return(

This is footer

);
}
}
export {Foot as default}

4、整合
现在三个组件的代码都完成了,可是我们需要将3个组件整合到一起,并在浏览器端输出三个组件的所有代码,因此,我们需要在Header.js中使用import来导入相应的组件

import Body from 'Body';
import Foot from 'Foot';

并且在需要的地方使用组件,最终的Header.js代码如下:
'use strict';
require('styles/App.css');
import React from 'react';
import Body from 'Body';
import Foot from 'Foot';
class Header extends React.Component{
reden(){
render(

This is Header


);
}
}
export {Header as default}

5、输出浏览器
我们现在需要打开src/index.js,将里面的内容修改下

import App from './components/Main';//删除这句,增加如下一句代码
import Header from './components/Header';
//然后再修改如下的语句
ReactDOM.render(, document.getElementById('app'));
//将修改为


三、效果

请自己在App.css中增加相关样式。

React Developer Tools中显示的代码效果

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme