React Components Explained – codeburst

  • 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…
  • 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…
  • 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…
  • 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…

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

React v16.2.0: Improved Support for Fragments

React 16.2 is here:  - the biggest addition is support for

  • To make the authoring experience as convenient as possible, we’re adding syntactical support for fragments to JSX: – – In React, this desugars to a element, as in the example from the previous section.
  • Support for fragment syntax in JSX will vary depending on the tools you use to build your app.
  • Support for JSX fragments is available in Babel v7.0.0-beta.31 and above!
  • Upgrade to the latest TypeScript with the command: – – Flow support for JSX fragments is available starting in version 0.59!
  • A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more!

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:
Continue reading “React v16.2.0: Improved Support for Fragments”

Learning React.js: Getting Started and Concepts ― Scotch

  • — React Code Goes Here — – – /script – /body – /html – In React, components mount to an element, so in this example we can use the div myDiv as it’s parent container.
  • These attributes are available in our component as this.props and can be used in our render method to render dynamic data: – var MyComponent = React.createClass({ – render: function(){ – return ( – h1Hello, {this.props.name}!
  • Below, see how we can set our component’s state: – var MyComponent = React.createClass({ – getInitialState: function(){ – return { – count: 5 – } – }, – render: function(){ – return ( – h1{this.state.count}/h1 – ) – } – }); – – Events – React also has a built…
  • Lets make our count increment below using events: – /** @jsx React.DOM */ – – var Counter = React.createClass({ – incrementCount: function(){ – this.setState({ – count: this.state.count + 1 – }); – }, – getInitialState: function(){ – return { – count: 0 – } – }, – render: function(){ -…
  • == -1; – }); – this.setState({items: updatedList}); – }, – getInitialState: function(){ – return { – initialItems: [ – “Apples”, – “Broccoli”, – “Chicken”, – “Duck”, – “Eggs”, – “Fish”, – “Granola”, – “Hash Browns” – ], – items: [] – } – }, – componentWillMount: function(){ – this.setState({items: this.state.initialItems})…

Today we are going to kick off the first installment in a new series of tutorials, Learning React, that will focus on becoming proficient and effective with Facebook’s React library. Before we start building anything meaningful, its important that we cover some base concepts first, so lets get this party started.
Continue reading “Learning React.js: Getting Started and Concepts ― Scotch”

Tutorial on how to make a custom React renderer #ReactJS

Tutorial on how to make a custom React renderer  #ReactJS

  • This is a small tutorial on how to build your custom React renderer and render the components to the host environment you need.
  • In part three, we will build a function that will parse the input component and will return the output (rendered children and props).
  • In part four, we will create a render method which will render our input component.
  • We will create a custom renderer that will render a React component to a word document.
  • It generates a output stream and not a file.

Making-a-custom-React-renderer – Tutorial on how to make a custom React renderer
Continue reading “Tutorial on how to make a custom React renderer #ReactJS”

Jest: Test suite with superpowers 😎

  • No need to write test cases for each component returned by render method.
  • The test case will look somthing like this:

    Whenever Jest sees this line , it is going to generate a snapshot and compare it with stored snapshot.

  • Snaps should be there in each dev’s machine so that if one of the devs changes some other component unknowingly, the snap test for that component will fail and he/she would know before pushing it.
  • You can also have a look at the example test case in our boilerplate code here.
  • We will write test case for the methods including snapshot test.

Jest: Test suite with superpowers 😎
Continue reading “Jest: Test suite with superpowers 😎”

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”