I did it! - I’ve finally made it to the end of my bootcamp tenure at Flatiron School and what an adventure it has been. For my final project before I took the plunge into the tech industry and take it by storm, my task was to implement an application done with a tapestry of a Ruby on Rails API in the back-end and React-Redux on the client-side.
I wanted to do something that would be of some relevance to me in my job search effort an app that would act as a resource to all of my contacts in one place, I call it Job.Bnb — a feast of jobs for my insatiable appetite for success.
This article is an outline of how I spun up the app so that you can do it too, nice right?
What is an API
An API is an Application Programming Interface, it's a way for one system to communicate with other external systems. An API abstracts away any of the complicated logic of a system and presents something that is easier to interact with or build upon. It is extremely useful for harvesting data in a way that makes it easier to retrieve.
If you’re a programmer then you are going to want to use data to manipulate. In Rails you can create your own API that is rendered in JSON strings which is crucial to working with JavaScript DOM manipulation. In order to do this type in rails new my_api --api into the terminal.
rails new my_api --api
This will do three things:
- Configure your application to start with a more limited set of middleware than normal. Specifically, it will not include any middleware primarily useful for browser applications (like cookies support) by default.
- Make ApplicationController inherit from ActionController::API instead of ActionController::Base. As with middleware, this will leave out any Action Controller modules that provide functionalities primarily used by browser applications.
- Configure the generators to skip generating views, helpers, and assets when you generate a new resource.
Now that you have your API in place the other piece of framework is React. Adding React provides a standardized way of creating and deploying parts of your web application. It also allows you to put your energy towards designing a solid user experience.
What is React
React is a framework that is built out of JavaScript and it also provides a specific way to organize and structure the design of a web application. It was a difficult concept to grasp at first however I enjoyed using it very much, over time I’m going to put forth effort to becoming a master at it.
One of the cool things about React is that it's a virtual DOM that allows for fast, efficient, content rendering.
Cool things about React:
- a declarative writing structure, allowing you to simply express how your app should look and let React handle updates and underlying data changes;
- Babel: an included transpiler that converts modern JavaScript and custom code like JSX into more widely compatible JavaScript;
- Webpack: a ‘bundler’ that takes all our work, along with any required dependency code, and packages it all up in a single, transferable bundle
- Built in ESLint functionality to help improve our code;
To create a project, run:
npx create-react-app my-app
cd my-app
npm start
If you are new to React head over to their website and do a build with their step-by-step tutorial, you can find that right here.
A prerequisite to React is some fundamentals of JavaScript, so you may want to do some basic lessons.
One of many great resources for learning some basics in JavaScript is CodeCademy
You will learn programming fundamentals and basic object-oriented concepts using the latest JavaScript syntax. The concepts covered in these lessons lay the foundation for using JavaScript in any environment. - CodeCademy
I encourage you to try all of these resources and concepts for yourself, read through the docs for a better understanding of how they perform.
The only way to get better at anything is to just get started!
Thanks for reading