react-rapid

react-rapid copied to clipboard

This project was bootstrapped with Create React App. Any feature or script supported by Create-React-App is also supported.

Folder Structure

After pulling to your local, your project should look like this:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    components
    pages
    App.css
    App.js
    config.js
    index.js

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.js is the JavaScript entry point.

You can delete or rename the other files.

Installation & Setup

Using NPM

$ git clone https://github.com/timurcatakli/react-rapid.git
$ cd react-rapid
$ npm install
$ npm run start

Using Yarn

$ git clone https://github.com/timurcatakli/react-rapid.git
$ cd react-rapid
$ yarn
$ yarn start

Your website should be started automatically in your browser at http://localhost:3000

Adding a New Page

1- Open the config.js file located under src directory

2- Add a new key and value under pages as below. Pick an icon from Semantic-UI.

pages: {
  newpage: {
    component: 'NewPage',
    label: 'New Page',
    icon: 'alarm',
    subTitle:
      'New Page unc gravida tellus eget odio molestie eleifend feugiat non lorem.',
    path: '/newpage'
  },
  aboutus: {
    component: 'AboutUs',
    label: 'About Us',
    icon: 'building',
    subTitle:
      'About Us unc gravida tellus eget odio molestie eleifend feugiat non lorem.',
    path: '/aboutus'
  },
  ...
  ..
  .

3- Under src/pages folder create a new folder called: new-page

4- Under the folder new-page, create a file called NewPage.js and add the following starter code.

import React from 'react'
import PropTypes from 'prop-types'
import {
  Segment,
  Container,
  Grid
} from 'semantic-ui-react'

const propTypes = {
  pageData: PropTypes.object.isRequired
}
const NewPage = () => (
  <div>
    <Segment basic>
      <Container>
        <h3 id="category-title">Magna Aliqua Enimad</h3>
        <Grid columns={2} stackable verticalAlign="top">
          <Grid.Column>
            <h4 id="article-title">Magna Aliqua Enimad</h4>
            <div id="article-content">
              <p>
                Nobis at explicabo similique laudantium deserunt, excepturi
                fugit eum voluptatem commodi soluta quaerat, adipisci ducimus
                optio, earum beatae! Cupiditate laboriosam tenetur libero at
                vitae possimus velit est, eum quam ratione. Molestiae, veniam.
              </p>
            </div>
          </Grid.Column>
          <Grid.Column>
            <h4 id="article-title">Magna Aliqua Enimad</h4>
            <div id="article-content">
              <p>
                Nobis at explicabo similique laudantium deserunt, excepturi
                fugit eum voluptatem commodi soluta quaerat, adipisci ducimus
                optio, earum beatae! Cupiditate laboriosam tenetur libero at
                vitae possimus velit est, eum quam ratione. Molestiae, veniam.
              </p>
            </div>
          </Grid.Column>
        </Grid>
      </Container>
    </Segment>
  </div>
)

NewPage.propTypes = propTypes
export default NewPage

5- Finally update the page routes file PageRoutes.js as below:

import React from 'react'
import PropTypes from 'prop-types'
import { Route, Switch } from 'react-router-dom'
import AboutUs from '../pages/about-us/AboutUs'
import Portfolio from '../pages/portfolio/Portfolio'
import Services from '../pages/services/Services'
import Contact from '../pages/contact/Contact'
import NewPage from '../pages/new-page/NewPage'

const propTypes = {
  path: PropTypes.string,
  activePage: PropTypes.object.isRequired
}

class PageRoutes extends React.Component {
  render() {
    const { activePage } = this.props

    return (
      <Switch>
        <Route path="/aboutus">
          <AboutUs pageData={activePage} />
        </Route>
        <Route path="/newpage">
          <NewPage pageData={activePage} />
        </Route>
        <Route path="/portfolio">
          <Portfolio pageData={activePage} />
        </Route>
        <Route path="/services">
          <Services pageData={activePage} />
        </Route>
        <Route path="/contact">
          <Contact pageData={activePage} />
        </Route>
      </Switch>
    )
  }
}

PageRoutes.propTypes = propTypes
export default PageRoutes

SEO

Don't forget to update the index.html file with your info. Also you can use Favicon Generator and update the favicons under root folder.

Deployment

In order to deploy your project to Firebase Hosting, follow these instructions:

1- Make sure that Firebase CLI tools is installed locally.

2- Login to Firebase and create a projects

3- Update .firebaserc file with your project name.

4- Run yarn build or npm run build

5- Run firebase deploy

Sending Feedback/Contribution

Always open to your feedback & contributions.

License

The MIT License (MIT) Copyright (c)