React入门---组件-4

组件：网页可以分为多个模块，比如头部，底部，分享等各种模块，这些模块在其他页面也可能会用到，我们把这些分开，每一个模块当作一个组件，进行复用。

接下来直接以头部 header作为一个组件来进行demo演示组件。

下面是整体的一个项目的框架：

到现在，项目的文件夹里面有两个文件 package.json 和 webpack.config.js

1. 在项目文件夹中创建 src文件夹（源代码放这里面）

2. src文件中创建app.html文件和 js文件夹

3. js文件夹中创建 index.js文件（入口文件夹）和 components文件夹（用来放一些组件）

4. components文件夹中创建header.js文件（头部的一个组件，可以公用/复用）

（以上文件夹的框架是我自己练习的框架，可根据不同需要进行命名，只需要注意在配置文件中相应修改）

这个时候项目文件框架应该是这样：

解析以及各个文件的代码：

1. app.html------最后内容会放在这里

<div id="test"> 123 </div>

2. index.js------首先写最基本引入包

var React = require('react');
var ReactDOM = require('react-dom');

3. header.js------写头部组件

import React from 'react';
import ReactDOM from 'react-dom';//创建一个类 ComponentHeader 相当于继承react里component的子类//export default 输出这个类
export default class ComponentHeader extends React.Component{//render() 解析类的一个输出
     render(){return(<div><h1>这里是头部</h1></div>
             )}}

代码的意思：创建了一个ComponentHeader的类，通过render方法解析这个类，我们要将 return返回的内容插入到入口JS文件中，也就是index.js；

需要注意，可以给外部使用的组件定义要写：export default

4. index.js------与组件header.js关联

var React = require('react');
var ReactDOM = require('react-dom');
//把刚才定义的头部引用进来 from后面写路径
import ComponentHeader from './components/header.js'
class Index extends React.Component{render(){return(　　　　　　　<div><ComponentHeader></ComponentHeader>　　　　　　　</div>
            )}
}
//与app.html进行一个绑定，即：入口的定义
ReactDOM.render(<Index/>,document.getElementById('test'));

5. CMD进入到项目文件夹运行webpack的热加载：（在js中修改后按保存，会自动在浏览器中刷新）

webpack-dev-server

在浏览器运行：http://localhost:8080

一个小的react-demo就运行完成了。

注意：

　　组件的render方法，return返回的HTML节点必须是一个。

　　下面是一个错误示范，出现了两个节点，会报错。

render(){return(//错误示范 <ComponentHeader></ComponentHeader><h2>这里头部2</h2>
            )}

　　解决方法：放到一个节点里面<div></div>,如下：

render(){return(//正确示范 <div><ComponentHeader></ComponentHeader><h2>这里头部2</h2></div>
            )}

转载于:https://www.cnblogs.com/azedada/p/6835899.html

React入门---组件-4相关推荐

(React入门)组件通信
1.父组件向子组件通信 props 父组件直接通过props向子组件传递需要的信息 import React, { Component } from 'react' //子组件 class Child ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
第一章：Reac入门与第二章：React面向组件编程
目录一.jsx语法规则二.React中定义组件 1.函数式组件: 2.类式组件:*有关类复习的知识点前往React知识铺垫查看https://blog.csdn.net/m0_61927991/a ...
react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
react测试组件_测试驱动的开发，功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...

React入门---组件-4

React入门---组件-4相关推荐

最新文章

热门文章