前端学习-React基础

最新推荐文章于 2024-09-04 09:07:43 发布

文艺青年o好像不是我

最新推荐文章于 2024-09-04 09:07:43 发布

阅读量243

点赞数

分类专栏：前端学习文章标签：前端 react

本文链接：https://blog.youkuaiyun.com/u013255127/article/details/101936777

版权

前端学习专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何从零开始学习React。首先讲解了如何安装React，然后通过创建一个React项目来实践。接着，作者删除默认的src文件并重新编写，强调了“Hello, World”在学习过程中的重要性。在理解React组件化的概念后，文章引入了ES6的解构，并说明了如何在App.js中使用组件。最后，指导读者如何运行项目，鼓励大家持续努力学习React。" 136322261,1213676,理解Linux top命令中的VIRT、RES和SHR内存参数,"['系统监控', '内存管理', 'Linux命令', '进程分析', '性能调优']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装React

npm install -g create-react-app

创建一个React项目

create-react-app demo
.....
npm start

在这里插入图片描述

Hello React

删除src下的文件,重写,hello world才是第一步!
新建一个index.js,引入react的包.

import React from 'react'
import ReactDom from 'react-dom'

再建个Hello.js,这个里面写我们的hello world,React理念组件化,我是这样理解的.

import React, {Component} from 'react'

class Hello extends Component {
    render() {
        return(
            <div>
                Hello World!
            </div>
        )
    }
}

export default Hello

这里的{Componet}是ES6的解构写法.

将这个Hello.js文件在index.js中引入进去.

import React from 'react'
import ReactDom from 'react-dom'
import Hello from  './Hello'

ReactDom.render(<Hello />, document.getElementById('root'))

这里的root节点在public文件夹下的index.html里面.

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>