React Native Monthly #4

  • The React Native monthly meeting continues!
  • Here are the notes from each team: – – Trying to lower the entry barrier for the developers embracing React Native with the following things: – – The next session is scheduled for Wednesday 10, October 2017.
  • As this was only our fourth meeting, we’d like to know how do these notes benefit the React Native community.
  • Feel free to ping me on Twitter if you have any suggestion on how we should improve the output of the meeting.

The next session is scheduled for Wednesday 10, October 2017. As this was only our fourth meeting, we’d like to know how do these notes benefit the React Native community. Feel free to ping me on Twitter if you have any suggestion on how we should improve the output of the meeting.
Continue reading “React Native Monthly #4”

Carry #GitHub in your pocket with #GitPoint: #ReactJS #ReactNative

Carry #GitHub in your pocket with #GitPoint:  #ReactJS #ReactNative

  • Built with React Native, GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
  • A few of the things you can do with GitPoint:

    Feel free to send me feedback on twitter or file an issue.

  • Also, if there’s anything you’d like to chat about, please feel free to join our gitter chat!
  • Please take a look at the contributing guidelines for a detailed process on how to build your application as well as troubleshooting information.
  • Feel free to use them or use a new set of keys by creating an OAuth application of your own

git-point – GitHub in your pocket :iphone:
Continue reading “Carry #GitHub in your pocket with #GitPoint: #ReactJS #ReactNative”

Designing Apps using Webflow – ConsciousApps – Medium

Hey React folks, give a try to designing apps using Webflow:  #ReactJS

  • Clearly, styling components from hand using CSS is tough… and not necessary when you have Webflow.
  • Instead, within Webflow, you design each component from scratch.
  • Let’s say you want to create a series of buttons:As you’re designing these individual components in Webflow, be sure to assign them unique classNames since you’ll later be using these classes inside your React component.
  • Once the components look exactly the way you want—and perform all the actions you want (such as on focus, hover, etc.) — simply export the code from within Webflow, like this:Highlight and copy the CSS and paste it into a CSS file that’s called from your root index.html file:link rel=”stylesheet” href=”assets/css/index.
  • css” /Inside your react components, then, simply call the CSS styles, like this:So much easier than creating all this CSS from hand!CSS code exported from Webflow.You can even add nifty transitions inside Webflow!

Anyone who’s talked to me for more than a few minutes about website and app development knows I’m a big fan of Webflow. What used to take me hours to create using raw html, css, and javascript, now…
Continue reading “Designing Apps using Webflow – ConsciousApps – Medium”

Designing Apps using Webflow – ConsciousApps – Medium

  • Clearly, styling components from hand using CSS is tough… and not necessary when you have Webflow.
  • Instead, within Webflow, you design each component from scratch.
  • Let’s say you want to create a series of buttons:As you’re designing these individual components in Webflow, be sure to assign them unique classNames since you’ll later be using these classes inside your React component.
  • Once the components look exactly the way you want—and perform all the actions you want (such as on focus, hover, etc.) — simply export the code from within Webflow, like this:Highlight and copy the CSS and paste it into a CSS file that’s called from your root index.html file:link rel=”stylesheet” href=”assets/css/index.
  • css” /Inside your react components, then, simply call the CSS styles, like this:So much easier than creating all this CSS from hand!CSS code exported from Webflow.You can even add nifty transitions inside Webflow!

Anyone who’s talked to me for more than a few minutes about website and app development knows I’m a big fan of Webflow. What used to take me hours to create using raw html, css, and javascript, now…
Continue reading “Designing Apps using Webflow – ConsciousApps – Medium”

React Native Monthly #1

  • That’s why we decided to organize a monthly meeting where all major React Native contributors can briefly present what their efforts and plans are.
  • The mission for React Native Monthly is simple and straightforward: improve the React Native community.
  • On the first meeting, we had 8 teams join us:

    We hope to have more core contributors join the upcoming sessions!

  • As teams’ plans might be of interest to a broader audience, we’ll be sharing them here, on the React Native blog.
  • As we just started with this meeting, we’d like to know how do these notes benefit the React Native community.

At Shoutem, we’ve been fortunate enough to work with React Native from its very beginnings. We decided we wanted to be part of the amazing community from day one. Soon enough, we realized it’s almost impossible to keep up with the pace the community was growing and improving. That’s why we decided to organize a monthly meeting where all major React Native contributors can briefly present what their efforts and plans are.
Continue reading “React Native Monthly #1”

Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox #ReactJS

  • No more , , , , or any other arbitrarily named and spec ed components to layout your apps.
  • No more , , , or any other arbitrarily named and spec ed props to layout your apps.
  • It might be a good idea to see your components and know how they are laid out without jumping between css files or arbitrary, layout-exclusive components specifications.
  • Since, well, flexbox is a complete solution to build layouts.
  • If you need to use a tag other than for the layout, like or , you can pass an extra prop to the component:

    which will render to this:

    Take a look at Flexbox PropTypes.

flexbox-react – Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
Continue reading “Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox #ReactJS”

Using JSX with Vue.js – Anthony Gore – Medium

Using JSX with Vue.js  #webdevelopment #javascript #react #vuejs #vue #reactjs

  • Using JSX with Vue.jsLove it or hate it, JSX is a popular extension to JavaScript that allows XML tokens in your scripts.If you want to create templates in your script files and you find Vue’s render() function to be difficult to work with, JSX may be just what you need.To demonstrate, here’s a render function without JSX:And with JSX:If nothing else, it’s much easier to read!Of course, JSX cannot be interpreted by the browser.
  • More on this later.Note: this article was originally posted here on the Vue.js Developers blog on 2017/02/27Why use JSX with Vue?There are many ways to specify a template in Vue:Using an HTML fileUsing a template property in your instance/component constructorUsing template tags in single file componentsUsing a render function.If you go with option 4, you have to create your nodes in a very unfamiliar way i.e. using the createElement JavaScript syntax.JSX allows you use a render function and still have the look and feel of HTML.
  • When you click the span it will trigger an alert.Firstly, let’s use Vue in the normal way with separate JS and HTML files:Incorporating a render functionThe following code does exactly the same thing as the above code, the only difference is that rather than using a template we will use a render function to create our template:Incorporating JSXThe render function is a little hard to read, right?
  • And that’s just for one span, imagine using it for a more complex component!Let’s use JSX now:(index.html same as above)Transpiling JSXJSX is just for development and will be transpiled away long before runtime.
  • Simply add it to your Webpack config:Now, when you do a webpack build, your JSX will be transpiled into standard JS.Get the latest Vue.js articles, tutorials and cool projects in your inbox with the Vue.js Developers Newsletter

If you want to create templates in your script files and you find Vue’s render() function to be difficult to work with, JSX may be just what you need. Of course, JSX cannot be interpreted by the…
Continue reading “Using JSX with Vue.js – Anthony Gore – Medium”