首页 > 代码库 > react学习(二)试写一个例子
react学习(二)试写一个例子
一、render方法
参考https://itbilu.com/javascript/react/EJiqU81te.html
React的组件最终通过render方法渲染到DOM中,该方法由ReactDOM类库提供。API如下:
ReactComponent render( ReactElement element,//需要渲染的元素 DOMElement container,//渲染结果在DOM中插入的位置 [function callback]//渲染完成后的回调函数 )
二、动手写一个Hello World
1.接着上一次打开webpack.config.dev.js查看程序的入口文件
//webpack.config.dev.js
...
const paths = require(‘./paths‘);
...
entry: [
...
paths.appIndexJs,
...
],
//paths.js
module.exports = { ... appIndexJs: resolveApp(‘src/index.js‘), .. };
由上面代码段可知,入口文件是index.js。
2.找到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‘)); registerServiceWorker();
删除多余代码,渲染一个简单的hello world
//index.js
import React from ‘react‘; import ReactDOM from ‘react-dom‘; ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));
//index.html
<div id="root"></div>
下一节学习JSX,ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));
react学习(二)试写一个例子
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。