Bundling React Native during Android release builds

Bundling #reactnative during Android release builds

  • Again, the sample project is the key, look at the sample app’s build.gradle file.Notice the config section:/** * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets * and bundleReleaseJsAndAssets).
  • By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server.
  • * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle * bundleAssetName: “index.android.bundle”, * * // the entry file for bundle generation * entryFile: “index.android.js”, * * // whether to bundle JS and assets in debug mode * bundleInDebug: false,…*/These values allow…
  • gradle file, we were able to hook into the bundling command on all our release builds.Our config:// Configures the bundleJS commands for React-Nativeproject.
  • ext.react = [ // whether to bundle JS and assets in debug mode bundleInDebug: false, // whether to bundle JS and assets in release mode bundleInRelease: true, // the root of your RN project, i.e. where “package.json” lives root: from: “path to RN this, we can correctly build our signed,…

I would have expected this to be a straightforward, well documented workflow, but was unfortunately a bit disappointed. It took a bit of digging to finally automate bundling process within our release
Continue reading “Bundling React Native during Android release builds”

React Version 16.0 Released

#React Version 16.0 Released cc @CsharpCorner @PranavMTL  #ReactJS #React16

  • Facebook Inc. has released a new version of React, their very promising JavaScript Library for UI development.
  • The new React v16.0 contains a number of updates and new features.
  • “We’re excited to announce the release of React v16.0!
  • Though the documentation for most of the features has not been yet released, but according to the React v16.0 GitHub download page, the following are the significant features added to this new version of the library.
  • Further information, such as – breaking changes, details of these new features, and download links, can be found at the Official blog or on the GitHub repository

Facebook Inc. has released React v16.0.
Continue reading “React Version 16.0 Released”

Even Better Support for React in Flow – Flow – Medium

Even Better Support for React in Flow @calebmer  #Reactjs #Javascript #Webdev

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return this.props.foo; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”

Speeding up the React UI development with your help: funding

  • As we announced during Neos Conference and in previous blog articles, we would love to deprecate the current EmberJS based Neos backend with the release of Neos 3.3 LTS at the end of this year.
  • However, as we are an open source project which is largely developed during spare time or between paid projects, we cannot guarantee that we will be able to spend enough time on the React UI to get it to the quality we desire and you deserve.
  • Everyone who has worked with the beta of the React UI has given us extremely positive feedback.
  • We want to use it in projects ourselves and want to see most Neos instances switch to it after its release.

We want to make sure the new React UI is production-stable for Neos 3.3 LTS. To achieve this, we need a focused effort as a professional software projec…
Continue reading “Speeding up the React UI development with your help: funding”

Introduction – Developing a native mobile app with React-Native and Typescript – Medium

Introduction  #typescript #javascript #react #reactnative

  • We decided on developing a mobile app with react-native just because the idea of developing a native mobile app with javascript felt very exciting.We also thought of using Typescript with React because we feel it not only just brings type-safety to the javascript code but in-fact brings all the advantages of object-oriented programming allowing us to think javascript code in terms of some well-established design patterns and standards that help us design highly scalable code.
  • The goodies it brings — abstract and concrete classes, types, interface, enums are hard to resist.As we started on the development of the app, I thought it would be a good idea to put our learnings here in a series as it not only will help us document our tasks but would also help other react-native learners and developers.In this series, we will document step-by-step each task that we work on during the development of this app, right from the initial project set-up to its final implementation and release to the app store.What app we are going to developThe app we would be developing would be a simple photo albums app, where user can create an album and add photos to its from his/her mobile.Tech-stack to be usedUI using react-native + TypescriptStorage — Azure DocumentDBREST API using node.js, Azure DocumentDB Node APIAuthentication — oAuth (Facebook and Google)Targeted platformsIn its first version, we are planning to target only Android platform simply because couple of us in the team don’t own a Mac Book and apple doesn’t allow to develop iOS apps from any other operating system.Github RepoOur LimitationsWe are all learners of react/react-native, also this being a side project that we all will work on in our spare time, we are anticipating the project to go on a bit slow pace.Functional Testing — we don’t have a QE Automation expert in our team yet, so for most of its part Functional testing would be manual3.
  • Environment — for the UI app, we will use emulators on our local system to test our code.
  • Being a mobile app, it would be released to Android Playstore and thus we don’t need to maintain any servers for the UI app4.
  • So stay tuned, more stories to come soonInterested in joining us in this wonderful journey?we’ll be glad to have you in our team, pls email to us at iw2dev@gmail.com with a little bit about yourself

Couple of weeks back, I and some of my friends, started on a side/hobby project to learn reactJS. We decided on developing a mobile app with react-native just because the idea of developing a native…
Continue reading “Introduction – Developing a native mobile app with React-Native and Typescript – Medium”

Next.js 2.0 plays better with React and JavaScript

Next.js 2.0 plays better with #ReactJS and #JavaScript:

  • Next.js, a minimalist framework for server-rendered React applications, has moved to a 2.0 release focused on enabling smaller apps and making it easy to use React.
  • Developers can place React components in a directory and, by then run to get automatic code-splitting, routing, hot code reloading, and universal server- and client-side rendering.
  • Along with React, the Babel JavaScript compiler and Webpack module bundler have served as underpinnings of Next.js.
  • “We deployed a new lazy compilation mechanism that only subscribes to the pages that you’re actually working on — i.e.: all the component trees currently rendered,” developers said in a bulletin about the new version.
  • “This will potentially introduce new opportunities, like the ability to stream HTML from the server as it is generated,” Next.js developers said.

Version 2.0 of the minimalist JavaScript framework allows for smaller, more efficient apps
Continue reading “Next.js 2.0 plays better with React and JavaScript”

PrimeReact 1.0.0-alpha.1 Released

PrimeReact is released featuring over 40 open source rich UI components for @reactjs.

  • PrimeTek is excited to announce the very first release of PrimeReact, a library of open source rich UI library for React.
  • PrimeReact is the new addition to the Prime ecosystem of open source UI libraries which are used by over 1 million developers around the world in software companies, world renowned brands, banks, financial institutions, insurance companies, startups and universities.
  • Similar to PrimeFaces (Java), PrimeNG (Angular) and PrimeUI (jQuery), PrimeReact provides a wide range of components.
  • PrimeReact team at PrimeTek is now working on data components, by the end of may, we’ll introduce DataTable, Tree and TreeTable.
  • PrimeReact is licensed under MIT license and available for download at npm.

PrimeTek is excited to announce the very first release of PrimeReact, a library of open source rich UI library for React.
Continue reading “PrimeReact 1.0.0-alpha.1 Released”