react学习笔记（二）编写第一个react组件

继续上一节课的内容，打开App.js:会看到如下代码：

import React, { Component } from 'react';   //在此文件中引用React，以及reat的组件类
import logo from './logo.svg';             //引用图标
import './App.css';                      //引用样式class App extends Component {           //编写一个App组件，继承自react的基本组件Componentrender() {return (                           //render里面返回了组件的View<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1></header><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p></div>
    );}
}export default App;   //导出组件App，这样外面引用组件的时候才能引用的到

根据上面代码的注释，我们可以在这里写一个自己的react组件。

我们把return里的示例代码删掉，换成自己写的。如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';class App extends Component {render() {return (<div className="App">             //className是类名，为了与html区分，在react里面类名用className表示<p>Hello,很高兴在react的世界与你相遇！</p><p>后面的路无论简单还是困难，希望我们都能坚持走到最后！</p></div>
    );}
}export default App;

注意：return的view必须放在一个总的标签内，否则会报错。例如： return ( <div className="App"></div><p></p> );会报错

react组件已经写好，我们先看一下，如何把组件渲染到dom中。

打开index.js

代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';  //导入我们写好的组件
import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root')); // 把react组件渲染到DOM中
registerServiceWorker();

ReactDOM.render(<App />, document.getElementById('root')); // 把react组件渲染到DOM中root在public中的html文件里，如下：

保存刚刚写好的组件文件，然后在命令窗口运行 npm start，在浏览器就看到我们刚刚写的组件，已经渲染到页面了：

转载于:https://www.cnblogs.com/greenteaone/p/9454338.html

react学习笔记（二）编写第一个react组件相关推荐

React学习笔记二：实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
React学习笔记(二) | 受控组件
React组件目标能够知道受控组件是什么能够写出受控组件了解非受控组件表单处理受控组件(★★★) HTML中的表单元素是可输入的,也就是有自己的可变状态而React中可变状态通常保存在s ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
React学习笔记二——react-router
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一个关于react-router的demo,因为不喜欢下载太多的依赖包,所以就直接引得js,解析会比较慢一些. 首先先 ...
React学习笔记二通过柯里化函数实现带参数的事件绑定
class Login extends React.Component {state = {username: '',password: ''}saveFormData = (type) => ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...

react学习笔记（二）编写第一个react组件

react学习笔记（二）编写第一个react组件相关推荐

最新文章

热门文章