Git Product home page Git Product logo

react-front-go-backend's Introduction

What's wrong with this project ?

This is a basic blogging api, with golang backend, sqlite and react frontend. There are a lot of redundant codes, and bad software practices such as server.go contains code for sqlite as well which is not proper. But yeah I was learning when I wrote it. I am aware of the fact that react/babel is in development build. Page1 Page2

How to run this project ?

For backend

  1. Install go from Golang, Follow instruction properly.
  2. cd react-front-go-backend/backend
  3. go run server.go

For frontend

  1. The front-end is an experimental build, so you need not install anything.
  2. cd react-front-go-backend/frontend
  3. Run index.html on a browser.

What did I learn while doing this ?

For backend in go, common pitfalls and flight-rules:

  1. w.WriteHeader(310), it is used to return custom response.
  2. w.Header().Set("Content-Type", "application/json"), is used to edit default http headers.
  3. if you map your request string of json to golang int or vice versa you will get errors containing this keyword "unmarshal"
  4. "_" is used when you don't want to do anything with the variable but the function is returning it. So in golang you have to define variables if function is returning two values but if you are not going to use it then you code will give errors.
  5. In struct value of parameters should start with capital or you might get undecipherable errors.
  6. Ref

For frontend in react, common pitfalls and flight-rules:

  1. If you want to change DOM the only way you can add is through return in render nothing else.
  2. If you try to add jsx somewhere else, you will fail badly.
data1={
    Name: this.state.blogid,
    Description: "like"
  };
console.log(data1)
  fetch('http://localhost:8080/like', {
  method: 'post',
  headers: {
    "Content-Type": "application/json"
  }
  body: JSON.stringify(data1)
})

  1. This is how you do post method properly.
  2. If you want to change anything in DOM you have to add code like
<p class="content">{this.state.content.Content}</p>
  1. Now whenever any event happens, state changes then this will definitely change.
  2. If you want to add conditional rendering you have to do it in render function.
fetch('http://localhost:8080/blog/'+name)
  .then(response => response.json())
  .then(json => {
    console.log(json)
    this.setState({content: json})
    this.setState({likebutton: 1})
    this.setState({blogid: name})
    console.log("hi there "+this.state.content.Title)

  })
  1. this is important as fetch passes the return value to then and is passed as response, and response.json() is passed as json in .then()
  2. Whie doing a post or get request using javasvript then, always add "http://localhost:8080" rather than "localhost:8080" to avoid browser CORS error.

react-front-go-backend's People

Contributors

rava-dosa 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.