使用 React 开发新项目 Create a New React App

使用集成、综合的工具链创建开发体验
接下来会介绍一些非常流行的工具链来完成一些基本任务：

  • 扩展文件及组件；
  • 使用 npm 第三方工具；
  • 发现并调试错误；
  • 实时 js css 编辑预览；
  • 优化产品输出（压缩及混淆）；
  • 以上介绍是完全不需要人工做任何配置
  • ==
  • ==
  • 如果上面的问题你没有遇到过，或是你一点不喜欢工具链，那简单地添加 React 链接去玩去吧；
  • 使用工具链真的很简单、高效，再次提醒下；
  • ==
  • ==
  • 简单的单页程序：Create React App create-react-app
  • 服务端渲染程序：Next.js nextjs
  • 静态内容站点：Gatsby gatsby
  • 想要构建组件库或从一个 codebase 继承开发：More Flexible Toolchainsmore-flexible-toolchains
  • ==
  • ==
  • Create Reeac App 是官方推荐并比较多用的工具链，本节只稍微提及，详细请到[react-learn->createReactApp]查看
  • 单页应用程序
  • 不提供数据库或后台逻辑，只有前端构建管理，使用了 babel 及 webpack，你大可不必知道这些东西
  • 发布产品的时候，只需要 npm run build 即可创建 app 文件 
npx creat-react-app my-app
cd my-app
npm start
  • Next.js
  • Next 是一个流行、轻量级框架，用于构建基于React的静态的服务器端渲染的应用程序
  • 包含了开箱即用的样式及路由解决方案，假设您是使用Node.js为服务器端环境，则推荐使用。
  • 点击查看官方指导
  • ==
  • ==
  • Gatsby
  • Gatsby 用于创建静态站点。它让你使用React组件，却可预输出HTML``CSS来减少加载时间；
  • 查看官方指导及starter kits
  • ==
  • ==
  • More Flexible Toolchanges
  • 主要介绍了其他的工具链，有用于预设简单的webpack配置的脚手架，有专门用于创建React组件的，有0配置的React web app
  • 及0配置的服务器端渲染的工具。
  • ==
  • ==
  • 从0创建一条工具链
  • 现代的 JavaScript 工具链应包含：
  • 包管理器：Yarn Npm 能够让你使用大量的第三方工具，实现庞大的生态系统
  • 打包工具：Webpack qParcel`，使你能实现模块化的代码及输出更小的包，以减少加载时间
  • 解析器：Babel 实现现代化的 JavaScript 代码，并能在老式浏览器上使用
  • 如果确实需要从头构建一条工具链，请使用 checkout this guide 查看如何实现 React
  • 别忘了，最后你的工具链能正确输出产品

results matching ""

    No results matching ""