RForme

Home
Getting Started
Config
Theming
Components
Forms
Pages
Changelog
Sources and Credits

Getting Started

Download and install Node.js.

Type command to install dependencies.

Copy
npm i

Wait until installations finished.

Run project

Type command to run server.

Copy
npm start

App should run on http://localhost:3000

Documentation in your local machine (`http://localhost:3000/docs/`).

Build project

Open project folder via "Command Line".

Type command to build project.

Copy
npm run build

Wait until build finished.
Move all files from "build" folder to your server.
Project uses Create React App configuration.

jsconfig.json

File specifies the root files and the options for the features provided by the JavaScript language service.

It is allow use import components/Loader without ../../components/Loader it means that base folder is src.

Copy
{
"compilerOptions": {
"baseUrl": "src"
}
}

Styled components

RForme based on styled components:

Example

Copy
components/common/loader/Loader.jsx;
components/common/loader/Loader.style.js;

Loader.jsx

Base component uses StyledLoader from './Loader.style';

Copy
import React, { Fragment } from 'react';
import StyledLoader, { StyledLoaderOverlay } from './Loader.style';
const Loader = ({ overlay }) => {
return (
<Fragment>
<StyledLoader />
{overlay ? <StyledLoaderOverlay /> : null}
</Fragment>
);
};
export default Loader;

Loader.style.js

Copy
import styled from 'styled-components';
import theme from 'styles/themes/';
const StyledLoader = styled.div`
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin: -20px;
border: 4px solid ${theme.loader.borderColor};
border-top: 4px solid ${theme.colors.primary};
border-radius: 50%;
width: 40px;
height: 40px;
animation: loader 0.6s linear infinite;
`;
export const StyledLoaderOverlay = styled.div`
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: ${theme.loader.overlay.backgroundColor};
opacity: ${theme.loader.overlay.opacity};
z-index: 1;
`;
export default StyledLoader;