This project is part of ReX Design Language and it can be used to create React UI Components.
For more information visit:
Github
https://github.com/rakuten-frontend
NPM
https://www.npmjs.com/org/rakuten-frontend
- Build tool: webpack 4
- Codebase: Fork of Bootstrap project + ReX custom styles
- Css engine: Sass
- JavaScript component: React
npm install rgm-global-header@0.0.3 --save
This project is a started kit, it contains the settings to start the creations of a React component and publish it to NPM.
Use it as a basement and reference for your own project and customize it as you will.
If you need a full environment to create a React Web App, try the react-create-app to get a full environment for your App or use any other started kit.
For a complete guide of properties for React and HTML classes please visit the Storybook site:
https://rakuten-frontend.github.io/rgm-global-header/
For plug and play components integration.
Example:
import 'rex-core'; // ReX Core dependency
import RexComponent from 'rgm-global-header';
function MyComponent() {
return <RexComponent>Hello World</RexComponent>;
}
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
Example:
import 'rex-core/css'; // ReX Core dependency
import 'rgm-global-header/css';
function MyComponent() {
return <div className="rex-css-style my-component">Hello World</div>;
}
Add it from our CDN into your HTML template or HTML static page.
For development mode:
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.development.css" rel="stylesheet">
<!-- rgm-global-header -->
<link href="https://r.r10s.jp/com/rex/rgm-global-header/0.0.3/rgm-global-header.development.css" rel="stylesheet">
For production mode:
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.production.min.css" rel="stylesheet">
<!-- rgm-global-header -->
<link href="https://r.r10s.jp/com/rex/rgm-global-header/0.0.3/rgm-global-header.production.min.css" rel="stylesheet">
Example:
<div class="rex-css-style my-component">
<h1>Welcome to React</h1>
</div>
Take a look to this nice documentation pages to be more familiar with React and modern Javascript:
https://reactjs.org/docs/getting-started.html
https://developers.google.com/web/fundamentals/
https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea
https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07