The Need To React
This is my final project for Flatiron School. With this project, I used React/Redux with a Rails API. The code for this app is written in ES6, ES6 stands for ECMAScript 6. It was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.
I used “create-react-app” to start the app an officially supported way to create a react application. The app needed to be a single page application (SPA) where the pages load inline within the same page. Essentially it’s a web page that interacts with the web browser dynamically by rewriting the current web page with the data obtained from the webserver. Hence in a single page application, the webpage does not reload the page during its runtime and instead works within the browser.
The app needed to have five stateless components also known as “Presentational components” and “Dumb Components”. There are also stateful components, the only difference between the two is one has a state and the other doesn't. stateful components are keeping track of changing data, while stateless components print out what is given to them via props, or they always render the same thing. when should you use one over the other? when you visualize your app think of it as a big cake, we can shove our face into the and make a total mess, or we can go about this in a clean efficient way by cutting it into slices, the components are slices. You’ll need state somewhere when information dynamically changes for my app it was Accounts and Transactions CRUD actions. Aim to have a parent component keep all the information, and pass it down to its children stateless components.
Three routes were needed, a router allows your app to navigate between different components, changing the browser URL, modifying the browser history, and keeping the UI state in sync. React Router includes three main packages, react-router: this is the core package for the router, react-router-dom: it contains the DOM bindings for React Router, meaning the router components for websites, react-router-native: it contains the React Native bindings for React Router, in other words, the components for an app development environment using React Native.
The Router API is based on three components, <Router>: the router that keeps the UI in sync with the URL, <Link>: renders a navigation link, <Route>: renders a UI component depending on the URL. I used <BrowserRouter>, which uses HTML5 History API, it’s from ‘react-router-dom’ in my app it’s wrapping my <App> component something to take note of is a router component can only take in one child element. the main job of the <Router> component is to create a history object to keep track of the location (URL). When the location changes because of a navigation action, the child component is re-rendered.
With this project i build using these practices made things feel a lot more organized and clean. Using redux to build better flow between components, as i look back at my code it became more clear on the flow how it all took steps from one component to the next working asynchronously. i enjoyed this final project the most for flatiron school. the practices in the article a just some of what i used, these a lot more that goes into building this final project, but for m personally moving forward i can’t to explore different ways to get better and grow as a devloper.
