-
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
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
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
npm install --save axios
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
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