Hello world

Description

By now you've used many different gems with Rails and this exercise will have you connect previous knowledge with new knowledge as you get a chance to use the react-rails gem. This gem allows you to build React components as a part of your Rails JavaScript and serve it in a component, react_component, to be used in a regular ERB file.

Learning objectives

Implement a connection between a Ruby on Rails back-end and React front-end.
Understand the pros and cons of different approaches of connecting Ruby on Rails back-end with React front-end.

Getting Started

To get a local copy for this project and running follow these simple example steps.

Prerequisites

You need to have git installed in your machine.
Install a recent version of Postgres.
Already install Rails
Already insatll React

Setup

Creating the hello-rails-react

use PostgreSQL database

$   rails new rails-react-tutorial --webpack=react -d=postgresql

$   cd rails-react-tutorial # Move into the application directory

Now run these commands to install everything.

$   bundle install
$   rails webpacker:install
$   rails new rails-react-tutorial --webpack=react -d=postgresql
$   rails webpacker:install:react
$   rails generate react:install
$   yarn install

Clone this repository

$ https://github.com/sja-thedude/hello-rails-react.git
$ cd hello-rails-react

Create the database

$   rails db:create   # or
$   rake db:create

Install linter and

Rubocop gem

$  bundle init
$  bundle install

Stylelint package

$  npm init -y
$  npm install
$  npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

Run linter

$  rubocop .
$  npx stylelint "**/*.{css,scss}"

In auto-correct mode, RuboCop will try to automatically fix offenses:

$  rubocop -A # or
$  rubocop --auto-correct-all
$  npx stylelint "**/*.{css,scss}" --fix

Starting up the Web Server

We can now run:

$   rails s # or
$   rails server -p3000 # to visit http://localhost/

To see React-Router working:

$  ./bin/webpack-dev-server # enables auto-webpacking

To restart the server

$  sudo service postgresql restart

Listing Existing Routes

You can now visit http://localhost:3000 to view your new website!

Generate controllers

  $  rails generate controller static index  
  $  rails generate controller api/messages index

Generate a new React component

  $  rails generate react:component Greeting greeting:string 
  $  rails generate react:component App

NPM

Redux Thunk

  $  Redux Thunk

Logger for Redux

  $  npm i redux-logger

React Redux Loading Bar

  $  npm i react-redux-loading-bar

Generate Schema

To push the Migration into the database

  $   rails db:migrate

We use the seeds.rb file to records in the database
To drop, create a table and to migrate and send the seed into the database:

  $   rails db:drop db:create db:migrate db:seed

To check available routes

  $   rails routes

Built With

This project is build with:

Authors

👤 Syeda Juveria Afreen

GitHub: @sja-thedude
Twitter @sja_thedude
LinkedIn sja-thedude

🤝 Contributor

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Credit to Gregoire Vella on Behance, the author of the original design guidelines

📝 License

This project is MIT licensed.