react脚手架（creat-react-app）

苹果酱05672025-03-11 17:08

安装 react脚手架

React官方提供的脚手架工程Create React App：https://github.com/facebook/create-react-app

npm install create-react-app -g 全局安装

create-react-app my-react (my-react为项目名称，可以自定义)

cd my-react

启动项目：npm start

成功如下图：

my-react.jpg

react脚手架目录结构

react.jpg

可以把脚手架目录结构精简为如下图：

react-1.jpg

入口文件：index.js

复制代码

// 导入核心模块
import React from 'react'
import ReactDOM from 'react-dom'
// 入口组件
import App from './App.jsx'

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

存放组件的文件夹：component

入口组件：App.jsx

复制代码

// 根目录
import React from 'react'
import Home from './component/Home.jsx'
class App extends React.Component {
  render() {
    return (<Home />)
  }
}
export default App

Home.jsx

复制代码

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>首页</div>
  }
}

喜欢的朋友记得点赞、收藏、关注哦！！！