67 lines
2.1 KiB
Markdown
67 lines
2.1 KiB
Markdown
|
---
|
|||
|
|
title: Hello World
|
|||
|
|
localeTitle: 你好，世界
|
|||
|
|
---
## 你好，世界 ！！
|
|||
|
|
|
|||
|
|
每个语言学习都从传统的Hello World示例开始。在这里，您将使用相同的HelloWorld程序介绍React。
|
|||
|
|
|
|||
|
|
React中的所有内容都是一个组件。
|
|||
|
|
|
|||
|
|
但在此之前，我们需要确保在计算机中安装了node.js和npm。我们可以选择使用CRA（Create React App），它是Facebook开发人员构建的工具，可帮助您构建React应用程序。它可以节省您耗时的设置和配置。您只需运行一个命令并创建react app即可设置启动React项目所需的工具。
|
|||
|
|
|
|||
|
|
我们可以通过以下命令安装它
|
|||
|
|
```
|
|||
|
|
npm install -g create-react-app
|
|||
|
|
|
|||
|
|
create-react-app my-app
|
|||
|
|
|
|||
|
|
cd my-app
|
|||
|
|
npm start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
命令行应该为您提供输出，您可以在浏览器中找到该应用程序。默认值应为localhost：8080。如果您只在Windows计算机上使用IE或Edge，我建议您安装Chrome以访问开发人员环境和可用作Chrome扩展程序的React Developer Tools。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### SRC / App.js
|
|||
|
|
|
|||
|
|
复制下面的代码并将其粘贴到src / App.js中
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
|
|||
|
|
class App extends React.Component{
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render(){
|
|||
|
|
return(
|
|||
|
|
<div>
|
|||
|
|
<p>Hello World !!</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default App;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果我们检查src文件夹中的index.js文件，我们发现上面的App.js被调用到index.js然后呈现。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// Other code
|
|||
|
|
import App from './App'; // The App component is imported
|
|||
|
|
|
|||
|
|
// Other code
|
|||
|
|
ReactDOM.render(<App />,
|
|||
|
|
document.getElementById('root')); //The <App /> is the way components are called in react after importing them
|
|||
|
|
|
|||
|
|
// Other code
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在上面，App.js被称为组件。通常，我们创建多个组件并将它们放在App.js中，然后在index.js中呈现它们，然后将其呈现到index.html中的根div中。
|
|||
|
|
|
|||
|
|
恭喜 ！！您已经创建了第一个React Hello world应用程序。您将在后续文章中了解有关React的更多信息。
|
|||
|
|
|
|||
|
|
快乐编码!!
|