学习React(2) - 用react 来写Hello World

在上一篇的学习React(1) 中已经介绍如何在VS Code中用react, 那么现在就将展示如何用react来写Hello World.

第一步：
先得在src文件夹下，创建一个js文件名, 博主就将这个文件名命名为：HelloWorld.js 。

第二步：
在 HelloWorld.js 文件里写入这几行代码：

import React from 'react';

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

export default HelloWorld;

第三步：
由于之前的App.js文件里已经有现成的代码，但是为了实现自己输出Hello World效果，那么就得把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" 结果了：

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