学习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;

如果有哪里写的不对，请指出来！若觉得有所帮助的话，就麻烦给个赞呗！