Luna Cute

1,056 views

Welcome!

This React template lets you get started quickly with a simple working example using React (with yarn). If it is your first contribution then you should have a look at the Getting Started document.

The source code for this template is on GitHub, please feel free to come up with proposals to improve it.

Hands-on Demo

Sample React App Boilerplate

import React from 'react';
import './app.css';
import logo from './logo_og.png';
 
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: `Luna is cute`
        };
    }
    render() {
        return (<div>
            <img className='logo' src={logo}></img>
            <h1 className='title'>
                {this.state.title}
            </h1>
        </div>);
    }
}

Check out the markdown file welcome.md to see how this exercise is injected into the template.

Template Resources

markdowns/welcome.md
What you are reading here is generated by this file. Tech.io uses the Markdown syntax to render text, media and to inject programming exercises.

react-project
A simple React project dedicated to run the exercise above. A project relies on a Docker image to run. You can find images on the Docker Hub or you can even build your own.

techio.yml
This mandatory file describes both the table of content and the programming project(s). The file path should not be changed.

Advanced Tech.io features

Tech.io provides all the tools to make great online hands-on content, quizzes, web consoles, and visual content. Please refer to the documentation to learn more about the possibilities.