So you want to learn React.js? – EdgeCoders

So you want to learn React.js?

☞ 

#Redux #javascript

  • This is a good thing, React is a library that does one thing really well, but it’s not the answer to everything.
  • This is not counting the tools and other libraries that complete React like for example, Redux or Relay.
  • Refreshing your knowledge on JavaScript first would not hurt, specially because you need to learn ES2015, not because React depends on it (it does not), but because it’s a much better language, and most of the examples, courses, and tutorials you’ll find use the modern JavaScript syntax.
  • The recommended tool is Babel.jsReact ecosystem libraries: Since React is just the UI language, you’ll need tools to complete the picture and go beyond even MVC.
  • I’ll give you two things to focus on, just forget everything else you encounter and learn these two first once you’re done with React itself: react-router and redux.Right after getting comfortable with the raw concepts of React itself, build a React Native app.

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to…
Continue reading “So you want to learn React.js? – EdgeCoders”

React Native Debugging tips and tricks – codeburst

#reactnative Debugging tips and tricks – codeburst

  • Starting at the beginningThe first step in getting the devtools up and running for your app is to hit Cmd+D(iOS) or Cmd+M(Android) while the simulator is open and click ‘Debug JS Remotely’ like so: – As you can see, this should then trigger the React native debugger tab to open…
  • I don’t know what the keyboard shortcut to do this is in Windows is but I’m sure it’s easily Googleable.
  • One thing to bear in mind as regards keeping this debugger open is that if you have to kill your app for some reason and start it again, they may slow down your app a lot when you relaunch it.
  • But, sometimes the Cmd+D/M shortcut doesn’t work when you’re app is launching.
  • React Native recently introduced a copy keyboard shortcut into the simulator, but it doesn’t work perfectly.

You may be wondering why you should learn debugging tools. The truth is that for a lot of cases they are overkill and there are less overwhelming means of finding out where your program is…
Continue reading “React Native Debugging tips and tricks – codeburst”

React links time! ⚛️ Super easy magic-move transitions ⚛️ Virtual DOM explained…

  • Wrap any element (not just images) in a component.
  • Add the same to create a transition between the elements.
  • A transition is made when an component is unmounted and another is mounted not later than 100ms.
  • The transition is made by cloning the unmounted and mounted components, adding them with position and CSS transformed from the source to the target position.

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.
Continue reading “React links time!

⚛️ Super easy magic-move transitions

⚛️ Virtual DOM explained…”

Sneak Peek: Beyond React 16

Sneak Peek: Beyond #React 16 - React Blog

  • The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
  • On the first demo, Dan says: “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update, called time slicing.
  • On the second demo, Dan explains: “We’ve built a generic way for components to suspend rendering while they load async data, which we call suspense.
  • You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.
  • On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written.

Continue reading “Sneak Peek: Beyond React 16”

Write once, run anywhere with Create React (Native) App and react-native-web

Write once, run anywhere with Create React (Native) App and react-native-web

☞ 

#Native

  • npm install –save-dev babel-preset-expo jest-expo flow-bin react-native-scripts add –dev babel-preset-expo jest-expo flow-bin react-native-scripts react-test-renderer@16.2.0And we add the packages for react-native, react-native-web and expo : – npm install –save expo@^25.0.0 react-native@0.52.0 react-native-weboryarn add expo@^25.0.0 react-native@0.52.0 react-native-webNow let’s add a few files necessary to build a React Native app : – { – “presets”:…
  • flowconfig file in your project directory and add the flow settings available here – { – “expo”: { – “sdkVersion”: “25.0.0” – } – }App.test.js : this is the entry point for testing the React Native app.
  • toJSON(); – then add a App.js file, this is going to be our React Native app entry point.
  • │ – └── src – │ ├── index.js – entry point for CRA (don’t move/rename it) – │ └── … more source files – │ – └── public – ├── index.html – ├── favicon.icon – └── manifest.jsonNow let’s make a few changes to our package.json file and add some useful…
  • import React, { Component } from ‘react’ – import { View, Text, StyleSheet } from ‘react-native’export default class App extends Component { – render() { – return ( – View style={styles.app} – View style={styles.appHeader} – Text style={styles.appTitle}Welcome to React âš›ï¸�/Text – /View – Text style={styles.appIntro} – To get started, edit…

EDIT January 2018: I’ve updated this article with up to date versions (no more beta dependencies!). Thanks @KajiTetsushi for your help! 🙂 EDIT Feb 2018 : All the versions are up to date to go along…
Continue reading “Write once, run anywhere with Create React (Native) App and react-native-web”

WordCamp Europe 2018: Unit Testing Workshop

  • Since the first official German WordCamp in Hamburg in June 2014, Thorsten fell in love with both the WordPress community and WordCamps , in particular, where he likes to both gain and share knowledge .
  • Something that was kept a secret for far too long has just been unveiled: together with my friends and fellow WordPressers, Carl Alexander and Giuseppe Mazzapica, I will be having both the honor and the pleasure of hosting a three-hours-long workshop at WordCamp Europe 2018.
  • Well, the topic of the workshop will be unit testing, and here is what we put in the application: – – We’ve all had these “Wait, what?
  • While you might benefit from having heard one or another thing about unit testing, or software testing in general, there is absolutely no prior knowledge or experience required in order to sign up for this workshop.
  • But downloading PHP, or installing MAMP, or booting up your VM for the very first time is something that should have happened before the workshop.

I’m super excited to be hosting a workshop on unit testing at WordCamp Europe 2018. If you want to know why that is, you might want to read this post.
Continue reading “WordCamp Europe 2018: Unit Testing Workshop”

Microservices with Spring Boot Example

  • This course is a practical course which explains how to realise a microservice infrastructure in order to realise a full-stack web application composed by a “framework-less” Single Page Application and two restful Spring Boot microservices interacting with each other and with two different databases thanks to the implementation of the JPA…
  • You’ll have the basis to generate fastly a microservice infrastructure, to organise your application using different layers according to the “SOLID” principle and following the MVC pattern.
  • You will have the instrument to organise your communication protocols using simple and effective rules, to implement restful web services which communicate with Json Messages.
  • This is course has the same topic of the Italian course Sviluppo Web a Microservizi con Java Spring Boot e Ajax” so it can easily considered as its English version.
  • The example developed is different but with the same topics: microservices, Spring Boot, JPA and Rest calls.

Microservices with Spring Boot Example- This is course has the same topic of the Italian course Sviluppo Web a Microservizi con Java Spring Boot e Ajax” so it can easily considered as its English version.
Continue reading “Microservices with Spring Boot Example”

Sneak Peek: Beyond React 16

  • The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
  • On the first demo, Dan says: “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update, called time slicing.
  • On the second demo, Dan explains: “We’ve built a generic way for components to suspend rendering while they load async data, which we call suspense.
  • You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.
  • On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written.

Continue reading “Sneak Peek: Beyond React 16”

Write once, run anywhere with Create React (Native) App and react-native-web

¡Write once, run anywhere with Create React (Native) App and react-native-web by @yannickdot

  • npm install –save-dev babel-preset-expo jest-expo flow-bin react-native-scripts add –dev babel-preset-expo jest-expo flow-bin react-native-scripts react-test-renderer@16.2.0And we add the packages for react-native, react-native-web and expo : – npm install –save expo@^25.0.0 react-native@0.52.0 react-native-weboryarn add expo@^25.0.0 react-native@0.52.0 react-native-webNow let’s add a few files necessary to build a React Native app : – { – “presets”:…
  • flowconfig file in your project directory and add the flow settings available here – { – “expo”: { – “sdkVersion”: “25.0.0” – } – }App.test.js : this is the entry point for testing the React Native app.
  • toJSON(); – then add a App.js file, this is going to be our React Native app entry point.
  • │ – └── src – │ ├── index.js – entry point for CRA (don’t move/rename it) – │ └── … more source files – │ – └── public – ├── index.html – ├── favicon.icon – └── manifest.jsonNow let’s make a few changes to our package.json file and add some useful…
  • import React, { Component } from ‘react’ – import { View, Text, StyleSheet } from ‘react-native’export default class App extends Component { – render() { – return ( – View style={styles.app} – View style={styles.appHeader} – Text style={styles.appTitle}Welcome to React âš›ï¸�/Text – /View – Text style={styles.appIntro} – To get started, edit…

EDIT January 2018: I’ve updated this article with up to date versions (no more beta dependencies!). Thanks @KajiTetsushi for your help! 🙂 EDIT Feb 2018 : All the versions are up to date to go along…
Continue reading “Write once, run anywhere with Create React (Native) App and react-native-web”

Sneak Peek: Beyond React 16

  • The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”
  • If my device is fast enough, it feels almost like it’s synchronous; if my device is slow, the app still feels responsive.
  • Notice that only the final state was displayed; the rendered screen is always consistent and we don’t see visual artifacts of slow rendering causing a janky user experience.”
  • On the second demo, Dan explains: “We’ve built a generic way for components to suspend rendering while they load async data.
  • On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written.

Continue reading “Sneak Peek: Beyond React 16”