search

impactbyte-haku / projects

🌐 Projects
https://gitlab.com/impactbyte/learn/course-fullstackweb
9 stars 1 forks source link

Project React #33

Open mhaidarhanif opened 5 years ago

mhaidarhanif commented 5 years ago

UI

Project React

React Folder Name

React Projects

mhaidarhanif commented 5 years ago

Idea Byte

ragasubekti commented 5 years ago
yfrance commented 5 years ago

https://github.com/yfrance/project-react-counter https://project-react-counter.netlify.com/

codedarlyn commented 5 years ago
arifinoid commented 5 years ago

https://github.com/arifinoid/project-react https://github.com/arifinoid/project-react-counter https://mattreact.netlify.com https://counterwithoutstrike.netlify.com/

dickymr commented 5 years ago

https://github.com/dickymr/project-react https://dickymr-react.netlify.com/

rizariza69 commented 5 years ago

https://github.com/rizariza69/project-react https://riza-project-react.netlify.com/ https://github.com/rizariza69/project-react-router

BintangSaputra commented 5 years ago

https://github.com/BintangSaputra/react-project https://bintang-react-project.netlify.com/ https://github.com/BintangSaputra/project-react-counter https://github.com/BintangSaputra/react-todo

sarahgushef commented 5 years ago

https://github.com/sarahgushef/project-react-counter https://gsf-react-counter.netlify.com https://github.com/sarahgushef/project-react-website

nchristanto commented 5 years ago

https://github.com/nchristanto/project-react https://chris-project-react.netlify.com/ https://github.com/nchristanto/project-react-counter

zeinhm commented 5 years ago
mhaidarhanif commented 5 years ago
mhaidarhanif commented 5 years ago
codedarlyn commented 5 years ago
mhaidarhanif commented 5 years ago
mhaidarhanif commented 5 years ago
arifinoid commented 5 years ago

https://github.com/arifinoid/project-react-router-form https://project-react-router-form.netlify.com/

yevgenysiregar commented 5 years ago

Project React

Project React Counter

Project React Styling

Project React Data

Project React Form

Project React Router

Project React Website

haydanu commented 5 years ago 
import React, { Component } from "react";
import { Title } from "./components/Title"; // exported function is import in curly braces {} and can be more than one example {Title, SubTitle}
import StatelessCompWithClass from "./components/statelessComp"; // exported class is import without curly braces {}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
      error: "nomor sudah negatif"
    };
    // this.increaseNumber = this.increaseNumber.bind(this) //no need to write this if the function is already arrow function
  }

  increaseNumber = parameter => {  //no need to bind this function if function is already using arrow function
    this.setState({
      number: this.state.number + parameter
    });
  };

  decreaseNumber = () => {
    this.setState({
      number: this.state.number - 1
    });

    if (this.state.number < 0) {
      alert(this.state.error);
    }
  };

  render() {
    console.log("ini console.lognya", this.state);
    return (
      <div>
        <Title>Counter</Title> {/* text inside is a children of Title's element */}

        <StatelessCompWithClass //element StatelessComp (as a child element)
          number={this.state.number} //this is a props of StatelessComp
          increaseNumber={parameter => this.increaseNumber(parameter)} //function with parameter thrown from parent element to child element as a props (StatelessComp)
          decreaseNumber={this.decreaseNumber}  //this is a props of StatelessComp
        />
      </div>
    );
  }
}
import React from 'react'

export function Title(props){
  return <h1>{props.children}</h1>
}

export function SubTitle(props){
  return <h2>{props.children}</h2>
}
import React from "react";

export default class StatelessCompWithClass extends React.Component {
  render() {
    const { number, increaseNumber } = this.props; //where accessing props in class, have to use this.props
    return (
      <div>
        <div>{number}</div>
        <button onClick={() => increaseNumber(3)}>Increment</button>
        <button onClick={this.props.decreaseNumber}>Decrement</button>
      </div>
    );
  }
}

export function StatelessCompWithFunction(props){ // where accessing props in function, just use props
    return (
      <div>
        <div>{props.number}</div>
        <button onClick={() => props.increaseNumber(3)}>Increment</button>
        <button onClick={props.decreaseNumber}>Decrement</button>
      </div>
    );

}
rizariza69 commented 5 years ago

Mas @mhaidarh review dunk react data, react form, redux, react redux tapi pake project bnerean,, kalo counter kurang ngerti kita.... kayak yg taman safari gtu

mhaidarhanif commented 5 years ago

@rizariza69 Pas hari Kamis/Jumat berarti bakal dibahas lagi buat ngegabungin semuanya

Sekarang fokus untuk menyelesaikan bagian-bagian React dahulu:

Kalo udah bisa masing-masing, ngegabungin bakal lebih gampang