Jest and the Component Driven Development (CDD) – Comunidad JS – Medium

#Jest and the Component Driven Development (CDD):  #ReactJS #JavaScript

  • Jest and the Component Driven Development (CDD)Testing React and React Native applications.We all knows about TDD right ?
  • I recently discovered other flow/flavor around React Components and Jest snapshot testing that makes me more happy and encourage me to write more tests.This approach makes the dev process a bit more fun that the other way around.
  • Then, when you´re confortable with your component code base and you have applied all the good practices out there, write the actual test, passing the required props to the component being tested and expect it to match the snapshot.Snapshot testingSnapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.The above statement, is from the Jest documentation, and it´s 100% true.
  • I’ve found snapshot testing to be a quick and fun way to test Components and make sure your UI does not change unexpectedly, which is a good thing.The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.That means we are not passing the expected props to our component in some parts of our application or we have adjusted the component (because we´ve refactored it).
  • So either one or the other possibility, we need to update the test snapshot (If we´ve refactored it) executing in the terminal yarn test -u or go and fix the part in the application where we´re not using the component as we expect.Having a test coverage between 80 and 100% make us more confidents when we need to deploy to any environment and allows applications to be more robust and easy to scale.In closing, I really encourage React developers to use Jest for testing applications.

We all knows about TDD right ? Test Driven Development.
The philosophy behind it, is to start the development cycle with first writing a failing test and then writing the actual function, to make it…
Continue reading “Jest and the Component Driven Development (CDD) – Comunidad JS – Medium”

📣 Handling complex forms in #reactjs with ease by @ArcEglos – next Tuesday @arangodb

  • Angular’s shift away from direct DOM access, allows for using it to build apps on all sorts of platforms.
  • Desktop apps, fully native mobile apps and even microcontrollers can all be developed for with Angular.
  • In this session, we’ll develop a web app, a fully native mobile app and an IoT-app all based on Angular and a similar code base.
  • You’ll learn how to share code between these platforms and how you should design your architecture to build such robust Angular applications.
  • But mind you, you’ll learn a lot of good practices for your Angular based web development and you’ll gain a deep understanding of the philosophy behind the Angular framework.

This Time it’s all about Angular and React.
Angular is not a web framework! by Julian Steiner
… Angular is a platform! Angular’s shift away from direct D
Continue reading “📣 Handling complex forms in #reactjs with ease by @ArcEglos – next Tuesday @arangodb”

The Three Pigs: how to structure your React-Redux application – Frontend Weekly

The Three Pigs: how to structure React-Redux application  #react #redux #javascript #reactjs

  • /src /components /containers /actions /reducers /sagasThis is the obvious layout and the one that’s most people’s go-to: group the same ”type” of things together.
  • Besides, some things just belong together: you’d never use the ToDoItemList container with a different component so should they really be living in different parts of the codebase?The Wooden House: Group by FeatureIn the second project, having learned some good learnings from our straw house approach, we decided to do a 180: rather than separating all of our Redux bits based on what they do, we grouped them all together by the feature in which they belong.
  • /src /components /PureComponent1 index.js index.spec.js style.css /PureComponent2 index.js index.spec.js style.css /PureComponent3 /features /feature1 component.js container.js actions.js reducer.js saga.js /feature2 /feature3This layout minimises jumping around in the codebase when developing features.
  • It is also easy to end up with just one or two bulky “features” that encompass the entire application.The Stone House: Group by FunctionThe stone house layout basically appeared by letting the codebase grow naturally.
  • We are now 4 months into the project and this is what we’ve come up with:/src /components /Component1 index.js — may be a pure component or a component wrapped in a container, the consumer doesn’t care anyway index.spec.js /Component2 /Component3 /reducers index.js /Reducer1 index.js — actions are in the same file as reducers index.spec.js someSideEffect.js — we use redux-loop here /Reducer2 /Reducer3Whereas this way of laying out the application may look a bit hard to grasp initially, it’s worked out really well for us so far.

Defining any kind of “good practices” in tech is always a tricky business. Good practices are subjective, heavily dependent to your ways of working and often your personal preference. The best we can…
Continue reading “The Three Pigs: how to structure your React-Redux application – Frontend Weekly”

Quick Basics of ReactJs, Redux & Redux-Saga ~ NT

Quick basics of #ReactJS, #Redux & Redux-Saga:  #JavaScript #frontend

  • JSX Converts xml data into objects:

    Gets converted to

    React uses Components, which is the root of React to display and provide data, we do it via:

    Functional based:

    Class based:

    Using to state to manipulate the html, react renders when either props changes or state changes.

  • There are good practices for component render, we shouldn’t be mutating objects in render, because the render method then keeps trigger further render cylces;

    Not the best way:

    // Not the best way
    class LoggingButton extends React.Component {
    handleClick() {
    console.log(‘this is:’, this);
    }

    render() {
    // This syntax ensures `this` is bound within handleClick
    // The arrow function always creates a new anonymous function
    // and hence a new function is passed as props hence the button
    // would be re-rendered even if it’s props actually wouldn’t change
    return (
    button onClick={(e) = this.handleClick(e)}
    Click me
    /button
    );
    }
    }

    The good way:

    Keys – it help React identify which items have changed, are added, or are removed (list of rendering):

    Controlled component: In HTML, form elements such as input, textarea, and select typically maintain their own state and update it based on user input.

  • UnControlled components: Some times we need to access the components data and might not have the state to check the data being used, and which case we can use ref to fetch the data
    Don’t Overuse Refs: lifting the shared state up to their closest common ancestor
    Important: There should be a single “source of truth” for any data that changes in a React application.
  • Three principles:

    Single source of truth
    State is read-only
    Changes are made with pure functions

    Basics:

    Actions: These are payloads of information that send data from your application to your store.

  • function todoApp(state = initialState, action) {
    switch (action.type) {
    case SET_VISIBILITY_FILTER:
    return Object.assign({}, state, {
    visibilityFilter: action.filter
    })
    case ADD_TODO:
    return Object.assign({}, state, {
    todos: [
    …state.todos,
    {
    text: action.text,
    completed: false
    }
    ]
    })
    default:
    return state
    }
    }

    Store: Once we have the actions and the reducers in place, the orchestration is done by Store by bringing them together using “createStore” from redux and hence we get methods like:

    getState of the application
    dispatch the action to the reducer — Mapped distpatch to props when using “connect”
    subscribe the listeners — Mapped state to props when using “connect”

    Combine the reducers once we split them using combineReducer.

Basics of ReactJs, Redux and Redux Saga, Tips on ReactJs. Interview Questions for ReactJs, Redux
Continue reading “Quick Basics of ReactJs, Redux & Redux-Saga ~ NT”