-
Notifications
You must be signed in to change notification settings - Fork 0
Setup a React Project
kitiya edited this page Feb 9, 2020
·
34 revisions
$ 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 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.
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