/hello-react-front-end

This app uses a React front-end and combines it with a Rails back-end to display a random message. Built with Ruby on Rails | REACT | PostgreSQL

Primary LanguageJavaScript

Hello-React-Front-End

This app uses a React front-end and combines it with a Rails back-end to display a random message

Enjoy your Greeting!

Built With

  • PostgreSQL
  • React-Back-End API
  • REACT
  • REDUX
  • Thunk

Milestones

  • Milestone 1: Create a new React app called 'hello-react-front-end'
  • Milestone 2: Initialize your project with Git
  • Milestone 3: Create the App component with react-router
  • Milestone 4: Create the Greeting component that displays a greeting. - Set it up as a route in App component.
  • Milestone 5: Create a store, an action and a reducer that connects to the API endpoint to get the random greeting
  • Milestone 6: Display the random greeting in the Greeting component

Getting Started

To get a local copy up and running follow these simple example steps.

Pre-requisites

  • Text Editor | Git and Github set up

Usage

In your terminal, navigate to your current directory and run this code

git clone https://github.com/steveWDamesJr/hello-react-front-end.git

Then run:

cd hello-react-front-end

Open the project in your favorite code editor. code . for VS Code.

Dependencies

  • Run npm install - to load necessary files from package.json

Linter Setup

  • Apply Linter checks with the following instructions

  • Stylelint: Install stylelint for clean Styles and elimination of related errors. Run:npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x Afterwards create a .stylelintrc.json file and then run npx stylelint "**/*.{css,scss}" to check errors. Use npx stylelint "**/*.{css,scss}" --fix to fix multiple errors.

  • Eslint: To find and fix script errors, run 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 After, create a .eslintrc.json file. Then run npx eslint . to print errors. Use npx eslint . --fix to fix multiple errors.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

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.

Usage

Open app in browser:

npm start

Enjoy your greeting!

Author

👤 STEVE W DAMES JR

🤝 Contributing

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

  • Hat tip to anyone whose code was used

📝 License

This project is MIT licensed.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.