what’s react.js

how to create react app

  • If you are learning React or creating a new one-page application, use Create React App.
  • If you are using Node.js to build a server-side rendering website, try Next.js.
  • If you are building a static content-oriented website, try Gatsby.
  • If you are creating a component library or integrating React into an existing code repository, try a more flexible tool chain. If you are learning React or creating a new one-page application, use Create React App.
  • If you are using Node.js to build a server-side rendering website, try Next.js.
  • If you are building a static content-oriented website, try Gatsby.
  • If you are creating a component library or integrating React into an existing code repository, try a more flexible tool chain.

    create-react-app

    create-react-app 是来自于 Facebook 出品的零配置命令行工具，能够帮你自动创建基于Webpack+ES6 的最简易的 React 项目模板。
    它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：
  1. npm install -g create-react-app //安装工具
  2. create-react-app + myapp //创建项目
  3. cd myapp
  4. npm start //启动项目

Next.js

Next.js 是一个流行的、轻量级的框架，用于配合 React 打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案，并且假定你使用 Node.js 作为服务器环境。
从 Next.js 的官方指南了解更多。

Gatsby

Gatsby 是用 React 创建静态网站的最佳方式。它让你能使用 React 组件，但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。
从 Gatsby 的官方指南和入门示例集了解更多。

更灵活的工具链

以下工具链为 React 提供更多更具灵活性的方案。推荐给更有经验的使用者：

  • Neutrino 把 webpack 的强大功能和简单预设结合在一起。并且包括了 React 应用和 React 组件的预设。
  • Nx 是针对全栈 monorepo 的开发工具包，其内置了 React，Next.js，Express 等。
  • Parcel 是一个快速的、零配置的网页应用打包器，并且可以搭配 React 一起工作。
  • Razzle 是一个无需配置的服务端渲染框架，但它提供了比 Next.js 更多的灵活性。

    JSX

    element

    events

    conditional rendering

    list && keys

    form

    state && lifecycle

    react hooks

    components&& props

    components communication

    router

    higher component

    performance optimization