第十七章 使用脚手架写一个HelloWorld项目

由于使用react脚手架创建的默认文件很多我们都用不到,我们可以将不需要的默认的文件删除掉,自己重新写一遍提高熟悉度。

移除默认文件并改造

步骤1:删除掉默认文件夹publicsrc

步骤2:新建新的文件夹目录publicsrc

public
|-----index.html // 模板文件

src
|-----components // 存放组件的文件夹
|-----App.jsx // App应用容器
|-----index.js // 入口文件

步骤3:编写public/index.html模板文件

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React 脚手架title>
head>
<body>
  <div id="root">div>
body>
html>

步骤4:编写App.jsx组件

import { Component} from "react"

import Hello from "./components/Hello"

export default class App extends Component {
  render() {
    return (<div>App</div>)
  }
}

步骤5:编写index.js文件

// 引入react核心库
import React from 'react'
// 引入reacDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

注意:这里的react版本是17.0.2, 如果是18.x需要使用createRoot来写:

// 引入react核心库
import React from 'react'
// 引入reacDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

步骤6:npm start 运行项目是否成功。


开始编写HelloWorld组件

步骤1:在src/components目录下新建Hello文件夹

步骤2:在Hello文件夹下创建Hello.jsx文件

import {Component} from "react"

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

步骤3:在App容器中引入Hello组件

import { Component} from "react"

import Hello from "./components/Hello/Hello"

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

步骤4:npm start再次运行项目,查看渲染是否成功。


关于组件的编写方式

  • 方式1

1、通常其组件对应的文件夹和文件名称,首字母都是大写

2、文件夹和文件名称使用语义化的英文作为名称

3、这样的组件引入方式是:./components/文件夹名称(首字母大写)/文件名(首字母大写)

  • 方式2

1、组件的文件夹名称,首字母大写

2、文件夹里面的组件名称使用:index.jsx或者index.js作为组件名称

3、这种组件的引入方式是:./components/文件夹名称(首字母大写)

相比较而言,我比较喜欢方式2,因为比较简洁,但是实际开发以公司的规范为主。

你可能感兴趣的:(ReactJS,javascript,react.js,前端)