在上一篇的学习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;
如果有哪里写的不对,请指出来!若觉得有所帮助的话,就麻烦给个赞呗!