94 lines
3.9 KiB
JavaScript
94 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import { CodeHighlight } from './CodeHighlight';
|
|
|
|
const Documentation = () => {
|
|
|
|
return (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<div className="card docs">
|
|
<h4>Current Version</h4>
|
|
<p>React 17.x and PrimeReact 7.x</p>
|
|
|
|
<h5>Getting Started</h5>
|
|
<p>Sakai is an application template for React based on the popular <a href="https://github.com/facebook/create-react-app">create-react-app</a> that allows
|
|
creating React apps with no configuration. To get started, clone the <a href="https://github.com/primefaces/sakai-react">repository</a> from GitHub and install the dependencies with npm or yarn.</p>
|
|
<CodeHighlight>
|
|
{`
|
|
"npm install" or "yarn"
|
|
`}
|
|
</CodeHighlight>
|
|
|
|
<p>Next step is running the application using the start script and navigate to <b>http://localhost:3000/</b> to view the application.
|
|
That is it, you may now start with the development of your application using the Sakai template.</p>
|
|
|
|
<CodeHighlight>
|
|
{`
|
|
"npm start" or "yarn start"
|
|
`}
|
|
</CodeHighlight>
|
|
|
|
<h5>React Scripts</h5>
|
|
<p>Following commands are derived from create-app-app.</p>
|
|
<CodeHighlight>
|
|
{`
|
|
"npm start" or "yarn start": Starts the development server
|
|
"npm test" or "yarn test": Runs the tests.
|
|
"npm run build" or "yarn run build": Creates a production build.
|
|
`}
|
|
</CodeHighlight>
|
|
|
|
<h5>Dependencies</h5>
|
|
<p>Dependencies of Sakai are listed below and needs to be defined at package.json.</p>
|
|
|
|
<CodeHighlight lang="js">
|
|
{`
|
|
"primereact": "...", //required: PrimeReact components
|
|
"primeicons": "...", //required: Icons
|
|
"primeflex": "...", //optional: Sample pages
|
|
"react-transition-group": "^4.4.1", //required: PrimeReact animations
|
|
`}
|
|
</CodeHighlight>
|
|
|
|
<h5>Structure</h5>
|
|
<p>Sakai consists of 2 main parts; the application layout and the resources. <b>App.js</b> inside src folder is the main component containing the template for the base layout
|
|
whereas required resources such as SASS structure for the layout are placed inside the <b>src/layout</b> folder.</p>
|
|
|
|
<h5>Application Template</h5>
|
|
<p>Main layout is the JSX template of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the
|
|
App.js component that implements the logic such as menu state, layout modes and so on.
|
|
</p>
|
|
|
|
<h5>Menu</h5>
|
|
<p>Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems,
|
|
navigate to App.js file and define your own model as a nested structure. Here is the menu component from the demo application.</p>
|
|
|
|
<h5>PrimeReact Theme</h5>
|
|
<p>Sakai theming is based on the PrimeReact theme being used. Default theme is <b>lara-light-indigo</b>.</p>
|
|
|
|
<h5>SASS Variables</h5>
|
|
<p>In case you'd like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes
|
|
will be reflected instantly at your browser.
|
|
</p>
|
|
|
|
<h6>src/layout/_variables.scss</h6>
|
|
<CodeHighlight lang="scss">
|
|
{`
|
|
/* General */
|
|
$fontSize:14px;
|
|
$borderRadius:12px;
|
|
$transitionDuration:.2s;
|
|
`}
|
|
</CodeHighlight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const comparisonFn = function (prevProps, nextProps) {
|
|
return prevProps.location.pathname === nextProps.location.pathname;
|
|
};
|
|
|
|
export default React.memo(Documentation, comparisonFn);
|