This package will install and layout a full react, redux, react-router-dom, firebase/firestore, bootstrap 4 project. I created this module because I wanted to automate my process when I create a react project.
npm install -g create-react-plus-app
Simply create-react-plus-app myapp, just like create-react-app. This will setup a full create-react-app project but with the other dependencies included, and a new file structure.
Right after install in Firebase.js make sure you add your firebase config. Or else the app won't run.
++--src
-----|
-----|--Actions---------------
-----|-------Types.js---authenticateAction.js
-----|--Components
-----|-------Pages
-----|---------- Home
-----|--------------Home.js
-----|--Firebase
-----|------- Firebase.js
-----|--Reducers-----------------
-----|------AuthReducer.js----Root.js
-----|--Images
-----|--App.js
-----|--index.css
-----|--index.js
-----|--registerServiceWorker.js
-----|--store.js
You can find out what the new files contain below.
- Installs create-react-app for you
- Deletes unnecessary files App.css, App.test.js, Logo.svg
- Creates new folders
- Installs packages
- Adds new files
You can obviously edit or delete these to your liking.
Actions Folder: A place to hold your redux actions.
Types.js: I separate the action types into a Types.js file.
authenticateAction.js: This is the firebase authenticate action. If a user is logged in, it updates authenticate to true.
Components: Where I put the um...components.
Pages: I organize components by their "page". For example, if there was a component that only goes on the homepage it would go in the Home folder.
Home.js: This is the base component for the homepage.
Firebase: This is where the Firebase config is.
Firebase.js: Firebase config, make sure you add your apps config here.
Reducers: the redux reducers.
AuthReducer.js: the AuthReducer
Root.js: Where the combineReducers lives. Sets the initial state.
Images: Images folder
App.js: Deleted the content and on componentWillMount() I checked to see if there was a user. Set up Routes.
Index.css: Unchanged from create-react-app.
Index.js: Wrapped the <App /> component in a <Provider store={store}>
registerServiceWorker.js: Yup.
store.js: Created the store.
0.0.5--Fixed the authenticateAction path in App.js
0.0.4--Some bug fixes, changed the package name which cause some tiny bugs.
0.0.3--added Images folder