只需5分钟学会使用React

ゞ浴缸里的玫瑰 2022-10-20 05:24 222阅读 0赞

### React的安装 ###

安装命令: npm i react react-dom

*  react 是核心，提供创建元素、组件等功能
 *  react-dom 提供DOM相关功能

### React的使用 ###

1.  引入react 和 react-dom两个js文件

注意顺序（一定要先引入react在引入react-dom）
    
    
    <script src="./node_modules/react/umd/react.development.js"></script>
    
    <script src="./node_modules/react-dom/umd/ react-dom.development.js"></script>

1.  创建React元素

1.  渲染React元素到页面

<div id="root"></div>
    <script>
    	const title = React.createElement ( 'h1', null, 'Hello React ')
    	ReactDOM . render (title, document.getElementById ( ' root ' ))
    </ script>

![在这里插入图片描述][20210517201519714.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]

页面显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
添加元素子节点：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]  
如果想再次添加的话可以无限添加，格式按照上面的即可

[20210517201519714.png]: /images/20221020/41edb4a221b24d428ee129b872d94151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221020/27d8e13af4ec4cf7aad730f506d4c03b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221020/8131e033c8bb4dd89ee3894f9875e10c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221020/221b8ea3097c48058e1da06c415aa566.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221020/14706c92a74f4b33825f3a302c48cedd.png