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”

The Pros and Cons of ReactJS for your Online Business

The Pros and Cons of ReactJS for your #OnlineBusiness via @janlgordon

  • With React, it is possible for webmasters and online business owners to develop large web-based applications that change data while reloading pages.
  • Webmasters can also use React together with other forms of frameworks or JavaScript libraries like Angular in MVC.
  • It makes it possible to reuse components that didn’t produce changes, and this makes programming more comfortable and precise for online business owners.
  • The great news for webmasters is that Google might still find the React component when just the client-side is rendered.
  • ReactJS is a great framework for online business.

This isn’t quite a ReactJS guide for the layman. But it is a useful for business owners, if only to glean enough to know how to talk with your techie
Continue reading “The Pros and Cons of ReactJS for your Online Business”

The Pros and Cons of ReactJS for your Online Business

The Pros and Cons of ReactJS for your Online Business  via @janlgordon

  • With React, it is possible for webmasters and online business owners to develop large web-based applications that change data while reloading pages.
  • Webmasters can also use React together with other forms of frameworks or JavaScript libraries like Angular in MVC.
  • It makes it possible to reuse components that didn’t produce changes, and this makes programming more comfortable and precise for online business owners.
  • The great news for webmasters is that Google might still find the React component when just the client-side is rendered.
  • ReactJS is a great framework for online business.

This isn’t quite a ReactJS guide for the layman. But it is a useful for business owners, if only to glean enough to know how to talk with your techie
Continue reading “The Pros and Cons of ReactJS for your Online Business”

Take 50% off Redux in Motion today, what a deal! #redux #reactjs @thomastuts

Take 50% off Redux in Motion today, what a deal!  #redux #reactjs @thomastuts

  • Redux in Motion introduces you to the powerful Redux library through high-quality video-based lessons and built-in exercises, so you can put what you learn into practice.
  • Redux in Motion guides you through a complete Redux-based web app, start to finish.
  • As you progress you’ll add custom logging and tracking middleware and learn how to combine React with Redux to connect UI components.
  • “It has explained redux better than I have seen elsewhere.”
  • “A good introduction to Redux, and state management more in general.”

See it. Do it. Learn it! Redux in Motion introduces you to the powerful Redux library through high-quality video-based lessons and built-in exercises, so you can put what you learn into practice.
Continue reading “Take 50% off Redux in Motion today, what a deal! #redux #reactjs @thomastuts”

Monday & #ReactNative 💙 #iOS #Android #mobile #apps #DevOps #software

Monday & #ReactNative 💙 


#iOS #Android #mobile #apps #DevOps #software

  • That’s why, today I’d like to share a number of things that boost my productivity while creating mobile app in React Native.
  • Storybook allows you to create stories in which you prepare pre filled UI elements with data that could possibly show up there during normal app lifetime.
  • Later within a few seconds you can easily go through all stories that you’ve described and see how they look on your device / emulator without the need of going through all of these states in normal app flow which takes much longer time.
  • This is a tiny example of a single story, however if you develop a normal app, you will surely have much more of them which may cover all of possible UI states for your components.
  • If your app grows, it’s easy to guess that tests will not run in a matter of milliseconds, but it’s still normal to have a result of them within 1-3 seconds from the time that you saved your file.

A developer needs tools that support her/his workflow to be fully productive. Well, I guess that this statement fits to any profession that you can think of. It is really important for me to feel that the environment that I’m working in really supports my flow and works well with my approach to software development.
Continue reading “Monday & #ReactNative 💙

#iOS #Android #mobile #apps #DevOps #software”

React Alicante 2017 – José M. Pérez – Medium

React Alicante 2017  #react #alicante #reactjs

  • React Alicante 2017This weekend I have been in Spain to attend React Alicante.
  • It’s the first edition of this conference focused in React and React Native.Glenn Reyes on stage talking about code splitting to improve the performance of our React apps.The conference was 3-day long, one day with workshops introducing React and React Native, and 2 days for talks in a single track.It’s the…
  • It was truly international, with all talks delivered in English (something unusual in Spain) and 250 attendees from 25+ countries.The most impressive is that it was arranged by 2 Spanish expats who form the company Limenius, based in Munich.
  • They managed to prove that it’s possible to arrange a good conference in a well-communicated location like Alicante, with good weather and interesting attractions, while making it affordable (the regular tickets for the talks were 99€).
  • Other topics were forms, CSS in JS, Redux/Mobx, code splitting, GraphQL, and React Native.They covered pretty well the current ecosystem of tools when working with React, and they shared learnings that can be applied to our daily jobs.If you are interested in the specifics of the talks, check this list…

This weekend I have been in Spain to attend React Alicante. It’s the first edition of this conference focused in React and React Native. The conference was 3-day long, one day with workshops…
Continue reading “React Alicante 2017 – José M. Pérez – 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”