Your Choice JavaScript News

React News Friday, February 9

React News TLDR / Table of Contents

  • Microsoft/TypeScript-React-Starter
    • TypeScript-React-Starter – A starter template for TypeScript and React with a detailed README describing how to use the two together.
    • import Hello, div className, enthusiasm level, export interface, export function
  • A Unified Styling Language – SEEK blog –
    • In the past few years we’ve seen the rise of CSS-in-JS, emerging primarily from within the React community—but why?
    • css, CSS Modules, styles, CSS community, critical CSS
  • Formstate – Type safe forms for React.js with TypeScript
    • HTML forms continue to be the bane of existance for developers around the globe. Even with contemporary declarative UI libraries like React, building complex wizards and so on can become a living nightmare.
    • contemporary declarative UI, UI */ import, HTML forms, seasoned React developers, JSON Schema form
  • Introducing Rekit Studio: a real IDE for React and Redux development
    • We’re very excited to announce the stable release of Rekit Studio, a complete IDE for React, Redux and React Router development! Though it’s maybe new to some of you, it has helped us build…
    • Rekit Studio, project, code, ,
  • daostack/arc
    • arc – DAOstack is an operating system for DAOs.
    • properly delete proposal, cross-platform dev environment, document Feb, docs Voting machines,

Score: 465.5845971871616
URL: https://github.com/Microsoft/TypeScript-React-Starter
Tweeted At: Wed May 10 22:21:29 +0000 2017
Publish Date:
Author: Microsoft

  • If we wanted, we could have written it out as a class as follows: – – Classes are useful when our component instances have some state.
  • Local component state is more useful at the presentational level when creating generic UI elements that can be shared between libraries.
  • Enzyme is a common tool in the React ecosystem that makes it easier to write tests for how components will behave.
  • Because React on its own does not provide built-in support for state management, the React community uses libraries like Redux and MobX.
  • State is updated in an immutable fashion by sending explicit action messages which must be handled by functions called reducers.

Tags: import Hello, div className, enthusiasm level, export interface, export function

Score: 377.81642625315556
URL: https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
Tweeted At: Wed May 24 15:31:37 +0000 2017
Publish Date: 2017-05-22T22:48:10.339000+00:00
Author: Mark Dalgleish

  • When joining an existing long-lived project, it wasn’t uncommon to find that the CSS was the hardest part of the system to figure out.To counter this, the CSS community has invested heavily in trying to address these issues, making our styles more maintainable with methodologies like OOCSS by Nicole Sullivan…
  • Most new libraries instead focus on dynamic style sheets, inserting and removing rules at runtime from a global set of styles.As an example, let’s have a look at JSS by Oleg Slobodskoi, one of the earliest CSS-in-JS libraries to generate real CSS.JSS (Source)When using JSS, you can use standard CSS…
  • For example, JSS can easily bind to React components with the help of react-jss, injecting a small set of styles into each component while managing the global lifecycle for you.import injectSheet from ‘react-jss’const Button = ({ classes, children }) = ( button className={classes.button} span className={classes.label} {children} /span /button)export default injectSheet(styles)(Button)By…
  • So much so that many in the CSS-in-JS community felt like the importance of extracting, naming and reusing components was being lost in all the style-binding boilerplate.An entirely new way of thinking about this problem emerged with the introduction of styled-components by Glen Maddern and Max Stoiber.Styled Components (Source)Instead of…
  • A notable alternative is Glamorous by Kent C. Dodds from PayPal.Glamorous (Source)Glamorous offers the same component-first API as styled-components, but opts for objects instead of strings, eliminating the need to include a CSS parser in the library—reducing the library’s size and performance footprint.import glamorous from ‘glamorous’const Title = glamorous.h1({ fontFamily:…

Tags: css, CSS Modules, styles, CSS community, critical CSS

Score: 317.9510530018762
URL: https://react-etc.net/entry/formstate-type-safe-forms-for-react-js-with-typescript
Tweeted At: Thu Feb 08 19:00:00 +0000 2018
Publish Date:
Author:

  • Numerous server side solutions for form management have been created, and are still in use today.
  • Simple solutions like JSON Schema form generators are great, but can become cumbersome for edge cases.
  • Where generic automatic solutions dont work, developers can roll their own state management and form builders.
  • For forms state management with React.js and TypeScript there is now a project called Formstate, it is a lightweight utility to aid working with tools.
  • Formstate builds on MobX, a state management well integrated with TypeScript and universally accepted as a good alternative to more complex solutions like Redux that can add unnecessary complexity and boilerplate.

Tags: contemporary declarative UI, UI */ import, HTML forms, seasoned React developers, JSON Schema form

Score: 233.5449257142857
URL: https://medium.com/@nate_wang/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542
Tweeted At: Thu Feb 08 04:06:02 +0000 2018
Publish Date: 2018-02-08T04:06:02.221000+00:00
Author: Nate Wang

  • As an IDE, besides code editing, Rekit Studio provides the capability of code generation, dependency diagram, refactoring, build, unit tests and a meaningful way of code navigation.
  • That’s what makes Rekit Studio different from other code editors like Sublime Text, VS Code.See the quick demoBefore the introduction you may want to see a quick demo video about how to use Rekit Studio to manage Redux actions.From the video we can see with Rekit Studio, all you care about…
  • I introduced the practices in two previous articles:Based on the pattern, Rekit Studio knows which files are components, which are actions, where routing rules are defines and so on.
  • Then the project explorer could show the project structure in a meaningful way like below.Project ExplorerRekit Studio knows feature of those project elements, like which actions are asynchronous (with blue mark ‘A’); which components connect to Redux store (with green mark ‘C’); which components are managed by React Router (with…
  • This will cause our project becomes hard to maintain in a short time.Now with Rekit Studio, you can right click a component or action to move, rename or delete it just like you do with other IDEs like Eclipse for Java, Visual Studio for .Net.

Tags: Rekit Studio, project, code, ,

Score: 219.2191244870041
URL: https://github.com/daostack/arc
Tweeted At: Thu Feb 08 05:14:14 +0000 2018
Publish Date:
Author: daostack

  • Arc is the lower layer of the DAO stack.
  • DAOStack integrates with Truffle, an Ethereum development environment.
  • Arc has a prebuilt Docker image that makes development environments consistent and cross-platform.
  • Please install Truffle and initialize your project with .
  • DAOstack Arc is still on its alpha version.

Tags: properly delete proposal, cross-platform dev environment, document Feb, docs Voting machines,

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.