NevinhaJs

  • Documentation
  • Tutorials
Docs Menu
  • Basics
    • Your first component
  • Lifecycle, state and props
  • Motions
    • Motions Reference
  • Providers
    • Sticky Provider
    • Parallax Provider

Your first component

We've seen how to setup our project, now we'll see how to create our first component using NevinhaJs.

Importing NevinhaJs

NevinhaJS works following the architecture of components (lifecycles, states ands props), motions and providers. By default we exports NevinhaComponent, render, NevinhaDOM and ParallaxProvider.

For starting to use, the basics exported variables that you'll need to import, are:

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

Where:

  • NevinhaComponent: The component class that is responsible to render your component instance. Every NevinhaComponent instance has it own lifecycle and state methods.
  • render: The render method responsable for rendering your component, basically it takes your component markup and send for the Nevinha Js virtual DOM algorithm
  • NevinhaDOM The method that converts JSX syntaxe to javascript object literal language. Every JS file that uses JSX syntaxe, needs to import NevinhaDOM method.

The App component

As we said, create a nevinha component is so easy, all that you need is create a class extending NevinhaComponent class and parse your HTML markup in the render method.

Let's see how it's in the code:

app.js

class App extends NevinhaComponent {
    render() {
        return (
            <div scaleBounce>
                <h1 className="introduction-text">
                    <p> Hello I'm a Nevinha component and I'm using the scaleBounce animation effect</p>
                </h1>
            </div>
        );
    }
}
11
 
1
class App extends NevinhaComponent {
2
    render() {
3
        return (
4
            <div scaleBounce>
5
                <h1 className="introduction-text">
6
                    <p> Hello I'm a Nevinha component and I'm using the scaleBounce animation effect</p>
7
                </h1>
8
            </div>
9
        );
10
    }
11
}

If you have already used any component library like React you are used to use JSX language and our lifecycles methods is so similar to React lifecycles. You can see more details about states and components lifecycle in the Lifecycles, states and props section.

Problably you noticed that our App component is using a motion prop called scaleBounce, wich makes your element be animated with a scale effect. You can see more details about motions animation props in the Motions section.

State-full and State-less components

We also have state-full and state-less components as React has, our App Component for example, is a state-full component, and you also can have methods and markup logic inside it, like the example bellow:

class App extends NevinhaComponent {
  constructor() {
    super();

    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  handleKeyPress({target}) {
    this.setState({
      name: target.value
    });
  }

  render() {
    const {name} = this.state;

    return (
      <div scaleBounce>
        <h1 className="hello">
          <p className="margin-hello">Hello! This is the new: </p>
          {name ? name : 'NevinhaJS'}
        </h1>

        <Form handleKeyPress={this.handleKeyPress} />
      </div>
    );
  }
}
​x
 
1
class App extends NevinhaComponent {
2
  constructor() {
3
    super();
4
​
5
    this.handleKeyPress = this.handleKeyPress.bind(this);
6
  }
7
​
8
  handleKeyPress({target}) {
9
    this.setState({
10
      name: target.value
11
    });
12
  }
13
​
14
  render() {
15
    const {name} = this.state;
16
​
17
    return (
18
      <div scaleBounce>
19
        <h1 className="hello">
20
          <p className="margin-hello">Hello! This is the new: </p>
21
          {name ? name : 'NevinhaJS'}
22
        </h1>
23
​
24
        <Form handleKeyPress={this.handleKeyPress} />
25
      </div>
26
    );
27
  }
28
}

In this example above, we are using the constructor method to bind the App context into the handleKeyPress method (to avoid the inline bind in the JSX markup), as we aren't receiving props and children, we don't need to parse them in the super() call.

In this example above, we are receiving a target object that contains a value of the inputed information in the Form component. When this information is typed, we updated the state with the new value, wich will triger the NevinhaJs Diff algorithm, and will or wont display the name that is compared in the render condition name ? name : 'NevinhaJS'.

To create a state-less component, you just need to create a anonymous function returning a JSX syntaxe, like the example bellow:

const someComponent = ({name}, children) => {
  return (
    <div>
      <p>Hello, my name is {name}</p>
    </div>
  );
}
7
 
1
const someComponent = ({name}, children) => {
2
  return (
3
    <div>
4
      <p>Hello, my name is {name}</p>
5
    </div>
6
  );
7
}

The render method

Now that we have our App component created, we just need to create a HTML file with the element wich will have our NevinhaJs application running and our render method.

Let's create a very simple html file:

<body>
  <div id="my-app"></div>

  <!-- my nevinha js bundle -->
  <script src="./bundle.js"></script>
</body>
6
 
1
<body>
2
  <div id="my-app"></div>
3
​
4
  <!-- my nevinha js bundle -->
5
  <script src="./bundle.js"></script>
6
</body>

After we created our HTML file, we can call the render method in the end of our App.js file:

app.js

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

What's next?

Now that you have completed the basics steps to create a simple NevinhaJs component, you can follow reading about Lifecycle, states and props

Contribute on Github! Edit this section.

  • Importing NevinhaJs34 sec read
  • The App component41 sec read
  • State-full and State-less components1 min read
  • The render method20 sec read
    Copy