Simple CRUD (Create Read Update Delete) in React Js.

A simple CRUD application build with react, redux, redux-thunk, webpack4 followed industry standard coding pattern with production build ready.

CLICK TO SEE FRONTEND DEMO

RAILS BACKEND API

CLICK TO SEE DEMO Video

• Ready to start React Redux App
• SASS, CSS and Image loader all configured
• Redux-thunk configured with react-router
• Prop-types enabled
• Supports Emoji's
• Supports Checkbox
• Supports Select creatable
• Froala wysiwyg editor integrated
• Webpack4 and babel configured
• Hot reloading configured
• Eslint and prettier pre configured
• Enzyme test tools configured
• Production build optimized

Tech stacks behind

• webpack4 - Bundle your scripts.
• React - React is a JavaScript library for building user interfaces.
• Redux - Redux is an open-source JavaScript library for managing application state globally.
• Redux Thunk - Redux thunk is a middleware that helps you to write an async logic like AJAX requests.
• React Router - Declarative routing for React.
• Connected React Router - A Redux binding for React Router v4 and v5.
• Prop Types - Type checking for React props and similar objects.
• React Froala wysiwyg - The Next Generation WYSIWYG HTML Editor.
• Babel polyfill - Babel polyfill allows you to use full sets of ES6 features.
• Emoji Mart - Emoji Mart is a Slack-like customizable emoji picker component for React
• Lodash - Lodash is a JavaScript library which provides utility functions for common programming tasks using the functional programming paradigm.
• React Responsive Modal - A simple responsive and accessible react modal compatible with React 16 and ready for React 17.
• React Select - The Select control for React.
• React Spinners - Loading spinners for React.js
• Eslint - Linting utility for JavaScript and JSX.
• Prettier - Code formatter.
• Babel - Babel is javascript compiler which transpiles es6 into browser-compatible JavaScript code.
• Yarn - Dependency Management.
• Jest - JavaScript Testing web frameworks.
• Enzyme - Enzyme is a JavaScript Testing utility for React.

Snapshots

Getting Started

You can simply clone

git clone https://github.com/cloud-github/reactjs-crud.git

the boilerplate to get started.

Prerequisites

• Nodejs v8 or above

You can check your node version using the following command:

node --version

Installing

Install dependencies and start using yarn:

yarn install
yarn start

Or via npm:

npm install
npm start

Testing

You can also run your tests using:

yarn test

It´s also possible to generate the code coverage of your code. Jest will generate a HTML file with all information from your tests. To do this run the command:

yarn test:coverage

Production build ready

You can generate an optimized distribution bundle. To do this run the command:

yarn build

OR

npm run build

It´s also possible to check the size and content of your bundled file. To do this run the command:

yarn analyze

OR

npm run analyze

That's all for Reactjs frontend Part

Rails Part

To do CRUD operation, you also need backend. You can use any backend, you like.

OR, You can clone this ready made ruby on rails backend.

git clone https://github.com/cloud-github/rails_api_only.git

Follow further instructions using this link. https://github.com/cloud-github/rails_api_only.git

If you like the project, please don't forget to give a star. Thanks in advance.

Contributing

You are heartly welcome to make a pull request.