用react-create-app极快实现hello world

最新推荐文章于 2024-07-16 21:58:15 发布

niceHou666

最新推荐文章于 2024-07-16 21:58:15 发布

阅读量445

点赞数 1

文章标签： react react-create-app

本文链接：https://blog.csdn.net/niceHou666/article/details/104162617

版权

react-create-app的优势就是不需要任何配置，用简单的一句命令行就能把项目构建出来。想进一步了解的同学可以去GitHub找。

一、需要的工具

terminal（正常电脑都有）
node（版本大于6.0）
npm

二、利用npm全局安装 react-create-app

打开你的terminal，输入

install npm-create-app -g

三、利用react-create-app创建项目

在terminal中输入

create-react-app 你的项目名称

我的项目名称叫react-doc，如下图。

出现下图代表创建成功

可以通过下面的方法快速看一下package.json。

cd 你的项目
cat package.json

也可以用你的ide打开刚才的项目，看看是不是啥都有啦。

运行起来，打开localhost:3000

四、写我们的hello world

在src下，新建component文件夹，在component中新建Helloworld.js

import React from 'react'

class Helloworld extends React.Component{
    render(){
        return  <h1>helloworld</h1>
    }
}

export default Helloworld

index.js 如下，将我们的Helloworld替换原来的App，挂载进去。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Helloworld from './component/Helloworld';
ReactDOM.render(<Helloworld />, document.getElementById('root'));

大功告成！