Setup React with webpack 3, babel and NPM – Jakob Lind

How to setup React with webpack 3, babel and NPM  #reactjs #javascript

  • To get started with React you have to learn and configure NPM, webpack, babel AND React.
  • You have probably heard of create-react-app (CRA) which is an official tool to start a new React project.
  • Next, we are going to create our minimal React app and HTML file.
  • Our webpack config file looks like this: – – It contains the following: – – Babel is a highly configurable tool to transpile JavaScript.
  • Our webpack config uses babel-loader to run babel which uses the regular babel config file.

A few years ago jQuery was the best practice for Javascript/frontend development. Getting started with jQuery was as simple as creating an index.html document, include jQuery and start writing code.
Continue reading “Setup React with webpack 3, babel and NPM – Jakob Lind”

React Redux Isomorphic boilerplate: Best Practice – Hacker Noon

React Redux Isomorphic boilerplate: Best Practice @wahengchang  #Javascript #Reactjs

  • React Redux Isomorphic Application: Web Apps: MVC is contained both in client-side and server-side.
  • This is the best practice of the React-Redux-Boilerplate, which is a simple project to show how the mechanism of isomorphic application, below is some conception which is new and important for me:Client RenderingBuilding static JS file, which is loaded by browsers.Server RenderingUsers request a page, it renders the required component(s) into an HTML string, and then sends it as a response to the client (by Redux).
  • Container ComponentsProvide the data and behavior to presentational or other container components.const mapStateToProps = (state, ownProps) = { return …}const mapDispatchToProps = (dispatch, ownProps) = { return { … }}const myContainer = connect( mapStateToProps, default myContainerPresentational Components1) Have no dependencies on the rest of the app.
  • 2) Are concerned with how things look.class myComponent extends React.Component { render() { … }}myComponent.propTypes = { …}export default myComponentReducerActions describe the fact that something happened, but don’t specify how the application’s state changes in response.
  • You need to call the store’s dispatch function to actually cause the mutation.ActionCreator = (…args: any) = ActionIt is a higher-order function that composes a dispatch function to return a new dispatch function .

Client Rendering, Server Rendering, Container Components, Presentational Components, Reducer, Action, Action Creator, Middleware
Continue reading “React Redux Isomorphic boilerplate: Best Practice – Hacker Noon”

Best practices for JavaScript function parameters

  • The problem with passing an object as a parameter to a function is that it’s not clear what values you should put into it.
  • One common thing in FP is to partially apply your functions, which is much harder to do if your function takes its parameters as an object.
  • While separate parameters are a good starting point, we run into trouble as soon as the function has optional parameters.
  • For functions with a single optional parameter, the solution is simple:

    Best practice: optionals come last

    However, if we have more than one optional parameter, the problem is… what if we only need to pass one optional parameter?

  • You can pass in parameters easily as an object, but the properties for the object can be easily seen from the function’s signature.

From time to time, people ask things like “should I use objects to pass function arguments”. I’m sure you recognize the pattern, as it’s common with many libraries:
Continue reading “Best practices for JavaScript function parameters”