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”

Themes in React Native – Adam Bene – Medium

Themes in React Native  #reactnative #javascript #react #reactjs #reactjs

  • Themes in React Nativetheme provider and UI elementsWhen developing a large scale app it is a good idea to build our own UI components.
  • The styles should be factored out to be DRY.ContextReact context is a suitable tool for dependency injection.
  • Let’s inject our theme.ThemeProvider theme={lightTheme} ButtonTap param is props, 2nd is context.contextTypes has to be defined in order to receive properties in context.
  • Otherwise context will be empty.const Button = ({ text }, { theme }) = ( TouchableHighlight Text style={{ theme.color }}{text}/Text = { theme: PropTypes.shape({ color: PropTypes.string })}ThemeProviderThe return value of getChildContext() will be propagated to its children down the component tree as context.childContextTypes property is needed to defined.class ThemeProvider extends React.Component { getChildContext() { return { theme: this.props.theme } } render() { return this.props.children = { theme: PropTypes.shape({ color: PropTypes.string })}Change ThemesThemes can be changed through props.
  • The example below toggles two themes in the state.light theme by defaultdark theme with smaller border radius, paddings, margins and fontsWorking ExampleYou can try out a working example both on iOS and Android after setting up development environment.react-native run-iosreact-native run-androidSee Also

When developing a large scale app it is a good idea to build our own UI components. The styles should be factored out to be DRY. React context is a suitable tool for dependency injection. Similar to…
Continue reading “Themes in React Native – Adam Bene – Medium”

Extracting Logic from React Components

Extracting Logic from #ReactJS Components:  by @Jack_Franklin #Javascript

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

How I ended up with ReactJS – codeburst

How I ended up with ReactJS

  • How I ended up with ReactJSAs the web platform is evolving day by day, every web developer want to develop responsive and highly interactive web applications.Most of the web developers started using javascript frameworks like AngularJS, ReactJS, VueJS, EmberJS and many more.
  • Even the Javascript started evolving with the help of large number of communities, lot of new frameworks coming up everyday.
  • Initially I use to manipulate the data use javascript and jQuery, these are very good in handling events and some UI related manipulations like events, but the real problem come when you started working with APIs.
  • As every component in the server side changing to JSON for better inter application communication, it is better to choose a side of any framework.CHOOSING A SIDEEvery JavaScript framework is having its own features.
  • But in my observation, while compared to react the component rendering speed is almost similar, there might be some places where the React cant perform well compared to Vue.Aesthetic CodeI do not find Angular as a beautiful framework is because of its interoperability with HTML, most of the people like it, where they don’t need to worry about JS and can customize a lot of things with new Angular attributes inside HTML.

As the web platform is evolving day by day, every web developer want to develop responsive and highly interactive web applications. Most of the web developers started using javascript frameworks like…
Continue reading “How I ended up with ReactJS – codeburst”

How I ended up with ReactJS – codeburst

How I ended up with #ReactJS

  • How I ended up with ReactJSAs the web platform is evolving day by day, every web developer want to develop responsive and highly interactive web applications.Most of the web developers started using javascript frameworks like AngularJS, ReactJS, VueJS, EmberJS and many more.
  • Even the Javascript started evolving with the help of large number of communities, lot of new frameworks coming up everyday.
  • Initially I use to manipulate the data use javascript and jQuery, these are very good in handling events and some UI related manipulations like events, but the real problem come when you started working with APIs.
  • As every component in the server side changing to JSON for better inter application communication, it is better to choose a side of any framework.CHOOSING A SIDEEvery JavaScript framework is having its own features.
  • But in my observation, while compared to react the component rendering speed is almost similar, there might be some places where the React cant perform well compared to Vue.Aesthetic CodeI do not find Angular as a beautiful framework is because of its interoperability with HTML, most of the people like it, where they don’t need to worry about JS and can customize a lot of things with new Angular attributes inside HTML.

As the web platform is evolving day by day, every web developer want to develop responsive and highly interactive web applications. Most of the web developers started using javascript frameworks like…
Continue reading “How I ended up with ReactJS – codeburst”

Extracting Logic from React Components

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”