Git Product home page Git Product logo

react-weekend-project's Introduction

React Project!

You've made it! You're ready to build a React application! Before you start ideating, think about some of the project requirements.

Requirements

The guidelines here are minimal but this is on purpose:

  1. Use an API this can be your own rails api or one you have found on the internet. If you do create your own api, it should not have more than one or two models. The focus of this project is to focus on your React skills.
  2. Must have at least two different client-side routes (i.e. use react-router)

Bonus Tasks

  • Build Full Crud for one of your resources
  • Write your own CSS
  • Add some Tests
  • Learn React Native...jk

Resources

Public Apis to Choose From

Frontend Setup

To create your React project, you may use a tool called create-react-app, an awesome project generator developed by Facebook. To use this

  • npm install -g create-react-app - this installs the generator as a global package
  • In the directory where you'd like to create your project, create-react-app my-project-client. It's that simple!

We'd reccommend to begin by removing any of the default stuff given to you by Create React App that you do not understand. The following are some really great resources on how to think about setting up a React project (Spoiler: They both say the same thing, "There's no right answer!")

Backend Setup

rails new <my-project> --api -T --database=postgresql

Let's go through this in detail:

  • --api
    • Make a Rails 5 API, basically you're telling Rails you don't want any of the stuff you wouldn't need for an application where Rails is not rendering views. Think the ActionView library (form_for, link_to, etc..), ERB, Security protections that ensure forms were rendered by the Rails app, things like that.
  • -T
    • don't generate tests for this app
  • --database=postgresql
    • Set this up to use a Postgres (as opposed to SQLite) database. If you ever want to push this to Heroku, Heroku requires a Postgres database. There won't be too much difference in how you have to write your code. You'll have to be sure to run rails db:create and make sure you have postgres running (i.e you can see the elephant)
  • Be sure to do the necessary setup for the rack-cors-gem
  • You may want to use active-model-serializers

A great article on how DHH thinks about setting up controllers in Rails

Notes

By default both your client app and your rails app will run on port 3000. You'll have to specify one or the other to run on a separate port.

  • Rails: rails s -p <some_number_thats_not_3000>
  • React: Check out this issue

react-weekend-project's People

Contributors

johann avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.