react入门之编写hello world

创建react应用程序

npx create-react-app my-app //my-app是应用程序的文件夹名称。创建React应用程序并安装其依赖关系,这需要几分钟
cd my-app //导航到该应用程序（my-app）所在文件夹
npm start //运行应用程序
//您应该在浏览器中的http：// localhost：3000上看到React徽标和“学习React”的链接
code .     //即在VS Code 打开应用程序

编写hello world

• src文件都删掉，新建App.js和index.js

• public中除了index.html其他的删掉

• index.js中写入以下代码：

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App' 
ReactDOM.render(<App/>,document.getElementById('root'))

这个root 在public文件夹下的index.html文件里

第4行代码使用了 React 的 ReactDOM 库中的 render 方法，它的作用是将 <App /> 渲染到 HTML 元素中，这里的目标是将 <App /> 渲染到 id 为 'root' 的HTML 元素中。

<App /> 是一个 React 组件，它是应用的根组件，所有其他的组件都将嵌套在它的内部。

• App.js中写入以下代码：

import React from 'react'; 
class App extends React.Component { 
  render() { 
    return <h1>Hello World</h1> 
  } 
} 
//  可以用箭头函数简写为const App = () => <h1>Hello World</h1> 
export default App

开始用edge打开了react页面，没有渲染出h1效果，后来在谷歌浏览器中打开localhost:3000就能正常渲染