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>
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。