React Day_02 创建Hello World

前提 基于脚手架的默认 项目已经创建好了。

1、可以删掉一些没必要的文件，创建组件文件夹

     components 是一个放组件的文件夹。放自定义的组件

      index.js 是项目的入口文件

      App.js 是一个根组件  

2、重写 index.js 

//引入react 核心库
import React from 'react';
//引入ReactDom
import ReactDOM from 'react-dom';
//引入APP组件
import App from './App';
//渲染APP组件到页面
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

3、重写 App.js

import React, { Component } from 'react'
import Hello from './components/Hello/Hello'
export default class App extends Component {
  render() {
    return (
      <div>
        <Hello></Hello>
      </div>
    )
  }
}

4、创建Hello 组件

在 components 文件夹中 创建一个 Hello文件夹， 在Hello文件夹中创建一个 Hello.js

import React, { Component } from 'react'

export default class Hello extends Component {
    render() {
        return (
            <div>
                <h1>hello!!!</h1>
            </div>
        )
    }
}

5、运行项目

在终端  npm start