chrome-extension-starter-reason-react - Getting Started: Building a Chrome Extension with ReasonReact

  •        17

This is a starter example to build a Chrome extension using ReasonReact. It is 100% based on the original started project "Getting Started: Building a Chrome Extension". After you see the webpack compilation succeed (the npm run webpack step), open up the nested html files in src/* (no server needed!). Then modify whichever file in src and refresh the page to see the changes.

https://github.com/jchavarri/chrome-extension-starter-reason-react

Dependencies:

react : ^15.4.2
react-dom : ^15.4.2
reason-react : ^0.3.4

Tags
Implementation
License
Platform

   




Related Projects

reason-scripts - :beginner: Create a ReasonML and React development environment

  •    Javascript

Reason Scripts provides a JS-like development environment for developing web apps with the Reason programming language and React. It bootstraps an environment to automatically compile all Reason code to JS, provide features like reloading and bundling, and seamlessly use JS code from Reason. Make sure to install bs-platform globally using npm instead of yarn.

bs-react-native - BuckleScript bindings for React Native

  •    OCaml

Great that you want to use Reason with React Native! To get everything running are just a couple of steps. Let's assume that you already have a React Native project. Otherwise follow the React Native instructions until you have your app running. and start the watcher with yarn run watch if you haven't done it yet.

reason-tools - Adds Reason to the browser

  •    OCaml

Adds Reason to the browser. When you trigger the extension, it will copy the text you have highlighted and put it into an editor. The text is then translated into the corresponding Reason/OCaml text. Reason Tools will automatically convert between .re, .ml, .rei, and .mli text. In browsers that support it (currently just Chrome), a shortcut is added to open the extension with the highlighted text: Alt+D.

reason-react - Reason bindings for ReactJS

  •    OCaml

Then add some files somewhere (don't forget to change bsconfig.json, if needed).


reductive - Redux in Reason

  •    OCaml

A reimplementation of redux in Reason. However, in the spirit of unifying the Reason community around an authoritative Redux implementation and to avoid churn, we'll polish Reductive to make it production-ready for those who do wish to use it anyway.

crra - Create Reason React App

  •    Javascript

Create Reason React App

razzle - ✨ Create server-rendered universal JavaScript applications with no configuration

  •    Javascript

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR into a single dependency--giving you the awesome developer experience of create-react-app, but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly......whatever comes next.Below is a list of commands you will probably find useful.

chrome-fast-tab-switcher - :keyboard: React-based extension to quickly switch to other open Chrome tabs with just your keyboard

  •    Javascript

This Chrome extension allows you to switch between Chrome tabs in your active window quickly using your keyboard. You can install this extension from the Chrome Web Store if you do not wish to install it from source.

vscode-reasonml - OCaml & Reason support for Visual Studio Code

  •    TypeScript

There is an #editorsupport channel on the Reason discord server. If you would like to discuss an idea or need help or have other feedback you can usually find me (@freebroccolo) idling there. The Reason installation steps also installs Merlin for you, so you can skip the Merlin installation in the next section.

eslint-plugin-immutable - ESLint plugin to disable all mutation in JavaScript.

  •    Javascript

This is an ESLint plugin to disable all mutation in JavaScript. Think this is a bit too restrictive? Well if you're using Redux and React, there isn't much reason for your code to be mutating anything. Redux maintains a mutable pointer to your immutable application state, and React manages your DOM state. Your components should be stateless functions, translating data into Virtual DOM objects whenever Redux emits a new state. These ESLint rules explicitly prohibit mutation, effectively forcing you to write code very similar to Elm in React. There's no reason to use let in a Redux/React application, because all your state is managed by either Redux or React. Use const instead, and avoid state bugs altogether.

react-devtools - An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools

  •    Javascript

React Developer Tools lets you inspect the React component hierarchy, including component props and state.It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).

react-chrome-extension-boilerplate - Boilerplate for Chrome Extension React.js project

  •    Javascript

Boilerplate for Chrome Extension React.js project. The example is edited from Redux TodoMVC example.

reason-apollo - Reason binding for Apollo Client and React Apollo

  •    OCaml

This will generate a graphql_schema.json which will be used to safely type your GraphQL queries/mutations.

show-me-the-react - A Google Chrome extension that highlights React components on the page.

  •    Javascript

It is a page action so the icon () only shows up in the URL bar when the page contains React-managed DOM. It is off by default -- you have to click the icon to highlight the elements rendered/managed by React (and you can click the icon again to toggle the highlight off). You can install this from the Chrome Web Store. Credit for the original idea goes to someone on Twitter who tweeted a one liner. I can't remember who it was or find it so if someone knows, please let me know.

crossbuilder - Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack

  •    Javascript

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are synced between background, injected page, app window, extension popup and badge.

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •    Javascript

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.