-
Install
create-react-app
through running this command:npm i -g create-react-app
. -
Create a new ReactJS project through running this command:
yarn create react-app <project-name
. Example:yarn create react-app react-css-transition-group-demo
-
Going into the created project's directory and install these optional dependencies:
-
Redux - Run
yarn add redux react-redux
command to use Redux store & action creators in the project. -
Animation - Run
yarn add react-transition-group
command if you'd like to apply animation by using React CSS Transition Group -
Fake data generator - Run
yarn add faker
command if you wish to generate fake data in your react.js demo application. -
Axios - Run
yarn add axios
command if your reactjs application is going to talk with any REST API Endpoints. -
Redux-Promise - Run
yarn add redux-promise
command if you wish to unwrap any Promise within your state's payload. -
Thunk - Run
yarn add redux-thunk
command if you wish to handle dispatch method within your action creators.
-
-
Run the project through invoking
yarn start
command then browse tohttp://localhost:3000
. Confirm that the default ReactJS page is displayed. -
create-react-app
created several default files we may want to get rid and replace them with files which suit to our taste:-
Get rid
logo.svg
&App.css
files. -
Rename
App.js
toapp.js
and replace the content with this default tags:import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="app"> <h4 className="app-header">Put more components here !</h4> </div> ); } } export default App;
-
-
Create
components
folder in thesrc
directory, and moveapp.js
andapp.test.js
files into the new folder. Update all references which points toApp
component. -
Add a new
redux
store where this is going to be supposed as the Application'sredux
store:-
Create a new file inside
src
folder and name it asapp.store.js
. -
Write this code inside the
app.store.js
file:
import { createStore, applyMiddleware } from 'redux'; import reducers from './reducers'; const createAppStore = applyMiddleware()(createStore); const appStore = createAppStore(reducers); export default appStore;
-
-
Add the root reducer file:
-
Create a new folder inside
src
folder and name it asreducers
. -
Create a new
.js
file insidesrc/reducers
folder and name the file asindex.js
. -
Write this minimum code inside the
src/reducers/index.js
file:
import { combineReducers } from 'redux'; // TODO: Import more reducers here // example: import ItemsReducer from './items.reducer'; const rootReducer = combineReducers({ // TODO: Define application state here as a pair of <state-name>: <imported reducer type> // exmple: items: ItemsReducer delme: () => { return {}; } }); export default rootReducer;
-
-
Connect the
redux store
definedapp.store.js
into the mainApp
component, in thesrc/index.js
file:- Open the
src/index.js
file and modify the content into this following code:
import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import './index.css'; import App from './components/app'; import appStore from './app.store'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <Provider store={appStore}> <App /> </Provider> , document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister();
- Open
public/index.html
file, change the<title>
tag with your application name. Add linnk to css file of any additional UI framework you want to use (e.g. Bootstrap, Semantic UI, Material, etc):
<html> <head> <!-- Other tags --> <!-- Add link tag to use bootstrap's css file --> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css" /> <title>.:: Demo Reselect ::.</title> <!-- Rest of other tags -->
- Open the
TODO: Add more important contents