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

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

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

相关推荐
咖啡啡不加糖9 分钟前
暴力破解漏洞与命令执行漏洞
java·后端·web安全
编程猪猪侠10 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
风象南12 分钟前
SpringBoot敏感配置项加密与解密实战
java·spring boot·后端
DKPT22 分钟前
Java享元模式实现方式与应用场景分析
java·笔记·学习·设计模式·享元模式
kk在加油24 分钟前
Mysql锁机制与优化实践以及MVCC底层原理剖析
数据库·sql·mysql
江城开朗的豌豆29 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
Percep_gan30 分钟前
idea的使用小技巧,个人向
java·ide·intellij-idea
缘来是庄31 分钟前
设计模式之迭代器模式
java·设计模式·迭代器模式
合作小小程序员小小店34 分钟前
web网页开发,在线%ctf管理%系统,基于html,css,webform,asp.net mvc, sqlserver, mysql
mysql·sqlserver·性能优化·asp.net·mvc
Liudef0637 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html