用react-create-app極快實現hello world

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'));

大功告成！