Your Choice JavaScript News

React News Tuesday, February 13

React News TLDR / Table of Contents

  • reactjs/react-transition-group
    • react-transition-group – An easy way to perform animations when a React component enters or leaves the DOM
    • Migration.md Forgot, key prop, component states, GitHub,
  • React Native for Dummies: Get Started With Your First React Native Application.
    • React Native is is a framework that enables you to build cross-platform mobile applications using React and JavaScript. It enables you to use the same components on iOS and Android platforms. The UI…
    • to-do item, React Native, react native application, to-do Item object, React Native development
  • The Elegance Of React – JavaScript Inside –
    • This writeup should be a lightweight introduction into writing elegant code with React. We will be combing React with Ramda to write our application in a functional style. All ideas and examples will…
    • const Item, state, const List, const result, TodoList
  • I’ve seen heaven. And it’s written in JavaScript.
    • Why React Native is the Future
    • React Native, web app, React Native app, native mobile app, Electron-based desktop app
  • YouTube
    • In this video we’ll look at how to configure VS Code to debug React components and Jest unit tests inside a web application that was created by create-react-…
    • upload original content, YouTube, , ,
  • For a drop-in replacement for and , use the v1 release, which is still actively maintained.
  • Documentation and code for that release are available on the branch.
  • You can send pull requests with v1 bugfixes against the branch.

Tags: Migration.md Forgot, key prop, component states, GitHub,

  • Add the code below to the { StyleSheet } from ‘react-native’;const styles = StyleSheet.create({ container: { flex: 1, flexDirection: ‘column’, padding: 10, backgroundColor: ‘white’ }, inputContainer: { height: 50 }, separator: { borderBottomColor: ‘#d1d0d4’, borderBottomWidth: 1 }});export default styles;Create a todo.js file in the src/components directory and add the code…
  • /styles/todoStyles’;class Todo extends Component { constructor(props) { super(props); this.state = { text: ”, todos: [] }; } onSubmit = () = { if (this.state.text) { this.setState(prevState = ({ text: ”, todos: […prevState.todos, { title: prevState.text, done: false }] })); text: ” }); } } render () { return ( View…
  • /src/components/todo’;const App = () = ( View style={styles.container} Text style={styles.welcome} React Native Todo App /Text Todo/ /View ); const styles = StyleSheet.create({ container: { flex: 1 }, welcome: { fontSize: 20, textAlign: ‘center’, margin: 10, },});export default App;Displaying our to-doitemsCreate a todoItemStyles.js file in the src/styles directory.
  • /styles/todoStyles’;class Todo extends Component { constructor(props) { super(props); this.state = { text: ”, todos: [{ title: ‘test’, done: false }] }; } onSubmit = () = { if (this.state.text) { this.setState(prevState = ({ text: ”, todos: […prevState.todos, { title: prevState.text, done: false }] })); text: ” }); } } keyExtractor…
  • == index) })); }…Update renderItem method in the todo class to include the onpressRemove property on the TodoItem component…. renderItem = ({ item, index }) = ( TodoItem item={item} index={index} / ); …Update our todoItem.js file with the code below.import React from ‘react’;import { Text, View, TouchableHighlight } from ‘react-native’;import…

Tags: to-do item, React Native, react native application, to-do Item object, React Native development

  • Think about the following:const comp = (f, g) = x = f(g(x))In component terms we could implement it like so f.e.:const TodoList = (List, mapItems) = s = List(mapItems(s))Now this makes sense, enabling us to to build larger components by composing the smaller ones.const List = c = ul{c}/ulconst Item…
  • So this will only work for a small subset of components.Here is a full working example using Ramda map, compose and prop.import React from ‘react’import { render } from ‘react-dom’import { compose, map, prop } from ‘ramda’const List = items = ul{items}/ulconst Item = todo = li getTodos = prop(‘todos’)const…
  • On that note, most Ramda functions are automatically curried.Heres how mapStateToProps would be applied with Header.const TodoHeader = mapStateToProps(s = s.title, Header)const result = TodoHeader(state)This is starting to sort of look like the connect() function in react-redux, we us mapStateToProps to transform any state specific information to props.
  • Now Header and our previous composed List components can each retrieve state information individually.const TodoList = mapStateToProps(getTodos, compose(List, map(Item))const result = TodoList(state)Obviously mapStateToProps solves one part of the problem, but we still need the ability to compose the results of TodoList with Header to create our App.We cant use compose,…
  • // constantsconst ADD_TODO = ‘ADD_TODO’const DELETE_TODO = ‘DELETE_TODO’// actionsconst addTodo = text = ({type: ADD_TODO, text })const deleteTodo = id = ({ type: DELETE_TODO, id })// reducersconst todos = createReducer([], { [ADD_TODO]: (state, action) = [ { id: getNextId(state), completed: false, text: action.text }, …state ], [DELETE_TODO]:(state, action) = reject(propEq(‘id’,…

Tags: const Item, state, const List, const result, TodoList

  • Write code in JavaScript once and deploy native apps on both iOS and Android?
  • And instead ended up writing two separate native apps, one in Swift for iOS, and the other in Java/Kotlin for Android.
  • For example, one of the more annoying issues I experienced was that the TextInput component of React Native just didnt work well enough on Android for a notes app.
  • I used native modules for other things too, including the encryption module (separate modules for iOS and Android) and the fingerprint authentication module.
  • I was able to re-use about 70-80% of the code from our web app in building the native mobile app.

Tags: React Native, web app, React Native app, native mobile app, Electron-based desktop app

    Tags: upload original content, YouTube, , ,

    Modern React with Redux (86,762 students enrolled)

    By Stephen Grider
    • Build amazing single page applications with React JS and Redux
    • Master fundamental concepts behind structuring Redux applications
    • Realize the power of building composable components
    • Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
    • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

    Learn more.


    The Complete React Native and Redux Course (53,888 students enrolled)

    By Stephen Grider
    • Create real-world native apps using React Native
    • Make truly reusable components that look great
    • Understand the terminology and concepts of Redux
    • Prototype and deploy your own applications to the Apple and Google Play Stores
    • Get up to speed with React design principles and methodologies
    • Discover mobile design patterns used by experienced engineers

    Learn more.


    Advanced React and Redux (35,016 students enrolled)

    By Stephen Grider
    • Build a scaleable API with authentication using Express, Mongo, and Passport
    • Learn the differences between cookie-based and token-based authentication
    • Figure out what a Higher Order Component and how to use it to write dramatically less code
    • Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
    • Set up your own testing environment with Mocha and Chai
    • Realize the power of building composable components

    Learn more.


    React Redux React-Router: From Beginner to Paid Professional (11,715 students enrolled)

    By Leonardo Daniel
    • Building your amazing web applications with React JS and Redux
    • Getting a high-paying job as a front-end developer
    • Getting experience through doing many exercises. Re-enforcing your knowledge of ES6, advanced JavaScript, Redux, React through attempting a lot of quizzes. Practice makes perfect.
    • Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.

    Learn more.


    React Native: Advanced Concepts (16,058 students enrolled)

    By Stephen Grider
    • Make compelling applications using expert-level features of React Native
    • Create amazingly smooth and performant animations
    • Build new React Native apps with Expo
    • Understand the latest Navigation options for new React Native apps
    • Add logic to your Firebase backend with Google Cloud Functions
    • Update your users with cross platform Push Notifications
    • Handle your users going offline with Redux Persist

    Learn more.


    React JS and Redux - Mastering Web Apps (54,299 students enrolled)

    By David Katz
    • Develop entire React JS and Redux applications from scratch.
    • Build applications that deal with APIs and web requests.
    • Discuss ES6 and advanced JavaScript.
    • Create web apps with full authentication, and real-time database.

    Learn more.


    React basic in just 1 hour (22,331 students enrolled)

    By Leo Trieu
    • Taste of how to build your very first React component.
    • How to handle event in components.
    • Understand two key concepts of React: State and Props.
    • How to reuse and nest components.
    • How to transfer data between Parent, Child components.
    • How to work with Array, Form

    Learn more.


    Meteor and React for Realtime Apps (7,889 students enrolled)

    By Stephen Grider
    • Create interactive web apps amazingly fast
    • Build amazing single page applications with Meteor and React JS
    • Master fundamental concepts behind structuring Meteor applications
    • Learn the true purpose of Meteor in a modern application
    • Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
    • Build and prototype interesting personal projects in a weekend

    Learn more.


    GraphQL with React: The Complete Developers Guide (14,683 students enrolled)

    By Stephen Grider
    • Build amazing single page applications with React JS and GraphQL
    • Master fundamental concepts behind structuring GraphQL servers
    • Realize the power of building flexible data schemas
    • Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well
    • Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay

    Learn more.


    Essentials in JavaScript ES6 - A Fun and Clear Introduction (40,155 students enrolled)

    By David Katz
    • Create ES6 applications from the ground up.
    • Use the terminal/command-line application and a code editor to code.
    • Look at ES6 code and understand keyword and concepts.
    • Create live development servers with Webpack.

    Learn more.


    The Full JavaScript & ES6 Tutorial - (including ES7 & React) (55,808 students enrolled)

    By David Katz
    • Code in JavaScript like a pro.
    • Code in es6 comfortably, using all the new features.
    • Build es6 projects from the ground up using tools like webpack and babel.
    • Create a basic ReactJS application from scratch.

    Learn more.


    Comments are closed, but trackbacks and pingbacks are open.