React03-脚手架搭建

172 阅读3分钟

React03-脚手架搭建

再我们开发react项目的时候,react默认提供脚手架来搭建项目。跟Vue一样,直接脚手架命令创建相对完整项目

一、本地安装脚手架

npm install -g create-react-appcreate-react-app -Vnpm uninstall -g create-react-app

二、通过本地脚手架搭建项目

create-react-app react_demo

项目名字不能有大写。不要中文

三、使用npx命令来创建项目

npx create-react-app react_demo

这种方式创建项目无需本地安装脚手架,默认临时给你安装一个脚手架。创建项目。项目创建完成后,删除这个临时脚手架。

可以保证你们的项目永远都是最新的脚手架搭建

npm start    Starts the development server.    npm run build    Bundles the app into static files for production.    npm test    Starts the test runner.    npm run eject    Removes this tool and copies build dependencies, configuration files    and scripts into the app directory. If you do this, you can’t go back!        We suggest that you begin by typing:cd reactdemonpm start

项目结构

项目中用到的命令

yarn start:启动项目命令

yarn build:打包项目,将你们整个项目组件和资源打包为一个build文件夹。存放静态资源

yarn test:测试命令,一般不用

yarn eject:将项目中配置拆分为一个一个文件。这个命令不可逆。默认将所有的配置都放在packagejson文件中

项目结构

public:存放项目中静态资源,打包的时候直接放到打包的结果里。里面不要存放js、csssrc:存放开发代码的地方----components:存放组件----utils:存放封装工具----request:存放异步请求----assets:存放项目中静态资源----index.js这个文件式整个项目入口文件。启动项目就会加载----App.js整个项目根组件。以后子组件都放在这个里面加载。类似于App.vue文件

index.js文件

import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(  <App />,  document.getElementById('root'));

react:react核心包,里面包含了react中所有基础语法。基础内容。目前默认使用18.0版本

react-dom:react专门用于操作dom节点的包,包括虚拟dom,diff算法都再这个包。

react-native:用于开发移动端的。

App.js是整个项目根组件,react组件以js结尾的文件。

ReactDOM:来自于react-dom这个包,是一个对象,这个对象提供render方法渲染你们的页面。

react开发过程中,我们使用的jsx语法。react自己提供的一种语法。

JSX=JS+模板代码

React这个框架

中文文档:react.docschina.org/

react是一个js库/react这个框架只提供了一个核心库。剩下的内容都是采用第三方的一些工具完成。

比如:路由,推荐我们使用第三方的某个路由。

状态机:vuex、redux。mobox等等

weex:vue提供专门开发移动端的框架。

react一处编写,多端运行。

facebook推出来的框架。2013年5月开源出来,后期一起再维护。