Step 2 - Creating your first component

Now that we have all of our environment configurated, we can follow creating our components. But before we do it, we need to create a folder called src and another folder called public.

First, let's create a index.html file in our public folder:

Now, let's create our app component. Inside of src folder, we'll create a app.js file, witch extends of NevinhaCompnonent and will be our app component file.

Every NevinhaJs component needs to extends NevinhaComponent class, you don't need to extend from NevinhaComponent just if your component is a state-less component. Knowing that, let's import NevinhaComponent, the render to render our NevinhaJs application in the #my-app element, and NevinhaDOM, wich we won't use in the code but remember that we have put NevinhaDOM as a pragma of the transform-react-jsx babel plugin and every we will use JSX sintaxe, we'll need to import NevinhaDOM.

So our first app component, will look something like this:

import {NevinhaComponent, render, NevinhaDOM} from 'nevinha-js';

class App extends NevinhaComponent {
    render() {
        return (
            

                some code come here!
            
        );
    }
}

const $root = document.querySelector('#my-app');
render(App, $root);

Now you can follow for the next section, where we'll see how to update our components state, use props and animations.