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的基本组件Component render() { 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文件里,如下:
![](https://images2018.cnblogs.com/blog/137142/201808/137142-20180810133639532-367354032.png)
保存刚刚写好的组件文件,然后在命令窗口运行 npm start,在浏览器就看到我们刚刚写的组件,已经渲染到页面了:
作者:绿茶叶
出处:http://www.cnblogs.com/greenteaone/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。