BranchesTags

Repository files navigation

calreact

This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.

It's a Ruby on Rails 5 app which uses React.js on the frontend.

You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.

Demo app - https://calreact.herokuapp.com/

Lessons list and links to code:

Module 2 Getting started with React in Rails

Lesson 1 - Installation and setup of Rails 5 app with react-rails gem

Module 3 Your first Rails app with React

Lesson 1 - Calendar appointments app with jQuery and Haml

Lesson 2 - React props and nested components

Lesson 3 - React State - Handling user form input

Lesson 4 - React State - Handling form submission

Lesson 5 - Using a third-party JavaScript library - Moment.js

Lesson 6 - Using a third-party React component - react-datetime

Lesson 7 - Styling with CSS in React

Lesson 8 - Deploying a react-rails app to Heroku

Module 4 ECMAScript 6 (ES6)

Lesson 1 - Introduction to ES6 using the react-rails component generator

Lesson 2 - ES6 classes in React

Lesson 3 - ES6 Arrow functions in React

Lesson 4 - Stateless Functional Components in React

Lesson 5 - How to use React with the webpacker gem and Rails 5.1

Module 5 - Using React with the react_on_rails gem

Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails

Lesson 5 - Hot Module Replacement

Module 6 - Forms in depth

Lesson 1 - Basic form validation

Lesson 2 - Client-side form validation in React

Lesson 3 - Code refactor and corrections

Lessons 4 to 7 - Generalised client side validations

Lesson 8 - Typechecking with Proptypes

Module 7 - React Router

Lessons 1 to 8 - React Router v4

Module 8 - User authentication with Devise

Lesson 1 - Using Devise with React

Module 9 Using React with a Rails API

Backend:

Lessons 1 and 2 - Setting up a Rails API app

Lesson 3 - API User authentication with devise_token_auth

Frontend:

Lessons 1 and 2 - Setting up Create React App and porting components from Rails

Lesson 3 - API User authentication with devise_token_auth

Lesson 4 - Displaying session data and signing out

Module 10 Testing React (Frontend)

Lesson 1 - Testing with Jest

Lesson 2 - Testing with Enzyme

Lesson 3 - Snapshot Testing

Lesson 4 - Testing Forms

Module 11 Styling and animations (Frontend)

Lesson 1 - Using Bootstrap with React

Lesson 2 - CSS Animations and Transitions

About

React and Rails 5 calendar appointment app

learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course

Topics

calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby

Resources

Readme
Activity
Custom properties

Stars

191 stars

Watchers

13 watching

Forks

54 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
calreact
This is a simple calendar appointments app built as part of the The Complete React on Rails Course on Learnetto.
It's a Ruby on Rails 5 app which uses React.js on the frontend.
You can start learning how to use React with Rails for free with The Free React on Rails Course, which includes the first four modules of the complete course.
Demo app - https://calreact.herokuapp.com/
Lessons list and links to code:
Module 2 Getting started with React in Rails
Lesson 1 - Installation and setup of Rails 5 app with react-rails gem
Module 3 Your first Rails app with React
Lesson 1 - Calendar appointments app with jQuery and Haml
Lesson 2 - React props and nested components
Lesson 3 - React State - Handling user form input
Lesson 4 - React State - Handling form submission
Lesson 5 - Using a third-party JavaScript library - Moment.js
Lesson 6 - Using a third-party React component - react-datetime
Lesson 7 - Styling with CSS in React
Lesson 8 - Deploying a react-rails app to Heroku
Module 4 ECMAScript 6 (ES6)
Lesson 1 - Introduction to ES6 using the react-rails component generator
Lesson 2 - ES6 classes in React
Lesson 3 - ES6 Arrow functions in React
Lesson 4 - Stateless Functional Components in React
Lesson 5 - How to use React with the webpacker gem and Rails 5.1
Module 5 - Using React with the react_on_rails gem
Lessons 1 and 2 - Introduction and Migrating the Calendar appointments app to react_on_rails
Lesson 5 - Hot Module Replacement
Module 6 - Forms in depth
Lesson 1 - Basic form validation
Lesson 2 - Client-side form validation in React
Lesson 3 - Code refactor and corrections
Lessons 4 to 7 - Generalised client side validations
Lesson 8 - Typechecking with Proptypes
Module 7 - React Router
Lessons 1 to 8 - React Router v4
Module 8 - User authentication with Devise
Lesson 1 - Using Devise with React
Module 9 Using React with a Rails API
Backend:
Lessons 1 and 2 - Setting up a Rails API app
Lesson 3 - API User authentication with devise_token_auth
Frontend:
Lessons 1 and 2 - Setting up Create React App and porting components from Rails
Lesson 3 - API User authentication with devise_token_auth
Lesson 4 - Displaying session data and signing out
Module 10 Testing React (Frontend)
Lesson 1 - Testing with Jest
Lesson 2 - Testing with Enzyme
Lesson 3 - Snapshot Testing
Lesson 4 - Testing Forms
Module 11 Styling and animations (Frontend)
Lesson 1 - Using Bootstrap with React
Lesson 2 - CSS Animations and Transitions
About
React and Rails 5 calendar appointment app
learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Topics
calendar-appointmentscoursecourse-projectjavascriptlessonrailsreactreact-railsruby
Resources
Readme
Activity
Custom properties
Stars
191 stars
Watchers
13 watching
Forks
54 forks
Report repository
Releases
Packages
Used by
Contributors
Languages