react脚手架(creat-react-app)

安装 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>
  }
}

© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
程序员张33 小时前
Maven编译和打包插件
java·spring boot·maven
ybq195133454314 小时前
Redis-主从复制-分布式系统
java·数据库·redis
weixin_472339464 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
灵犀学长4 小时前
EasyExcel之SheetWriteHandler:解锁Excel写入的高阶玩法
spring boot·excel
小毛驴8505 小时前
Linux 后台启动java jar 程序 nohup java -jar
java·linux·jar
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT5 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
好奇的菜鸟7 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
tan180°7 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
DuelCode8 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis