欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react脚手架

程序员文章站 2024-02-26 21:03:10
...

脚手架

7-1.全局安装脚手架

全局安装: npm i create-react-app -g  
查看版本:  create-react-app -V

7-2.使用脚手架创建项目

1.create-react-app 项目名称
2.cd demo
3.npm start  #项目启动
	如果报错,如何解决
		git add .  #添加到暂存区
		git commit -m 'tj' #提交代码至本地仓库
		npm run eject  #将项目全部依赖项导出  不可逆
		npm start   #正常启动

7-3.项目清空

src
	App.jsx
		import React from 'react'

        export default function App() {
          return (
            <div>
              REACT
            </div>
          )
        }
index.js
	import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App.jsx';

    ReactDOM.render(<App />,document.getElementById('root'));
其他渲染全部删除即可

	

7-4.项目目录

config:	#项目的配置文件
public #公共资源文件包含唯一页面index.html
src:	#你的代码
	App.jsx  #根组件
    index.js	#唯一入口文件

需要安装一个ES7 react/redux

imp:  import xxx from '';
imn: import 'xxx';
rfc: 创建一个函数组件
rcc: 创建一个类组件

7-5.创建组件

import React, { Component } from 'react'

export default class Case extends Component {
    render() {
        return (
            <div>
                <h1>第一个组件</h1>
            </div>
        )
    }
}

相关标签: react react