Introducing form-for. ReactJS Forms Made Easy – Pedro Silva Moreira – Medium

Introducing form-for. #ReactJS Forms Made Easy

  • Binding componentsAs you can see on the code above, each field has a type set to it; some even have a couple extra properties.Now, we need to tell form-for what components to render.
  • I created a package for bootstrap components that makes your life veeery easy.
  • Building the formNow, let’s put together the User, the bootstrap components and the Form and Field tags.4.
  • The code is very straight forward, just like the one you saw above.And if you want more sandbox examples, I have two others in my profile: MobXFormFor goes really well with MobX.
  • If you don’t like comment too, lemme know how you think it could be

I’ve been coding for a few years and played with a few technologies. In this path, I’ve become a big fan of a Rails gem called simple_form. I’m also a fan of React. With these two in mind, I decided…
Continue reading “Introducing form-for. ReactJS Forms Made Easy – Pedro Silva Moreira – Medium”

Beginner’s guide to react/redux —painting a mental model

  • I highly recommend anyone starting out with Redux to read the core concepts outlined in the official documentation.Long story short, Redux application has a plain object, known as store, which serves as data model for your app.
  • For example, for a list of articles, I can have an article state that looks like this:state = { articles: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, fetching articles is an action that looks that this:{ type: ‘ARTICLES_FETCHED’, payload: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, the reducer looks like this:const initialState = { articlesById: null,}export default function(state = initialState, action) { switch (action.type) { case types.ARTICLES_FETCHED: return { …state, articlesById: action.articlesById } default: return initialState }}To summarize the basic ideas of Redux:it describes state as plain objects, and store (global state) by merging all the states in your app.it describes changes to the app as plain objects.it uses pure functions to handle changes.The redux API then bridges your redux logics with react views while providing some utilities to compose states.Say we send a request to a remote server and fetch some articles.
  • The reducer evaluates the action and store the payload articles in the state.

Disclaimer: This article is written by a beginner trying to comb through new concepts she just learned. React/Redux is the hottest frontend frameworks these day. If you google the term Redux diagram…
Continue reading “Beginner’s guide to react/redux —painting a mental model”

busypeoples/Flow_Chapter_One.md Last active Aug 30, 2017

  • Now that we have type definitions in place, let’s start to build the game.
  • One interesting thing to note is that we needed to give Flow a type definition for the React Component .
  • Our TicTacToe component will keep state of the current game status as well as the board.
  • Our next steps will include refactoring the board and cells to their own respective components and we will add interactivity, so player’s can take turn and start playing.
  • Although it seems like a lot of work is involved upfront for definining and displaying a simple 3 x 3 board, we can already guarantee that the board has 3 rows containing 3 cells.

Why does it make sense to use FlowType or TypeScript when working with JavaScript?
A good approach in answering this question is to build a small game or application
to make the benefits clear.
Continue reading “busypeoples/Flow_Chapter_One.md Last active Aug 30, 2017”

ReactJs and components

ReactJs and components

  • They’re two type of component that you can use in your code

    If you want to create little pieces of code that can be reused everywhere, this is the type of components you should use.

  • Ideally, in your app, you should always try to have as many stateless components as possible.
  • Because  that normally means you moved your logic outside of the view layer and moved it to something like redux, which means you can test your real logic without having to render anything

    These component act like a class in javascript.

  • They can contain a lot of code and normally render your stateless component.
  • To render something to the user complex component will need to implement render method and return your view inside of it.

Components are the base structure of React. They let you split your UI into independent and reusable pieces so you will be able to use them everywhere. They’re tree type of component that you can use in your code
Continue reading “ReactJs and components”

Power of #TypeScript for #React part 3 is ready 🚀 Today looking at Actions #JavaScript…

  • Actions are a really helpful way to create separation between the different layers of an application, because they are not tightly coupled each layer can be built and tested in pieces.
  • It does bring it’s challenges however, whilst the code is loosely coupled, all areas of the code which interact with the action need to have the same expectation of it’s structure.
  • At Seccl all our actions follow the same basic structure and TypeScript allows us to define what that is by using an .
  • So now that we know the flavours, let’s look at an example of our action interface in the wild.
  • What we will create is an interface which describes the called and an action creator which builds the action.

Frontend leadership, Frontend architecture, HTML(5), JavaScript (OOJS, ES6, TypeScript), CSS (BEM, Less, SASS, Stylus), Testable Code (Mocha, Sinon, Chai, Karma), NodeJs (Express, Mongoose) , Cloud Applications (Heroku, S3, Azure)
Continue reading “Power of #TypeScript for #React part 3 is ready 🚀 Today looking at Actions #JavaScript…”