This project was bootstrapped with Create React App. Any feature or script supported by Create-React-App is also supported.
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.jsFor the project to build, these files must exist with exact filenames:
public/index.htmlis the page template;src/index.jsis the JavaScript entry point.
You can delete or rename the other files.
$ git clone https://github.com/timurcatakli/react-rapid.git
$ cd react-rapid
$ npm install
$ npm run start$ git clone https://github.com/timurcatakli/react-rapid.git
$ cd react-rapid
$ yarn
$ yarn startYour website should be started automatically in your browser at http://localhost:3000
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 NewPage5- 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 PageRoutesDon't forget to update the index.html file with your info. Also you can use Favicon Generator and update the favicons under root folder.
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
Always open to your feedback & contributions.
The MIT License (MIT) Copyright (c)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent