react 编写 第一个 Hello,world

终于来到了react开发,心里还是比较开心的。
今天就来说说如何在react上面打印第一个hello,world

  1. 1首先我们可以建立一个react脚手架作为我们的demo
npm install -g create-react-app

create-react-app 你的项目名

安装完成后cd 进去

npm run start

2.然后我们可以尝试删除多余的文件,留下我们的APP.js和index.js里面
在这里插入图片描述

  1. 紧接着我们可以在我们的APP.里面写我们的组件,紧接着我们可以把我们的组件进行导入到index.js里面进行引入,然后我们通过虚拟dom可以进行虚拟映射,从而实现渲染页面
  2. 可以下APP.JS写如下代码
import React, {Component} from 'react'

class App extends Component {

    render() {
        return (
            <ul>
                <li>第一行代码  hello,world</li>
            </ul>
        )
    }
}

export default App

5 我们然后在我们的index.js里面写入一下代码

import React from 'react';
import   App   from './App';
import ReactDome  from 'react-dom';



ReactDome.render(<App></App>,document.getElementById('root'))

紧接着我们可以在命令行输入 npm run start然后我们可在谷歌浏览器看到一下界面
在这里插入图片描述
恭喜你,你已经完成了第一个小代码,编写第一个hello,world是我们对一个新的知识的第一步,从今天开始,正式开始学习react了,希望大家能和我一起进步,之前写的csdn太垃圾了,希望以后共同进步!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值