Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ReactJs notes

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;

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:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment