Getting Started
Download and install Node.js.
Type command to install dependencies.
Copynpm i
Wait until installations finished.
Run project
Type command to run server.
Copynpm start
App should run on http://localhost:3000
Build project
Open project folder via "Command Line".
Type command to build project.
Copynpm 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
Copycomponents/common/loader/Loader.jsx;components/common/loader/Loader.style.js;
Loader.jsx
Base component uses StyledLoader from './Loader.style';
Copyimport 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
Copyimport 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;