Tutorial

This guide walks through about how to create a sample hello-world application.

Hello World

In Oreact application, A pages directory you will always see in project structure. Here you can associate a page with it's route. A page is a React component exported from a .js file in pages directory.

Example: if you create pages/home/Component.js that will export React component like below.

import React from 'react';

const Home = (props) => {
    return <div>Hello World!</div>
}

export default Home;

Now, bind this component with route in your page pages/home/config.js file. set route as below.

import React from 'react';
import loadable from '@oreact/core/loadable';

const config = {
    ...
    routes: [
            {
                address: ['/home'],                
                component: loadable(() => import('./Component'), {ssr: true}),               
            }
        ],
    ...
}

export default config;

Export this route to the pages route file pages/index.js

import homeConfigs from 'pages/home/configs';

export default [
    ...homeConfigs
];

Congratulations, you've build your first page in Oreact app.