码迷,mamicode.com
首页 > 其他好文 > 详细

react学习(二)试写一个例子

时间:2017-07-10 17:55:22      阅读:982      评论:0      收藏:0      [点我收藏+]

标签:https   类库   cte   依赖   api   通过   ntb   register   生产环境   

一、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学习(二)试写一个例子

标签:https   类库   cte   依赖   api   通过   ntb   register   生产环境   

原文地址:http://www.cnblogs.com/sheshihao/p/7146735.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!