-
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"
/>
<!-- 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 redux
$ 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