Reactjs-development-flow.md

Reactjs-development-flow.md

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