freeCodeCamp

2.1 KiB

Raw Blame History

title	localeTitle
Hello World	你好，世界

你好，世界！！

每个语言学习都从传统的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中

  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然后呈现。

// 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的更多信息。

快乐编码!!

2.1 KiB Raw Blame History Unescape Escape

你好，世界 ！！

SRC / App.js

2.1 KiB

Raw Blame History

你好，世界！！