React’s ⚛️ new Context API – DailyJS – Medium

React’s ⚛️ new Context API   #reactjs

  • Here’s the simplest useful example I can come up with: – Here’s an even simpler version so you don’t have to open the codesandbox: – const ThemeContext = ThemeProvider extends React.Component { – state = {theme: ‘light’} – render() { – return ( – ThemeContext.Provider value={this.state.theme} – {this.props.children} – /ThemeContext.Provider…
  • , but if that’s not your jam, you could easily implement a Higher Order Component or something else using the context API (which is why it’s the best).
  • The React team will remove the warning about context being an experimental feature because it’s now a “first-class featureâ€� of the framework.
  • Here’s an example: – const ThemeContext = ThemeProvider extends React.Component {/* code */} – const ThemeConsumer = ThemeContext.Consumer – const LanguageContext = LanguageProvider extends React.Component {/* code */} – const LanguageConsumer = AppProviders({children}) { – return ( – LanguageProvider – ThemeProvider – {children} – /ThemeProvider – /LanguageProvider – ) -…
  • react-fns: Browser API’s turned into declarative React components and HoC’s by Jared Palmer ğŸ‘�react-composer: Compose render prop components (what I use in the codesandbox above) by jmeasreact-contextual: Tiny helper around Reacts new context API by Paul HenschelSome tweets from this last week: – P.S.

It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API! OH, AND IT USES A RENDER PROP! NOTE: This is a cross-post from my newsletter. I publish each email to my blog…
Continue reading “React’s ⚛️ new Context API – DailyJS – Medium”

One `npm publish` away from releasing version 1.5.0 of `react-native-maps-directions` :) 🔗

One `npm publish` away from releasing version 1.5.0 of `react-native-maps-directions` :)

🔗

  • Directions component for – Draw a route between two coordinates, powered by the Google Maps Directions API – – Import and render it as a child of a component.
  • The mandatory props are: – – Once the directions in between and has been fetched, a between the two will be drawn.
  • Since the result rendered on screen is a component, all props – except for – are also accepted.
  • The values for the and props can take several forms.
  • They can either be: – – All examples below have the same location, represented in the formats mentioned above: – – Note: The and props don’t need to use the same representation, you may mix them.

react-native-maps-directions – Directions Component for `react-native-maps`
Continue reading “One `npm publish` away from releasing version 1.5.0 of `react-native-maps-directions` 🙂

🔗”

Babel · The compiler for writing next generation JavaScript

  • Babel has support for the latest version of JavaScript through syntax transformers.
  • These plugins allow you to use new syntax, right now without waiting for browser support.
  • Check out our env preset to get started.
  • You can install this preset with – – and add to your presets array.

The compiler for writing next generation JavaScript
Continue reading “Babel · The compiler for writing next generation JavaScript”

Protected routes and Authentication with React and Node.js

Protected routes and Authentication with React and Node.js  #reactjs  #react #Nodejs

  • Front-end App ArchitectureI’m a huge fan of the React Boilerplate architecture so I created something similar to organize my code: – /src – └─── containers // React components associated with a Route – | └─── App // The entry point of the application – | └─── AuthPage // Component handling…
  • component={AuthPage} / – Route exact path=”/connect/:provider” component={ConnectPage} / – Route path=”” component={NotFoundPage} / – /Switch – /div – /Router – ); – } – } – – export default App;Creating the Authentication ViewsNow that all our routes are implemented we need the create our views.  –  The way we declared…
  • First of all, let’s create a forms.json file that will handle the creation of the form on each auth structure of the JSON will be like the following (you can see a customBootstrapClass key that is needed in the Input component): – { – “views”: { – “login”: [ -…
  • Here is the flow: – The user clicks on login with FacebookIt redirects him to another page so he can authorize the appOnce authorized, Facebook redirects the user to your app with a code in the URLSend this code to StrapiAt this point, we need to implement only one lifecycle…
  • catch(err = { – }); – } – – redirectUser = (path) = { – the Providers in the AuthPage – To do so, we need a SocialLinkcomponent like the following: – /** – * – * SocialLink – * – */ – – import React from ‘react’; – import…

So I started a side project to create a tiny boilerplate with nothing more than Create React App to implement the authentication flow with Strapi, a Node.js framework with an extensible admin panel…
Continue reading “Protected routes and Authentication with React and Node.js”

From React To Preact In Seconds – Devcenter

“From React To Preact In Seconds” by @codekayy  #React #reactjs #javascript #coding

  • From React To Preact In SecondsSo I decided to try out Preact after I heard it mentioned in an event that I attended earlier this year.
  • So I added the configuration to my webpack config – resolve: { – ‘alias’: { – ‘react’: ‘preact-compat’, – ‘react-dom’: ‘preact-compat’, – ‘react-addons-test-utils’: ‘preact-test-utils’, – ‘preact-css-transition-group’ – } – }Then I installed the modules by running – $ npm install -save preact preact-compat preact-test-utils version of my react module is…
  • xI aliased react-addons-test-utils and because I’m using the modules in my app.ResultsThe size of my app before changing to preact is shown below – When using reactI got the result below after changing to preact – When using preactGotchasWhen children is not supplied to a component, preact returns an empty array while…
  • You may lose some capabilities of React but not likely as I’ve not lost any.
  • ConclusionPreact is a smaller version of react and it’s code can be easily read.Preact comes with some exciting features like Linked State and so on.Make sure to test your app thoroughly before shipping.Preact documentation is quite easy to read https://preactjs.comIf you liked this, click the 💚 below so other people…

So I decided to try out Preact after I heard it mentioned in an event that I attended earlier this year. I didn’t want to build a new project from scratch so I looked for a simple way to transit my…
Continue reading “From React To Preact In Seconds – Devcenter”

What I learned making my first open source React component

  • A folder for your code, a folder for your demo app (plus dev server and hot loading, yay\o/), a folder that you should use and I didn’t, some build stuff for shipping… – – Basically, it gives you everything you need so you can focus on your component and don’t…
  • You need a demo page so you can show off your component in action.
  • react-lazyload-fadein, for example, has a demo page that shows off different ways you can use it.
  • People will find out about your component in different ways.
  • Especially if someone could figure out how to slurp in the README file and make that demo page for you 🤔 – – The React community is a bit silly and loves to invent new patterns to bicker about.

Continue reading “What I learned making my first open source React component”