ReactJS Development flow

Project creation

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 to http://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 to app.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;

React-Redux minimal implementation

Create components folder in the src directory, and move app.js and app.test.js files into the new folder. Update all references which points to App component.

Add a new redux store where this is going to be supposed as the Application's redux store:

Create a new file inside src folder and name it as app.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 as reducers.
Create a new .js file inside src/reducers folder and name the file as index.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 defined app.store.js into the main App component, in the src/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 -->

TODO: Add more important contents

WendySanarwanto/Reactjs-development-flow.md

ReactJS Development flow

Project creation

React-Redux minimal implementation