RRRumor Has It…(react-redux) Flatiron Final Portfolio Project
This is the final Portfolio Project for Flatiron, for the React-Redux Phase
The React-Redux Project requires
1. The code should be written in ES6 as much as possible:
the project has several classes with constructors and supers
2. Use the create-react-app generator to start your project:
the npx create-react-app <your_app_name> command generator was used to start the project.
3. Your app should have one HTML page to render your react-redux application:
rrrumor-has-it-frontend/public/index.html is the location of the HTML page.
4. There should be 5 stateless components:
rrrumor-has-it-frontend/src/App.js
rrrumor-has-it-frontend/src/components/home.js
rrrumor-has-it-frontend/src/components/postComment.js
rrrumor-has-it-frontend/src/components/postRumour.js
rrrumor-has-it-frontend/src/components/splash.js
5. There should be 3 routes
<Route path=”/home”><Home/></Route>
<Route path=”/post/rumour”><PostRumour/></Route>
<Route path=”/comments”><Comments/></Route>
6. The Application must make use of react-router and proper RESTful routing
the npm install react-router-dom command was used to use routes
import { BrowserRouter,Link, Route, Switch } from ‘react-router-dom’;
<BrowserRouter>
<nav>
<div className=”menu-icon”>
<span className=”fas fa-bars”></span></div>
<div className=”logo”>
Rumour Has It…</div>
<div class=”nav-items”>
<li><Link to=”/home”>Home</Link></li>
<li><Link to=”/post/rumour”>Post Rumour</Link></li>
</div>
</nav>
<Route exact path=”/” component={Splash}/>
<Switch>
<Route path=”/home”>
<Home/>
</Route>
<Route path=”/post/rumour”>
<PostRumour/>
</Route>
<Route path=”/comments”>
<Comments/>
</Route>
</Switch>
</BrowserRouter>
7. Use Redux middleware to respond to and modify state change
the npm install redux && npm install react-redux commands were used to use redux
import {Provider} from ‘react-redux’;
import {connect} from ‘react-redux’
8. Make use of async actions and redux-thunk middleware to send data to and receive data from a server
import thunk from ‘redux-thunk’
the npm install — save redux-thunk command was used to install and use Redux Thunk
import thunk from ‘redux-thunk’
export const getPosts = () => async dispatch => {
const res = await axios.get(`http://localhost:3000/posts`)
dispatch( {
type:GET_POSTS,
payload: res.data
})
}
9. Your Rails API should handle the data persistence with a database. You should be using fetch() within your actions to GET and POST data from your API — do not use jQuery methods.
Associations were setup in the backend
Post has_many :comments, dependent: :destroy
Comment belongs_to :post
The CORS gem was used that Provides support for Cross-Origin Resource Sharing (CORS)
gem ‘rack-cors’
as well as serializers, the serializer facilitates a relationship that is created in the backend and then translates it to the frontend.
class PostSerializer
include FastJsonapi::ObjectSerializer
attributes :content, :comments
end
This is the last portfolio for Flatiron’s SE program.
It seems like troubleshooting is a way of life, and the skills learned through this program have seeped into my everyday life.
I’m so glad I chose to take on this course, it was very difficult at times, but rewarding.
I would definitely doing it again but at a different pace though, lol…because it does ask a lot of you.
I’m very thankful for my classmates and especially for my cohort lead, Nick Lunn.
Nick was very helpful and approachable, he met me at my need and guided me through the issues I had
Thank you Flatiron, for a great experience.
