Introducing React Native Android Fragment – In The Hudl – Medium

  • So today we are announcing our first open source project for React Native at Hudl.React Native Android Fragment: Native Android Fragment does exactly what its name implies.
  • It helps to facilitate the development of a React Native application, for a pre-existing Android application that relies on the framework’s Fragment class.
  • It can be downloaded via jitpack and its versioning will attempt to always follow that of React Native’s major.minor versions.Our Android app originated around 2013 when Fragments were the Android standard and we’ve stuck with them ever since.
  • For anyone else that has tried to use React Native, you may also realize that support for Fragments is non-existent.
  • We hope this library, although small, may help others to get started quickly into the React Native ecosystem.

React Native Android Fragment does exactly what it’s name implies. It helps to facilitate the development of a React Native application, for a pre-existing Android application that relies on the frame
Continue reading “Introducing React Native Android Fragment – In The Hudl – Medium”

Intro To React Javascript Library – Nermien M. Barakat – Medium

Intro To React Javascript library for building user interfaces  #javascript #react #reactjs

  • SourceSites Using ReactFacebook, Instagram, Dropbox, NETFLIX, Airbnb, PayPal and More.Prerequisites to use react :Javascript basicsDeclaring variablesCreating and invoking functionsDOM the Document Object Model (basically how Javascript Talks to the Browser)ES2015Class syntaxArrow functionsspread operatorTo undstand some of the concepts under which React operates.React makes it painless to create interactive UIs.
  • Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
  • SourceI.e React is the V (View) in MVC that is used to render views like HTML pages dynamically based on some state, which is often in the form of data.
  • React then updates the generated views whenever the original state changes.Declarative views make your code more predictable and easier to debug.The virtual representation of views in memoryFor the browser’s case, we write HTML using JavaScript in React relying on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data.
  • SourceBuild encapsulated components that manage their own state, then compose them to make complex UIs.SourceSince component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.Learn Once, Write AnywhereYou can develop new features in React without rewriting existing code.React can also render on the server using Node and power mobile apps using React Native.In order to write your first react components you have to be familiers with some of the features react offers like How to:Write React componentsRender data to the pageCommunicate components i.e pass data from one component to anther ?

React is declarative, efficient, and extremely flexible. What’s more, it works with the libraries and frameworks that you already know like jQuery’s UI plugin. React was built to solve one problem…
Continue reading “Intro To React Javascript Library – Nermien M. Barakat – Medium”

API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)

  • Learn how to use API Platform and Symfony to create super easily rich web and mobile applications relying on React (JS) for their presentational layer.
  • In just a few minutes, we will create a hypermedia API thanks to API Platform, Symfony and Doctrine.
  • We will do it step by step, and the API will be 100% functional with support for pagination, validation, filters, resources embedding.
  • The API will be automatically documented using Swagger and Hydra and beautiful user interface for developers will be available.
  • Then, we will introduce all new client-side tools for API Platform:

Slides and videos of my talk during the Symfony Live Paris 2017. Rate this talk on joind.in! https://fr.slideshare.net/coopTilleuls/api-platform-21-when
Continue reading “API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)”

Community Report: React Native Meetup Hack/Mentor Night #1

Checkout our latest #ReactNative #meetup report:

  • We all had an opportunity to discuss our passion with fellow React Native users or ask for advice from mentors that have had more experience with the ever-growing framework.
  • The night started with a short segment to help those that were less familiar with React Native or were interested in a specific area regarding the use of the framework.
  • A list of useful resources were provided targeting specific areas found below:

    To cap off before starting the hack night, the floor was opened to those that were willing to share their experience with React Native and what they were presently working on.

  • Additionally, from more experienced users, ideas and current projects were shared which included exploring popular React Native router libraries, integrating Relay and GraphQL, and exporting designs in Sketch into a format to integrate into a React Native app.
  • As a React Native newbie myself, talking to fellow users helped motivate me even more to learn and gain experience using this framework and even create my own project.

A brief recap of our second React Native meetup group, hosted at Bench Accounting’s new offices. If you wanted to come but missed out, here’s a recap.
Continue reading “Community Report: React Native Meetup Hack/Mentor Night #1”

Take the ReactJS Programming Bootcamp for 91% Off

Take the ReactJS Programming Bootcamp for 91% Off  #ad

  • Take the ReactJS Programming Bootcamp for 91% Off
    Now is your chance to learn ReactJS from scratch with this killer deal from the XDA Depot.
  • The ReactJS Programming Bootcamp will have you master this popular JavaScript library with 44 hours of training and start building powerful user interfaces.
  • Here is everything you’ll get in this package:

    Modern React with Redux
    Learn ReactJS from Scratch
    Build Web Apps with ReactJS and Flux
    ReactJS Course
    Build Apps with React Native
    React for Beginners Tutorial
    Master ExpressJS to Build Web Apps with NodeJS JavaScript
    Hacking with React eBook

    Learn ReactJS from Scratch

    Build Web Apps with ReactJS and Flux

    Developers that buy digital goods through the XDA depot are helping support the XDA-developers website and keep the community alive.

  • Get this deal

Now is your chance to learn ReactJS from scratch with this killer deal from the XDA Depot. The ReactJS Programming Bootcamp will have you master this popular JavaScript library with 44 hours of training and start building powerful user interfaces. This bundle is marked down from $458 to only $39. Here is everything you’ll get in this package:
Continue reading “Take the ReactJS Programming Bootcamp for 91% Off”

GitHub

React Date Picker


#ReactJS #datepicker

  • A simple and reusable Datepicker component for React (with persian jalali calendar support) Demo.
  • The package can be installed via NPM:

    At this point you can import react-datepicker2 and its styles in your application as follows:

    Below is a simple example on how to use the Datepicker in a React view.

  • You will also need to require the css file from this package (or provide your own).
  • The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
  • This starts a simple webserver on thanks to @mohebifar for his open-source project which this component is based on.

react-datepicker2 – react datepicker component.(include persian jalaali calendar)
Continue reading “GitHub”

Parashuram’s blog: Debugging create-react-native-app with VSCode

  • VIDEO

    To get started download VSCode and install the React Native tools extension for VSCode.

  • Time travel debugging
    The extension uses Node to debug the Expo app.
  • If we replace Node with node-chakracore, we also get the ability to use time travel debugging.
  • To try out time travel debugging with create-react-native-app and VSCode

    Download node-chakra nightly builds – it supports Mac, Windows and Linux 🙂
    Grab the debugger code and save it as debugger.js – this is the same code that runs when a React Native app is debugged on Chrome
    To start recording a trace

    Create a folder called logs, adjacent to debugger.js
    Run path-to-node-chakra/bin/node –record debugger.js

    To replay a debugging session 

    Start up VSCode, head to the debug pane and create a new configuration to debug a node project
    Add the additional key value pairs to the configuration (as shown in the video).

  • This basically sets the node executable to be ChakraCore, points it to the location of the logs that are used for time travel, and sets up source maps
    Hit the debug button – you will now see “Reverse Continue” and “Step back” in addition to the usual debug workflow controls

    The time travel debugging part is still experimental, but if it sounds fun, let me know, and I would love to make it a part of the extension.Thanks to the amazing folks on the Chakra team for making this possible !

Continue reading “Parashuram’s blog: Debugging create-react-native-app with VSCode”