學習React(2) - 用react 來寫Hello World

在上一篇的學習React(1) 中已經介紹如何在VS Code中用react, 那麼現在就將展示如何用react來寫Hello World.

第一步：
先得在src文件夾下，創建一個js文件名, 博主就將這個文件名命名爲：HelloWorld.js 。

第二步：
在 HelloWorld.js 文件裏寫入這幾行代碼：

// HelloWorld.js 文件
import React from 'react';

const HelloWorld = (props) => {
    return(
        <h1>Hello World</h1>
    );
}

// 同時也可以這麼寫，在這裏就寫在註釋裏了
// const HelloWorld = () => <h1>Hello World</h1>

export default HelloWorld;

第三步：
由於之前的App.js文件裏已經有現成的代碼，但是爲了實現自己輸出Hello World效果，那麼就得把App.js文件裏大部分內容都給刪除掉，換上下面的代碼
在App.js 文件裏，就寫上這幾行代碼：

// App.js 文件
import React from 'react';

import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld/>
    </div>
  );
}

export default App;

第四步：
在Terminal 裏輸入npm start ，來運行這個程序，在瀏覽器上就能看到“Hello World" 結果了：

第二種做法：
在 HelloWorld.js 文件裏寫入這幾行代碼：

// HelloWorld.js 文件
import React from 'react';

function Hello() {
    return <h1>Hello World</h1>
}

export default Hello;

在App.js 文件裏寫入：

// App.js 文件
import React, {Component} from 'react';

import './App.css';
import HelloWorld from './HelloWorld';

class App extends Component{
  render() {
  	return (
    	<div className="App">
      		<HelloWorld/>
    	</div>
  	);
  }
}

export default App;

結果還是跟上面給的圖片一樣

第三種方法：
使用這個方法得非常小心，很容易會出錯的，博主建議不採用這種方法於實際項目中

先在HelloWorld.js 文件下寫：

// 在HelloWorld.js 文件下寫的
import React from 'react';

export const HelloWorld = () => <h1>Hello World</h1>

之後，在App.js文件中寫：

import React from 'react';

import './App.css';

// 這裏需要用 { } 符號來將標籤封起來
import {HelloWorld} from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld/>
    </div>
  );
}

export default App;

如果在App.js import的時候，寫成這樣的話，就會出錯：

import HelloWorld from './HelloWorld';

錯誤是：
Attempted import error: ‘./HelloWorld’ does not contain a default export (imported as ‘HelloWorld’).

所以，必須用{ }符號將標籤括起來，才能解決這個問題 。

第四種方法
使用state

// Teststate.js 文件
import React, {Component} from 'react'

class Teststate extends Component {
    constructor(){
        // This is required because we extend reacts component class
        // and a call has to be made to the base class constructor
        super() 
        this.state = {
            message: 'Hello World'
        }
    }

    render() {
        return ( 
            <div>
                <h1>
                    {this.state.message}
                </h1>   
            </div>
        )
    }
}

export default Teststate;

在App.js文件裏：

// App.js 文件
import React from 'react';
import './App.css';
import Teststate from './Teststate';

function App() {
  return (
    <div className="App">
      <Teststate/>
    </div>
  );
}

export default App;

如果有哪裏寫的不對，請指出來！若覺得有所幫助的話，就麻煩給個讚唄！