How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint

  • This helps us get a feel for what we’re going to need our components to render:
    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    For this application, we’re only going to need two React components, Todo / and TodoList /.

  • js

    import React from ‘react’;

    export function Todo(props) {
    const { todo } = props;
    if(todo.isDone) {
    return strike{todo.text}/strike;
    } else {
    return span{todo.text}/span;
    }
    }

    export function TodoList(props) {
    const { todos } = props;
    return (
    div className=’todo’
    input type=’text’ placeholder=’Add todo’ /
    ul className=’todo__list’
    {todos.map(t = (
    li key={t.id} className=’todo__item’
    Todo todo={t} /
    /li
    ))}
    /ul
    /div
    );
    }

    At this point, we can test these components by creating an index.html file in the project folder and populating it with the following markup.

  • /components’;

    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    render(
    TodoList todos={dummyTodos} /,
    the code with npm run build, then navigate your browser to the index.html file and make sure that it’s working.

  • Our dummy data is a great place to start from, and we can easily translate it into ImmutableJS collections:
    import { List, Map } from ‘immutable’;

    const dummyTodos = List([
    Map({ id: 0, isDone: true, text: ‘make components’ }),
    Map({ id: 1, isDone: false, text: ‘design actions’ }),
    Map({ id: 2, isDone: false, text: ‘implement reducer’ }),
    Map({ id: 3, isDone: false, text: ‘connect components’ })
    ]);

    ImmutableJS maps don’t work in the same way as JavaScript’s objects, so we’ll need to make some slight tweaks to our components.

  • The mapStateToProps function takes the store’s current state as an argument (in our case, a list of todos), then it expects the return value to be an object that describes a mapping from that state to props for our wrapped component:
    function mapStateToProps(state) {
    return { todos: state };
    }

    It might help to visualize this on an instance of the wrapped React component:
    TodoList todos={state} /

    We’ll also need to supply a mapDispatchToProps function, which is passed the store’s dispatch method, so that we can use it to dispatch the actions from our action creators:
    function mapDispatchToProps(dispatch) {
    return {
    addTodo: text = dispatch(addTodo(text)),
    toggleTodo: id

Dan Prince shows how to build a Todo app using React, Redux, and Immutable.js.
Continue reading “How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint”

Why build your forms with Redux Form – DailyJS – Medium

Why build your forms with #Redux Form:  #ReactJS

  • Why build your forms with Redux FormWhen I usually create forms for my React/Redux applications I tend to keep the value of the inputs on the application state, with little to no editing, (because my forms are usually simple), I never stopped to realize what that means.
  • It also receives an event handler that will update the state when the user interacts with it.It means that when the user types the letter “J” on the input, what is visible is not the same “J”, it may be an identical “J” that comes from the state, or whatever the event handler has put in there.Ok but, that doesn’t answer the first questionBy having all the application state in the JavaScript app and using controlled components we get a single source of truth and take full control over the application behavior.In the context of a form, our React component is able to:do instant validation;control the input value format;enable, disable, show or hide components given the state;handle dynamic inputs.Although it is highly recommended to use controlled components, it is also good to point the drawback that you will have to create event handlers for all your inputs and that may be a bunch of code that doesn’t make sense to the application.What about Redux Form?Now that is known why to keep the form data in the state and you reason if that makes sense for your application we can come back to our main subject.
  • It keeps track of all common application form state such as:The fields that are in the form;The values of each field;The focused field;If the field values are valid;The fields that the user have interacted with;If the form is being submitted;If is happening any asynchronous validation.Let’s take a look at a bit of code and see how to do a setup.Here we connect the form component to Redux by decorating it with the high-order component reduxForm.
  • It will also hand us the handleSubmit function, which will take care of the submission behavior.The Field component takes our input component as its props and acts as a container, bringing the application state to the input component and binding the event handlers to update the state in store.Look at the InputText component to see the props we receive from the Field.One important point is that it’s still a developer’s responsibility to write the form and inputs components, this way the library does not take the flexibility from you to manage the behaviors of your form the way you want, or even add custom ones.And to finish our integration we add a reducer that will handle the state changes of your form.Simple isn’t it.Just one more point.
  • Look that the default value of the input is defined when the high-order component reduxForm is called and comes to the input within the prop input and not from the react’s prop defaultValue, this way we guarantee that our form values are all represented in the application state.In summary, having all your form data in application state gives you control over its behavior and you can easily implement that on a React/Redux application with Redux Form.I have created a repository on GitHub with the implementation above.

When I usually create forms for my React/Redux applications I tend to keep the value of the inputs on the application state, with little to no editing, (because my forms are usually simple), I never…
Continue reading “Why build your forms with Redux Form – DailyJS – Medium”

Best JavaScript Frameworks: Vue.js, Angular and React.js

Best #JavaScript #Frameworks: #VueJS #Angular and #ReactJS

  • A couple of years ago, working at ThoughtWorks, I got the chance to build my first app with a JavaScript framework, it was Angularjs.
  • We are witnessing great changes in the JavaScript frameworks, most of all, these frameworks work as a skeleton for your SPAs, allowing you to focus in more complex tasks.
  • The most popular frameworks as of June 2017 are: Vue.js, Angular and React.js.
  • Angular is built with TypeScript, a superset to JavaScript, which makes it attractive to everyone even to big enterprises.
  • All of the JavaScript frameworks have a great performance, the difference is very small.

Best JavaScript Frameworks in 2017, benefits of using them and differences between the most popular frameworks: Vue.js, Angular and React.js
Continue reading “Best JavaScript Frameworks: Vue.js, Angular and React.js”

React and React Native [Book]

Adam Boduch's

  • Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps

    Who This Book Is For

    This book is written for any JavaScript developer—beginner or expert—who wants to start learning how to put both of Facebook’s UI libraries to work.

  • What You Will Learn

    React and React Native allow you to build cross-platform desktop and mobile applications using Facebook’s innovative UI libraries.

  • The first part shows you how to start crafting composable UIs using React, from rendering with JSX and creating reusable components through to routing and creating isomorphic applications that run on Node.
  • We then move on to showing you how to take the concepts of React and apply them to building Native UIs using React Native.
  • Split into three major sections to help organize your learning, this hands-on, code-first book will help you get up to speed with React and React Native—the UI framework that powers Netflix, Yahoo, and Facebook.

Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps About This Book Build React and React Native applications using familiar … – Selection from React and React Native [Book]
Continue reading “React and React Native [Book]”

Redux with React – First Look #reactjs #Redux #javascript #appdev #programming #devops

Redux with React - First Look  #reactjs #Redux #javascript #appdev #programming #devops

  • Let’s start with the basics:

    According to the official site Redux is defined as a predictable state container for JavaScript apps.

  • In Redux, reducers are functions (pure, I will explain what a pure function is later) that take the current state of the application and an action and then return a new state.
  • 3 – Store

    Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners.

  • – Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.
  • You might be interested in:

    Predictability of outcome:

    There is always one source of truth, the store, with no confusion about how to sync the current state with actions and other parts of the application.

influenced by Flux architecture and became popular very quickly, excellent documentation and size (2 KB). Also it is very easy to use redux with react
Continue reading “Redux with React – First Look #reactjs #Redux #javascript #appdev #programming #devops”

Thoughts on Redux – Pietro Ghezzi – Medium

Important read: Thoughts on #Redux  #ReactJS #JavaScript

  • Mostly for CRUD operations.The first problem was to denormalize the entire state (the use of the library “normalizr” is encouraged by redux docs, I didn’t know it when I started and I did it manually) in a way to split it in small pieces, each with a reducer.
  • It’s useful and speeds up a lot the development process.DemoSummary of my pros and consProsTest driven development is made easy, thanks to pure functions, and increases the development productivityOnly the root component (I call it container) is connected to the reducer, all the actions and state are passed through props.
  • This makes it easy to use component composition and write stateless components.Code linearity, everything is simple and doesn’t differ much from one project to another.Immutability: forcing to keep an immutable state helps a lot avoiding weird bugs.The Log middleware in dev mode, showing all the different states before and after an action is dispatched, is of a great help.ConsIt’s difficult to handle relationships and there isn’t any official library with documentation and support to help you with it.Redundant code, every action is written manually, even the most common, like changing an attribute of the state.Normalizing a complex state with many level of nested objects doesn’t always seem the best approach.My best practicesDirectory structure by module instead of scope.
  • A better approach it could be to retrieve the new state from the server when necessary and handle the state relationships on the database layer.TDD on reducers, tests on reducers not only speed up the development but also cover you on possible “silent” bugs on the state.Keep components simple and use component composition.Normalize the state with the use of Reselect libraryHandling complex store relationships (#386)Note from Dan AbramovDeleting is always tricky because there is no first class notion of a schema.
  • These reducers will know when to remove IDs from foreign key fields because they know what the schema looks like.Dependencies I will consider in for managing complex form stateRedux-ormA small, simple and immutable ORM to manage relational data in your Redux store.It would be great if CRUD operations were managed with the model declaration with no need to write actions manually.Redux UIGood solution to separate the UI state from the application state.NormalizrLibrary suggested in the official redux documentation for normalizing the application state.Main dependencies for this projectReactReduxReact router v2Redux ThunkReact DnDReselectStyled componentsReact BootstrapBootstrap Material DesignJestConclusionRedux is a good solution for handling complex interface, it is very similar to flux architecture, but if I have to rewrite the application, I would do it in a different way.I would avoid to specify all the logic on the client, moving a part on the server side.A good approach I have seen in some projects, it is to dispatch the actions to the server and with a websockets connection, notify all the connected clients of the changes made.This way the client is responsible only to denormalize and normalize the state received by the server, handle the UI state and presenting the data.On the server side is much easier to handle relationships with an ORM provided by a web framework.This project has been of a great help to make me understand all the caveats redux can reserve for a medium size application.

I have been working on my first project with Redux for the last few weeks. An admin interface to manage and create questionnaires about patients data collection. When writing a small application…
Continue reading “Thoughts on Redux – Pietro Ghezzi – Medium”

Rewriting Transmission UI with React – Hacker Noon

Rewriting Transmission UI with #reactjs – Hacker Noon

  • This forces you to always work with the same mentality not allowing you to test new approaches to solve problems.Following our desire to learn new stuff to make our life easier, we wanted to experiment with new technology to build a side project with a complete new stack that fits better with the app requirements.In that same week, a friend of mine was talking about a bug that was affecting him in the web client of Transmission.
  • We decided to start building a new interface from scratch to understand new patterns, new approaches and discover what would be the next challenges for the ultimate interface.Our experimental stackReviewing all of the features in the current Transmission web client, the stack we chose was React for the user interface, Mobx for the state management and CSS modules for all the stuff related with the application styles, with a new build process managed by Webpack.On the other hand, and with the above stack in mind, we decided to use some best practices for the long term quality of this project.
  • New tools have appeared during the last 5 years to improve our life like SASS, LESS or CSS Modules.If you are used to code big sets of components you can make the common mistake of reuse style classes for different components.
  • This is important because most of the components contain several paths and we need to ensure that each one is covered.Integrating this new set of tests to some CI we can be more confident about future changes that we apply to the application.As we can see in this example we are rendering the Progress bar component with mocked torrent data.Then with the snapshot technique we can ensure that the rendered result is what we expect comparing with previous snapshot.
  • So we decided to follow the current design, we just wanted to propose a new code architecture.We didn’t want to impact the end users in case that this code were considered for inclusion in the main Transmission repository.Lastly, even if the project dies out, for whatever reason, we’re happy anyway, because we learnt a lot of things and had a really fun time during its development.

I remember it was about two months ago when I was talking with Eduardo Lanchares about the best stack for the next webapp. Sometimes you are at work and you are stuck with the current set-up of…
Continue reading “Rewriting Transmission UI with React – Hacker Noon”