Improving the usability of your modules – kentcdodds

Improving the usability of your modules  #reactjs

  • All you have to do is use it:import getContentForFile from ‘react-i18n’const i18n = App() { return ( div h1{i18n(‘header.title’)}/h1 /div )}So that’s how it works (again, I’m sure some of you are thinking of other libs that could do this better, but please spare me the “well actually.” I’m aware…
  • const content = JSON.parse( … more stuffexport {getContentForFile as default, init}This presents a few challenges for users of the module.
  • Turns out that react-i18n actually exposed another module react-i18n/bootstrap to customize this behavior which is great, but that doesn’t resolve the problem of stuff happening if someone were to import react-i18n first.So what I did was a wrapped all side-effects in a function I exported called init(which was similar to…
  • But it’s ok now because that’s clear const messages = JSON.parse( ) // … other other stuff}// … more stuffexport {getContentForFile as default, init}So this means that anyone using the module now must call the init function, but they’re doing that on their own terms and whenever they want it…
  • However, we’re in the process of “inner sourcing” this module (and perhaps open sourcing it eventually), so folks are going to use it who use different tools and have different use cases.So, if it’s not too much work and doesn’t add too much complexity, then try to make the solution…

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This last week I worked on my…
Continue reading “Improving the usability of your modules – kentcdodds”

React Native and ReactJS – Ahmed Mahmoud – Medium

React Native and ReactJS  #react #frontenddevelopment #webdevelopment #reactjs #reactjs

  • React Native and ReactJSThey’re not quite the sameReact Native is a framework that lets you build mobile apps for different platforms using only javascript, even few contributors customized it to build desktop apps (Mac and Windows).
  • It’s quite similar to ReactJS in a way, however there are some differences between React Native and ReactJS.Is a framework:React Native is a framework, but ReactJS is a JS library.
  • Meaning, for ReactJS you’ll need a bundler like webpack and then you’ll figure out which modules you’ll need for the project, on the other hand, you won’t need any bundler or any other tools to bootstrap your project, only react-native-cli.
  • Doesn’t have HTML:In React Native, you won’t have html elements, you’ll have instead alternative components that work in a similar way, and they map to actual IOS and Android UI components that renders on the app.Because you’re not rendering HTML, you can’t use any ReactJS library that renders HTML, but you most probably will find alternative React Native libraries here.CSS only in JS:In React Native, styling is only done in JS, and it’s not exactly CSS, and it doesn’t always behave like it, nevertheless it looks pretty much like CSS.No CSS Animations:In React Native, you don’t have CSS Animations, the recommended way to animate a component is using Animated API.Developer tools for Code, not for UI:You still can use the same Chrome DevTools to debug your app, also you can use Redux DevTools to inspect the state of your app, but still you can’t inspect the UI with Chrome DevTools, you’ll have to use the platform native inspector (XCode/Android studio).
  • Tools:XCode (for IOS)Andriod Studio (for Andriod)Device (if you don’t want to run the app only on simulators)Here’s a React Native crash course that’ll help you get started really quickly.

React Native is a framework that lets you build mobile apps for different platforms using only javascript, even few contributors customized it to build desktop apps (Mac and Windows). It’s been…
Continue reading “React Native and ReactJS – Ahmed Mahmoud – Medium”

Atomic design, Angular 2 and Redux – Lieuwe van Brug – Medium

Atomic design, Angular 2 and Redux  #angular #webdevelopment #redux #design #reactjs

  • How do you setup the frontend to be quick in prototyping?As a ux’er, you probably heard of Brad Frost and his idea of Atomic Design.
  • It’s basically a design system to divide your frontend into components.
  • And because it is a ux design system, communicating with the ux’er is very easy.
  • When an event is needed in one of the components, it just fires it to the Redux store, the centralised state is updated and all subscribed components are updated afterwards.
  • In my experience, atoms and molecule level for the input/output system and the organisms and templates to the redux store.

A match made in heaven. Last year I got the change to start a whole new product in the rol of frontend architect & developer. The starting team was only a product owner, ux’er and myself to start off…
Continue reading “Atomic design, Angular 2 and Redux – Lieuwe van Brug – Medium”

React enables use of code from WordPress in other Open Source projects

  • React enables use of code from WordPress in other Open Source projects
  • WordPress Calypso is a shell for WordPress, that uses the REST APIs to communicate to the WordPress.com backend.
  • WordPress is a hugely popular Open Source.
  • Some sources claim a whopping 25% of all web sites are powered by WordPress.
  • With the WordPress Calypso project being Open Source, the component based architecture allows use of WordPress components outside of WordPress.

WordPress is a hugely popular Open Source. The blogging platform turned content management system runs a large portion of the web. Some sources claim a whopping 25% of all web sites are powered by WordPress. But it has had limited effect on other open source projects.
Continue reading “React enables use of code from WordPress in other Open Source projects”