Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/learnetto/calreact

React and Rails 5 calendar appointment app
https://github.com/learnetto/calreact

calendar-appointments course course-project javascript lesson rails react react-rails ruby

Last synced: 2 days ago
JSON representation

React and Rails 5 calendar appointment app

Host: GitHub
URL: https://github.com/learnetto/calreact
Owner: learnetto
Created: 2017-01-16T06:20:47.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2020-02-12T10:52:36.000Z (almost 5 years ago)
Last Synced: 2024-12-08T10:50:33.279Z (13 days ago)
Topics: calendar-appointments, course, course-project, javascript, lesson, rails, react, react-rails, ruby
Language: Ruby
Homepage: https://learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course
Size: 1.06 MB
Stars: 190
Watchers: 15
Forks: 54
Open Issues: 3
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

Open-Source-Ruby-and-Rails-Apps - calreact - React and Rails 5 calendar appointment app 🔥 👴 ✅ (Happy Exploring 🤘)

README

        # calreact

This is a simple calendar appointments app built as part of the [The Complete React on Rails Course](https://learnetto.com/users/hrishio/courses/the-complete-react-on-rails-5-course) on [Learnetto](https://learnetto.com).

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](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-course), which includes the first four modules of the complete course.

Demo app - [https://calreact.herokuapp.com/](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](https://github.com/learnetto/calreact/tree/lesson-2.1)

### Module 3 Your first Rails app with React

[Lesson 1 - Calendar appointments app with jQuery and Haml](https://github.com/learnetto/calreact/tree/lesson-3.1)

[Lesson 2 - React props and nested components](https://github.com/learnetto/calreact/tree/lesson-3.2)

[Lesson 3 - React State - Handling user form input](https://github.com/learnetto/calreact/tree/lesson-3.3)

[Lesson 4 - React State - Handling form submission](https://github.com/learnetto/calreact/tree/lesson-3.4)

[Lesson 5 - Using a third-party JavaScript library - Moment.js](https://github.com/learnetto/calreact/tree/lesson-3.5)

[Lesson 6 - Using a third-party React component - react-datetime](https://github.com/learnetto/calreact/tree/lesson-3.6)

[Lesson 7 - Styling with CSS in React](https://github.com/learnetto/calreact/tree/lesson-3.7)

[Lesson 8 - Deploying a react-rails app to Heroku](https://github.com/learnetto/calreact/tree/lesson-3.8)

### Module 4 ECMAScript 6 (ES6)

[Lesson 1 - Introduction to ES6 using the react-rails component generator](https://github.com/learnetto/calreact/tree/lesson-4.1-4.3)

[Lesson 2 - ES6 classes in React](https://github.com/learnetto/calreact/tree/lesson-4.1-4.3)

[Lesson 3 - ES6 Arrow functions in React](https://github.com/learnetto/calreact/tree/lesson-4.1-4.3)

[Lesson 4 - Stateless Functional Components in React](https://github.com/learnetto/calreact/tree/lesson-4.4)

[Lesson 5 - How to use React with the webpacker gem and Rails 5.1](https://github.com/learnetto/calreact/tree/lesson-4.5)

### 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](https://github.com/learnetto/calreact/tree/calreact-ror)

[Lesson 5 - Hot Module Replacement](https://github.com/learnetto/calreact/tree/hmr)

### Module 6 - Forms in depth

[Lesson 1 - Basic form validation](https://github.com/learnetto/calreact/tree/m6l1-rails-validation)

[Lesson 2 - Client-side form validation in React](https://github.com/learnetto/calreact/tree/m6l2-title-validation-in-react)

[Lesson 3 - Code refactor and corrections](https://github.com/learnetto/calreact/tree/m6l3-refactor)

[Lessons 4 to 7 - Generalised client side validations](https://github.com/learnetto/calreact/tree/m6l7-generalised-validations)

[Lesson 8 - Typechecking with Proptypes](https://github.com/learnetto/calreact/tree/m6l8-proptypes)

### Module 7 - React Router

[Lessons 1 to 8 - React Router v4](https://github.com/learnetto/calreact/tree/m7-react-router)

### Module 8 - User authentication with Devise

[Lesson 1 - Using Devise with React](https://github.com/learnetto/calreact/tree/m8-devise)

### Module 9 Using React with a Rails API

#### Backend:

[Lessons 1 and 2 - Setting up a Rails API app](https://github.com/learnetto/calreact/tree/m9l1-rails-api)

[Lesson 3 - API User authentication with devise_token_auth](https://github.com/learnetto/calreact/tree/m9l3-devise-token-auth)

#### Frontend:

[Lessons 1 and 2 - Setting up Create React App and porting components from Rails](https://github.com/learnetto/calreact-frontend/tree/m9l2-port-components)

[Lesson 3 - API User authentication with devise_token_auth](https://github.com/learnetto/calreact-frontend/tree/m9l3-login)

[Lesson 4 - Displaying session data and signing out](https://github.com/learnetto/calreact-frontend/tree/m9l4-sign-out)

### Module 10 Testing React (Frontend)

[Lesson 1 - Testing with Jest](https://github.com/learnetto/calreact-frontend/tree/m10l1-jest)

[Lesson 2 - Testing with Enzyme](https://github.com/learnetto/calreact-frontend/tree/m10l2-enzyme)

[Lesson 3 - Snapshot Testing](https://github.com/learnetto/calreact-frontend/tree/m10l3-snapshot-testing)

[Lesson 4 - Testing Forms](https://github.com/learnetto/calreact-frontend/tree/m10l4-testing-forms)

### Module 11 Styling and animations (Frontend)

[Lesson 1 - Using Bootstrap with React](https://github.com/learnetto/calreact-frontend/tree/m11l1-bootstrap)

[Lesson 2 - CSS Animations and Transitions](https://github.com/learnetto/calreact-frontend/tree/m11l2-transitions)