hello-react-front-end

Description

Since I familiar with Rails and React I put them together in a new kind of 'Hello World!' app. This exercise is going to have you create a React front-end with a Rails back-end and connect them to display a random message.

Learning objectives

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

Link

back-end

Setup

Getting Started

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

Creating the hello-rails-react

$   npx create-react-app@latest hello-react-front-end
$   cd  hello-react-front-end # Move into the application directory

Clone this repository

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

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

https://github.com/facebook/create-react-app/issues/11816

Host the app

heroku login
git remote remove heroku
heroku create sja-thedude-api
git push heroku intgration-tests:main
heroku run rails db:migrate
heroku run rails db:seed

Install linter and

ESLint

$  npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x  @babel/plugin-syntax-jsx@7.x  @babel/preset-react@7.x @babel/preset-react@7.x

Stylelint package

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

Run linter

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

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

$  npx eslint . --fix
$  npx stylelint "**/*.{css,scss}" --fix

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.

sja-thedude/hello-react-front-end