lunes, 21 de enero de 2019

react redux one source file sample all components january 2019

Trying to simplify One File Source Code Explanation of React Redux.

This is the minimal example i have seen.

>React Redux, 'there is nothing new under the sun', i had an interview, i didn't know react redux at the time, i clearly sed that. So i Solved an exercise without react redux. I just write down vanilla javascript ES6, class, view, model, controller, html css. So, when the interview finished, i started searching, reading blogs, three days later.. here you have, react redux, it's not so complex. So Developers, 'there is nothing new under the sun', if you manage design patterns have a day with this, and there is it running. )
( This could help in a realtime interview, clone, cut and paste, npm install, and do the react redux exercise, 

showing that you manage the concepts, fast, clear.. or not so.

Changing this code, 

Adding inputs in the form, or adding another form (jsx, React.Component), "connecting it with the redux store" 

Changing the view, or adding another views (jsx, React.Component) "connecting it with the redux store", 

Making more actions, will help you show faster your understanding of react redux.

Show how to make many differents redux stores, 
for a partition of your busness data layer in this presentation layer.

- Later you talk about Hierarchy of the filesystem, were you will write down your .js files ('like unix man hier') when you have many business logic accions. 







I run the environment with, editor vscode, docker-compose just to use it.
And we can change the code, and see changes on runtime.
code . 

docker-compose up


// index.js, react redux, onefile flatting explanation.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { Provider, connect } from "react-redux";
import './App.css';
import uuidv1 from "uuid";
import { createStore } from 'redux'; 
//// Route (business logic) actions, with tipified constant Names.
//// To change de state of the Global store App
const initialState = {
  articles: []
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ARTICLE:
      return { ...state, articles: [ ...state.articles, action.payload ] };    
      return state;
//// Create an "Input Form React Component", connected with redux store state.
//// Write down the html view of this component.
//// Write down the handlers in javascript methods, for dom events. 
//// Connect the dom events handlers in the html view.
//// Dispatch de state of the Component, to the redux (global) store.
const store = createStore(rootReducer);
const addArticle = article => ({
  type: ADD_ARTICLE,
  payload: article
const mapDispatchToProps = dispatch => {
  return {
    addArticle: article => dispatch(addArticle(article))
class ConnectedForm extends React.Component {
  constructor() {
    this.state = {
      title: ""
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  handleChange(event) {
    this.setState({ []: });
  handleSubmit(event) {
    const { title } = this.state;
    const id = uuidv1();
    this.props.addArticle({ title, id });
    this.setState({ title: "" });
  render() {
    const { title } = this.state;
    return (
      < form onSubmit={this.handleSubmit} >
        < div className="" >
          < label htmlFor="title">Title< /label >
          < input
          / >
        < /div >
        < button type="submit" className="" >
        < /button >
      < /form >
const Form = connect(null, mapDispatchToProps)(ConnectedForm);
//// Create a Function with de html view in jsx from react, 
//// And connect the state properties to the redux store
//// Like an observer/observable, from general design patterns.
const mapStateToProps = state => {
  return { articles: state.articles };
const ConnectedList = ({ articles }) => (
  < ul className="" >
    { => (
      < li className="" key={} >
      < /li >
  < /ul >
const List = connect(mapStateToProps)(ConnectedList);
//// Create de view in jsx, width html and React Component of the Application
const App = () => (
  < div className="App" >
    < div className="App-header" >
      < h2 >Add a new article< /h2 >
      < Form / >
    < /div >
    < div className="" >
      < h2 >Articles< /h2 >
      < List / >
    < /div >
  < /div >
//// Making the action of rendering the final DOM in html, in 'index.html'->'div#app'
//// we have to connect the Global Redux store of the Rreact App, 
////       with the Provider react-redux Component
  < Provider store={store} >
    < App / >
  < /Provider >,
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:



jueves, 17 de enero de 2019

javascript react docker initial development environment


1. This recipe really run well, so. Installing scaffolding tools from react script over npm.

educacion@educacion:~/src/docker13react$ npm install create-react-app

2. Creating a default app, ( scaffolding ) frontend in this case.

educacion@educacion:~/src/docker13react$ npx create-react-app frontend

3. Looking what files were created.

educacion@educacion:~/src/docker13react$ cd frontend/
educacion@educacion:~/src/docker13react/frontend$ ls
Dockerfile  node_modules  package.json  public  src  yarn.lock

4. Create the docker file, from the tutorial reference.

educacion@educacion:~/src/docker13react/frontend$ cat Dockerfile 
# base image
FROM node
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent
# start app
CMD ["npm", "start"]

5. There are some files that can be excluded from de docker image.

educacion@educacion:~/src/docker13react/frontend$ cat .dockerignore 

6. Building the docker image for initial react development.

educacion@educacion:~/src/docker13react/frontend$ docker build -t react-docker .

7. Running the docker image in port 3000, exported and binded with the localhost port.

educacion@educacion:~/src/docker13react/frontend$ docker run -it -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 --rm react-docker


8. Using docker compose.

educacion@educacion:~/src/docker13react_initial/frontend$ cat docker-compose.yml 
version: '3.5'
    container_name: react-docker 
      context: .
      dockerfile: Dockerfile
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
      - '3000:3000'
      - NODE_ENV=development

9. Running docker compose

educacion@educacion:~/src/docker13react/frontend$ docker-compose up

10. Ckecking if it is running (manually).


11. Running the visual code editor, for runtime development.

educacion@educacion:~/src/docker13react$ ls
frontend  node_modules  package.json  package-lock.json

educacion@educacion:~/src/docker13react$ code .

12. And now!, It's running OK, pushing to the repository, on with mercurial.

educacion@educacion:~/src$ hg clone

educacion@educacion:~/src/docker13react_initial$ cp -R ../docker13react/* .

13. Adding new files to the repository

educacion@educacion:~/src/docker13react_initial$ hg add .

educacion@educacion:~/src/docker13react_initial$ hg commit -u -m 'initial react docker development environment'

14. Updating the repository, with push.

educacion@educacion:~/src/docker13react_initial$ hg push