-
Notifications
You must be signed in to change notification settings - Fork 0
Setup a React Project
npx create-react-app react-29
or using dot if inside a project folder
npx create-react-app .
- Delete all files but
index.jsin thesrcfolder
import React from "react";
import ReactDOM from "react-dom";
const App = () => <div>Hello World</div>;
ReactDOM.render(<App />, document.getElementById("root"));<header
<!-- CSS Bootstrap -->
<!-- Google fonts -->
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:400,500&display=swap"
rel="stylesheet"
/>
<!-- BootstrapCDN: Font Awesome -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- css file -->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>
<body>
<!-- JS Bootstrap -->
</body>npm install --save react-router-dom
npm install --save axios
Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to .css at incredible speed and automatically via a connect middleware.
npm install --save node-sass
A Predictable State Container for JS Apps
npm install --save redux
Official React bindings for Redux
npm install --save react-redux
LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay Redux actions + state, network requests, console logs, and see a video of what the user saw.
npm i redux-logger
Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.
- Selectors can compute derived data, allowing Redux to store the minimal possible state.
- Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
- Selectors are composable. They can be used as input to other selectors.
npm install reselect --save
Redux Persist takes your Redux state object and saves it to persisted storage. Then on app launch it retrieves this persisted state and saves it back to redux.
npm install --save redux-persist
FSA-compliant promise middleware for Redux.
npm install --save redux-promise
Redux Promise Middleware enables simple, yet robust handling of async action creators in Redux.
npm i redux-promise-middleware
Utilizing tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
npm i --save styled-components
Note
Sass + Styled
There’s no doubt that migrating an app to use styled-components is a big undertaking. But with its support for themes and great tools like sass-extract and sass-extract-js we don’t need to transition all at once. We can start small and add new Styled components as we go that will live alongside our CSS components. All without fear of visual inconsistencies creeping in.
React Reveal is an animation framework for React. It's MIT licensed, has a tiny footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll animations in your application. If you liked this package, don't forget to star the Github repository.
npm i react-reveal --save
import Zoom from 'react-reveal/Zoom';
<Zoom>
<p>Markup that will be revealed on scroll</p>
</Zoom>You should see zooming animation that reveals text inside the tag. If you place this code further down the page you'll see that it'd appear as you scroll down.
React slick is a carousel component built with React. It is a react port of slick carousel.
npm install react-slick --save
npm install slick-carousel --save
import "~slick-carousel/slick/slick.css";
import "~slick-carousel/slick/slick-theme.css";Note: Be aware slick-carousel has a peer-dependancy on jQuery which you, or your colleagues may not like to see in your console output, so you can always grab the CSS from there and convert it into any CSS in JS solution that you might be using.
React Transition Group exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead, it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.
npm install react-transition-group --save
Stripe's Checkout makes it almost too easy to take people's money. This should make it even easier if you're building a react application.
npm install --save react-stripe-checkout
Update the package.json file
"scripts": {
"start": "PORT=3003 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
npm install -g json-server
$ json-server --watch db.json --port 3004