create-react-app是启动React应用程序的最简单方法
create-react-app
是一个旨在让您立即熟悉React的项目。它提供了一个现成的React应用程序启动器,因此您无需考虑Webpack和Babel配置就可以深入构建自己的应用程序。
它提供了开箱即用的功能:
- 具有热重载的开发服务器
- 用Jest提供测试环境
- 允许构建React应用
- 准备使用ES6 +语法
- 捆绑您所有的JavaScript和资产
- 带有CSS自动前缀,SASS和CSS模块支持
- 和更多!
您首先使用npx
,这是无需安装即可下载和执行Node.js命令的简便方法。npx
附带npm
(从5.2版开始),如果尚未安装npm,请立即从https://nodejs.org(npm与Node一起安装)。
如果不确定所使用的版本,建议您检查是否需要更新。
提示:在以下位置查看我的终端教程https://flaviocopes.com/macos-terminal/如果您不熟悉
当你跑步npx create-react-app <app-name>
,npx
将要下载最近的create-react-app
释放,运行它,然后将其从系统中删除。这很棒,因为您的系统永远不会有过时的版本,并且每次运行它时,您都可以获得最新,最出色的代码。
让我们开始:
npx create-react-app todolist
这是它完成运行的时间:
create-react-app
在您告诉的文件夹中创建了文件结构(todolist
在这种情况下),并初始化了一个吉特资料库。
它还在package.json
文件,因此您可以通过进入文件夹并运行来立即启动应用程序npm start
。
此外npm start
,create-react-app
添加了一些其他命令:
npm run build
:在以下位置构建React应用程序文件build
文件夹,准备部署到服务器npm test
:使用以下命令运行测试套件笑话npm eject
:从弹出create-react-app
顶出是决定create-react-app
已经为您做了足够的事情,但是您想做的事情超出其允许的范围。
自从create-react-app
是一组通用的分母约定和数量有限的选项,可以保证在某些时候您的需求将需要一些独特的东西,而这些东西已经超出了create-react-app
。
弹出时,您会失去自动更新的能力,但在巴别塔和Webpack配置。
弹出时,动作是不可逆的。您将在应用程序目录中获得2个新文件夹,config
和scripts
。这些包含您需要的所有配置,现在您可以开始对其进行编辑。
免费下载我的反应手册
更多反应教程:
- 一个React简单的应用示例:通过API获取GitHub用户信息
- 用React构建一个简单的计数器
- 用于React开发的VS代码设置
- 如何通过React Router将道具传递给子组件
- 使用Electron和React创建一个应用
- 教程:使用React创建电子表格
- 学习React的路线图
- 了解如何使用Redux
- JSX入门
- 样式化的组件
- Redux Saga简介
- React Router简介
- React简介
- 反应组件
- 虚拟DOM
- 反应事件
- 反应状态
- 反应道具
- 反应片段
- React Context API
- 反应PropTypes
- 反应概念:声明式
- React:如何在点击时显示其他组件
- 如何在React JSX内部循环
- 道具与状态在React中
- 您应该使用jQuery还是React?
- 使用React需要知道多少JavaScript?
- 盖茨比介绍
- 如何在React中引用DOM元素
- React中的单向数据流
- 反应高阶组件
- 反应生命周期事件
- 反应概念:不变性
- 反应概念:纯度
- React钩子简介
- create-react-app简介
- 反应概念:组成
- React:演示组件与容器组件
- React中的代码拆分
- 使用React进行服务器端渲染
- 如何安装React
- React中的CSS
- 在React中使用SASS
- 在React中处理表单
- 反应严格模式
- 反应门户
- 反应渲染道具
- 测试React组件
- 如何在React中将参数传递给事件处理程序
- 如何处理React中的错误
- 如何在JSX中返回多个元素
- React中的条件渲染
- 反应,如何将道具转移到子组件
- 如何在React中获取输入元素的值
- 如何使用useState React钩子
- 如何使用useCallback React钩子
- 如何使用useEffect React钩子
- 如何使用useMemo React钩子
- 如何使用useRef React钩子
- 如何使用useContext React钩子
- 如何使用useReducer React钩子
- 如何将您的React应用程序连接到相同来源的后端
- 到达路由器教程
- 如何使用React Developer Tools
- 如何学习React
- 如何调试React应用程序
- 如何在React中呈现HTML
- 如何修复`dangerouslySetInnerHTML`与React中的错误不匹配
- 我如何解决React登录表单状态和浏览器自动填充的问题
- 如何在本地主机上的React应用程序中配置HTTPS
- 如何修复React中的“渲染其他组件时无法更新组件”错误
- 我可以在条件内使用React挂钩吗?
- 将useState与对象一起使用:如何更新
- 如何使用React和Tailwind在代码块中移动
- React,添加到DOM时将焦点放在React中的一个项目上
- 反应,在doubleclick上编辑文本