ReactJs notes

ReactJs-notes.md

ReactJs topics

• Components - (Done) ** Class component vs function component
  • Props vs State
  • ES6
  • JSX
  • Events
  • Style css
• HTTP request - (Done)
• Routes - (Done)
• Redux
• Forms and valitadions
• WebPack
• Testing

Why React?

• UI State becomes easky to handle with ReactJS;

• Focus on Business Logic, not on preventing yout App from exploding;

• Huge Ecosystem, Active community, High Performance;

React Alternatives

Angular, VueJs;

• React for Angular developers https://school.geekwall.in/p/SJmw0eo6X/quick-introduction-to-react-for-angular-developers

Two Kinds of Applications

• SPA and Multi Page Application -> add inside an static page;

• ReactJs -> Simple Page Application

• Component

The Basics -> All Core React Concepts

Using a Build WorkFlow

• Optimize Code
• Use Next-Gen JavaSccript Features - ES6;
• Be more productive;
• Use Dependency Management Tool -> npm or yarn;
• Use Bundles -> Recommended: Webpack;
• Use Compiler -> Babel -> Presets;
• Use a Development server;

Create a new React App

sudo npm install -g create-react-app -g create-react-app feed-back-webapp npm start

Base Folder structure

/node_modules /public /src App.css App.js

React component;

https://reactjs.org/docs/react-component.html

import React, { Component } from 'react’;
document.getElementById('markdown-example')

className, attributes

ES6 features

• Arrow functions
• let, cons
• Export default APP; and import App from ‘./App’;

Output dinyamic values

Props

Understanding props children

Component = custom HTML elements components; Root component ReactDOM.render()

class App extends Component {
	
	render() {
		return(
			<div> html code </div>
		); 	
	}
}

JSX

JSX != HTML

render() {
	return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'FeedBack App’)
)

className=“” We need to have a root element per component;

Using State

(reversed word)
state = {
  persons: [
    { name: 'Max', age: 28 },
    { name: 'Max', age: 28 }
  ]
  }

https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8124208?start=0

Listening events;

switchNamehandler = () => {
  # merge
  this.setState({ persons: {name: 'test', age: 43}})
}

<button onClick={switchNamehandler} >

https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8124210?start=0

useState -> Hooks, Colletion, Fucntion,

React Class base component

React Function component;

Allows to manage states; https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/13556164?start=0

Stateless vs Statefull components

StateFull - smart component, container component; StateLess - present, don’t have any logic, as many as possibly, easy to change;

class-based components (also referred to as "containers", "smart" or "stateful" components) => class Cmp extends Component { render () { return

some JSX

} }

https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8124208?start=1 https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8124210?start=1

Passing method reference Betwhen components as props

click={this.switchNameHandler}

Bind - two ways;

• basics references links:

• create-react-app: https://github.com/facebookincubator/create-react-app
• Introducing JSX: https://reactjs.org/docs/introducing-jsx.html
• Rendering Elements: https://reactjs.org/docs/rendering-elements.html
• Components & Props: https://reactjs.org/docs/components-and-props.html
• Listenable Events: https://reactjs.org/docs/events.html

Working with Lists and Conditionals

• Ternary expression in JSX

  this.state.booleanPropertie ? 
  <div> text </div>
  : null
  

• Outputing Lists

  {this.state.persons.map((person, index) => {
  return <Person
  name={person.name}
  age={person.age}
  click={() => this.deletePersonHandler(index)}
  key={person.id}
  />
  })}
  

reference: https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/8091078?start=0

• Flexible lists

nameChangedHandler = (event, id) => {

const person = this.state.persons.findeIndex(p => {
  return p.id === id;
})

const person = {
  ...this.state.persons.[personIndex];
};

}

• Spread operator

Styling React Components

1 - Style option style={style}

render () {
  const style = {
    backgroundColor: 'green',
    color: 'white',
  };
}

style.backgroundColor = 'red';

let classes = ['red', 'bold'].join(' ');
<p className={classes}> This is really working</p>

• radium react style package;

2 - Css module https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/t/lecture/12001122?start=0

className={classes.App}

Deeper into Components & React Internals

import React from react;

const persons = (props) => (

)

HTTP request

https://alligator.io/react/axios-react/

NoSQL database services API rest:

https://firebase.google.com/docs/database/rtdb-vs-firestore?hl=en
https://firebase.google.com/docs/firestore/data-model?hl=en
https://www.youtube.com/watch?v=VTkM5BbnslU

Routes

https://www.dropbox.com/s/1yfug41sd99r5ky/Screenshot%202019-03-24%2021.58.13.png?dl=0

https://reacttraining.com/react-router/web/guides/quick-start

npm install --save react-router react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
	
render() {
    return (
      <Router>
        <div className="App">
          <header className="App-header">
            <h1>Feedback App</h1>
            <Navigation/>
          </header>
        </div>
        <Route path="/" exact component={QuestionPage} />
        <Route path="/result/" component={ResultPage} />
        <Route path="/login/" component={LoginPage} />
      </Router>
    );
  }

Forms and valitadions

* Two ways data-binding
https://reactjs.org/docs/two-way-binding-helpers.html
https://medium.com/front-end-weekly/tutorial-react-two-way-data-binding-2018-b935cb200964
* Forms
https://reactjs.org/docs/forms.html

Redux

• State Management;
• Pass data around components;

What is State?

* Data, informations that we need to render on components;

* Is ser Authenticade?
* Is a Modal Open?
* List of Blog Posts;
* We can't use global variable;

* Redux *
* Global storage;
* Third Library;
* Central Store -> Stores entire application state;

Install

npm install --save redux

https://www.dropbox.com/s/5f8p0bif9j66rf7/Screenshot%202019-03-28%2015.29.02.png?dl=0

Basic code

	const redux = require('redux');
 const createStore = redux.createStore;

 const initialState = {
     counter: 0
 }

 // Reducer
 const rootReducer = (state = initialState, action) => {
     switch (action.type) {
 	case 'INC_COUNTER':
 	    return {
 		...state,
 		counter: state.counter + 1
 	    };
 	break;
 	case 'ADD_COUNTER':
 	    return {
 		...state,
 		counter: state.counter + action.value
 	    };
 	break;
 	default:
 	    return state;
     }
 }

 // Store
 const store = createStore(rootReducer);
 console.log(store.getState());

 // Subscription
 store.subscribe(() => {
     console.log('[subscribe]', store.getState());
 })

 // Dispatching ACtion
 store.dispatch({type: 'INC_COUNTER'});
 store.dispatch({type: 'ADD_COUNTER', value: 10});

 console.log(store.getState());

WebPack

...

Testing

...

Study references:

https://egghead.io/lessons/react-configure-typescript-for-react-and-jsx https://alligator.io/react/axios-react/ https://reacttraining.com/react-router/web/guides/quick-start https://react-index.com/?ref=producthunt

https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app https://facebook.github.io/create-react-app/docs/advanced-configuration