Passing Functions to Components

  • Pass event handlers and other functions as props to child components: – – If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
  • There are several ways to make sure functions have access to component attributes like and , depending on which syntax and build steps you are using.
  • In JavaScript, these two code snippets are not equivalent: – – Binding methods helps ensure that the second snippet works the same way as the first one.
  • Make sure you aren’t calling the function when you pass it to the component: – – Instead, pass the function itself (without parens): – – You can use an arrow function to wrap around an event handler and pass parameters: – – This is equivalent to calling : – -…
  • is a way of queuing a function to be executed in the browser at the optimal time for rendering performance.

If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
Continue reading “Passing Functions to Components”

react-konva now supports @reactjs v16. Now it uses new react-reconciler.

  • React Konva is a JavaScript library for drawing complex canvas graphics using React.
  • Currently you can use all components as React components and all events are supported on them in same way as normal browser events are supported.
  • It is NOT about drawing graphics, but react-konva is exactly for drawing complex graphics on element from React.
  • Konva helps here a lot (especially when you need events for objects on canvas, like “click” on shape, it is really hard to do with vanilla canvas).
  • Somethings like: – – But for simple cases you can use methods: – – For images you need manually create native window.Image instance or element and use it as attribute of component.

react-konva – React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
Continue reading “react-konva now supports @reactjs v16.
Now it uses new react-reconciler.”

react-props-monitor now too with #react16 #reactjs #styledcomponents 😎

react-props-monitor now too with #react16 #reactjs #styledcomponents 😎

  • In-depth checking props in runtime for any React app.
  • PropsMonitor displays exactly which props caused the error based on PropTypes of component.
  • You can define any validation function for props, based on prevProps, nextProps and name of component.
  • ({ nextProps }) { ( . )
  • ; ; }; ({ prevProps, nextProps, name }) { ( name prevProps .

react-props-monitor – In-depth checking props in runtime for any React app.
Continue reading “react-props-monitor now too with #react16 #reactjs #styledcomponents 😎”

Time input #reactjs component I’ve been working on last days:

Time input #reactjs component I've been working on last days:

  • react-simple-timefield
    Simple React time input field, check out demo.
  • Installation
    npm install –save TimeField from value={time} // {String} required, format ’00:00′ or ’00:00:00′
    onChange={(value) = {…}} // {Function} required
    input={MyCustomInputElement} // {Element} default: input
    colon=”:” // {String} default: “:”
    showSeconds // {Boolean} default: false
    /
    Real world example
    import TimeField from App extends React.Component {
    constructor(…args) {
    super(…args);

    this.state = {
    time: ’12:34′
    };

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

    onTimeChange(time) {
    this.setState({time});
    }

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

    return (
    TimeField value={time} onChange={this.onTimeChange} /
    );
    }
    }
    Changelog

    1.3.0 Added custom colon property
    1.2.0 Added custom input field property
    1.1.0 Added showSeconds property
    1.0.0 Initial release

    Contributing
    # run development mode
    cd demo
    npm run dev

    # run demo build
    cd demo
    npm run build

    # run main build
    npm run build

    # run lint
    npm run lint
    Todo

    License
    MIT License.

react-simple-timefield – Simple React time input field, demo:
Continue reading “Time input #reactjs component I’ve been working on last days:”

Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium

Why ReactJs?  #react #reactjs

  • Instead of writing an html line for news, messenger and marketplace you can see that they are basically the same, the only thing that changes is the icon and the information so we can make a component called nav that receives information and an icon.
  • Let code this component:First, we are going to make its container, with an JSON object with the information we want to be see.Now we are going to do the component:Using this practice, we are able to create a web app by just iterating a JSON object, that will pass the information to the containers.Another cool thing of react is its community.
  • There is a lot of components already made so you can just add them to your project as easily as adding a library to your normal html code.
  • Some github repositories that have a lot of components are:· lot of people have a problem with HTML being mixed with JS because they feel like breaking separation of concerns but in reality, it is more of a separation of technologies rather than concerns.
  • It helps your application to be more efficient because you don’t need to repeat code, there is an amazing community behind it, it has some really awesome modules that helps you to manage the unidirectional data flow, as well as managing which component must be render and if it is a component that is visible in all of the pages such as a menu to just render it once instead of every time you change of page.Tldr: react is awesome.

React is a new JavaScript library developed by Facebook released in 2013, but it wasn’t until 2017 that react was stable. React is like the best of both worlds, it has the functionality of JavaScript…
Continue reading “Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium”

React Components Explained – Manoj Singh Negi – Medium

“React Components Explained” by @manojnegiwd  #reactjs #NodeJS #javascript #coding

  • Something like thisimport React from ‘react’;class MyComponent extends React.Component { render () { return div This is a component /div }}class MyOtherComponent extends React.Component { render () { return ( div MyComponent / /div ) }}This way you are able to compose more complex and useful user interface for your users.
  • Component’s render method return JSX which then use to create real HTML output which will be rendered in the browser.The interesting Thing about render method is that it runs every time when your component State or Props updates.
  • Let me show you a exampleimport React from ‘react’;class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: “Manoj” }; } render () { return div My name is {this.state.name} /div }}// if we render this component the output will beMy name is ManojIgnore the super(props) (out of the scope of this article) focus on this.state this is where our component state lives.
  • Let’s see an example.class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: “Manoj” }; this.changeName = this.changeName.bind(this); } changeName () { this.setState({ name: “Your Name” }); } render () { return div onClick={this.changeName} My name is {this.state.name} /div }}In the above code we are telling our React component to call this.changeName whenever user clicks on the div.
  • You can run this code on jsFiddle here.PropsVisualise props as options that can be passed to a component to customize its functionality.For example, I have a heading component which renders a heading with subtitle.class MyHeading extends React.Component { render () { return div h1This is a heading/h1 pSubtitle/p /div }}If I will use this component it will always render same HTML, someting like this.This is a headingsubtitleIf we use our component in this way it is not of much use right ?

The simplest library I ever used in my life is React. As you know React hit is based upon component design. Everything in React is a component which makes it easy to reuse components frequently. You…
Continue reading “React Components Explained – Manoj Singh Negi – Medium”

Lightweight Progress Circles in React Native

#reactNative Countdown and Percentage Circles  #javascript #es6 #react

  • It does not depend on or ART, it’s done purely in CSS.
  • It uses two circles and two half-circles and positions them in a smart way such that they look like the progress circles you see above.
  • Now just put a smaller white circle in the center:

    Two half-circles are enough to cover all percentages from 0 to 100, however you need to be a bit smart about it:

    This is the easy case.

  • The first half-circle will always have a rotation value of , spanning the right side of the circle.
  • The second one is computed easily by converting the percent to degrees:

    We do the same rotation conversion here, but the problem is that we display the full half-circle instead of only the part on the right circle side.

React Native Progress Circles I decided to create my own React Native component to display progress circles. It’s called react-native-progress-circle and you can easily use it in your React Native…
Continue reading “Lightweight Progress Circles in React Native”