@mui-treasury/mockup/brands/reactjs/ReactContent.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("@material-ui/core/Box"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var ReactContent = function ReactContent() {
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    mr: {
      sm: 3,
      md: 10
    },
    py: {
      xs: 4,
      sm: 6,
      md: 8
    }
  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    pb: 5
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'h2'
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Getting Started"))), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    color: 'textSecondary',
    variant: 'h5'
  }, "This page is an overview of the React documentation and related resources."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, "React"), " is a JavaScript library for building user interfaces. Learn what React is all about on our homepage or in the tutorial."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    component: 'div'
  }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Try React"), /*#__PURE__*/_react["default"].createElement("li", null, "Learn React"), /*#__PURE__*/_react["default"].createElement("li", null, "Staying Informed"), /*#__PURE__*/_react["default"].createElement("li", null, "Versioned Documentation"), /*#__PURE__*/_react["default"].createElement("li", null, "Something Missing?"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'h4'
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Try React")), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "React has been designed from the start for gradual adoption, and", ' ', /*#__PURE__*/_react["default"].createElement("b", null, "you can use as little or as much React as you need"), ". Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'h5'
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Online Playgrounds")), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "If you\u2019re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Glitch."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'h5'
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Add React to a Website")), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets."), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'h5'
  }, /*#__PURE__*/_react["default"].createElement("b", null, "Create a New React App")), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem."));
};

var _default = ReactContent;
exports["default"] = _default;