P05:HelloWorld和组件的讲解

我就是我 2023-10-06 20:44 15阅读 0赞

#### React16 基础 ####

*  阐述
 *  入口文件的编写
 *   *  app组件的编写
 *  总结

## 阐述 ##

本文先把 `src` 目录里的文件全部删除，我们一点点写一个·`HelloWorld`·程序，并通过编写这个程序了解一下什么是React中的组件化编程。

## 入口文件的编写 ##

写一个项目的时候一般要从入口文件进行编写的，在 `src` 目录下，新建一个文件 `index.js`，然后打开这个文件。

写入下面4行代码：

import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
    ReactDOM.render(<App />,document.getElementById('root'))

上面的代码，我们先引入了 `React` 两个必要的文件，然后引入了一个 `APP` 组件，目前这个组件还是没有的，需要一会建立。然后用 `React` 的语法把 `APP` 模块渲染到了 `root ID`上面.这个 `rootID` 是在 `public\index.html` 文件中的。

这样入口文件就写好了，这时候我们就需要写 `APP` 组件了。

### app组件的编写 ###

现在写一下 `App` 组件，这里我们采用最简单的写法，就输出一个 `Hello willem`,就可以了。

import React,{
        Component} from 'react'
    
    class App extends Component{
        
        render(){
        
            return (
                <div>
                    Hello willem
                </div>
            )
        }
    }
    
    export default App

这里有一个难点，就是：

import React, {
        Component} from 'react'

这其实是ES6的语法-**解构赋值**，如果你分开写就比较清楚了，你可以把上面一行代码写成下面两行。

import React from 'react'
    const Component = React.Component

如果你对ES6语法不熟悉，你完全可以使用这种形式来进行编写。

当我们这两个文件都编写完成后，可以在终端使用 `npm start` 命令，来看一下我们编写的结果了。

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

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

## 总结 ##

React的主要优势之一就是组件化编写，这也是现代前端开发的一种基本形式。

所以我们在学习React的时候就要多用这种思想，只有不断练习，我们才能在工作中得心应手，轻松自如。小伙伴们也动手作一下吧。

[be1d67ce12e2417db78d0b4f27f360d6.png]: https://img-blog.csdnimg.cn/be1d67ce12e2417db78d0b4f27f360d6.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/eabae4731a854a67b124a8aa1b4b3790.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b887e01a2dc54ecda250b36bf547a3a8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16