#react sharing

React Top 30 Articles of 2017

Here we have collected 30 Awesome Articles of 2017. Give a plenty of time to read all of the articles you have missed. You will find the experience and techniques shared by React leaders particularly useful.

References:

Our Best Practices for Writing React Components by Scott Domes: https://buff.ly/2CQSeVj

Every time you build a to-do list app, a puppy 🐕dies 😢by Hrishi Mittal: https://buff.ly/2AE6TgT

Setup a React Environment Using webpack and Babel by Joy Warugu: https://buff.ly/2CRzFAv

React Native at Instagram by Instagram Engineering: https://buff.ly/2CUhvOo

How I converted my React app to VanillaJS (and whether or not it was a terrible idea) by David Gilbertson: https://buff.ly/2AF56YH

How to build animated microinteractions in React by Christian Sepulveda: https://medium.freecodecamp.org/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8

Twitter Lite and High Performance React Progressive Web Apps at Scale by Paul Armstrong: https://buff.ly/2AErEsC

Introducing Sizzy —A tool for developing responsive websites crazy-fast by Kitze: https://medium.com/@kitze/introducing-sizzy-a-tool-for-developing-responsive-websites-crazy-fast-39a8c0061992

45% Faster React Functional Components, Now by Philippe Lehoux: https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

Things nobody will tell you about React.js by Gianluca Guarini: https://medium.com/@gianluca.guarini/things-nobody-will-tell-you-about-react-js-3a373c1b03b4

Build your first progressive web app with React by Scott Domes: https://buff.ly/2AFzTVn

Create React App with an Express Backend by Dave Ceddia: https://daveceddia.com/create-react-app-express-backend/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Rearchitecting Airbnb’s Frontend by Adam Neary: https://buff.ly/2AFGY8o

After building my first React Native app, I’m now convinced it’s the future by Taylor Milliman: https://buff.ly/2AErEJ8

How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native by Tim Anglade: https://medium.com/@timanglade/how-hbos-silicon-valley-built-not-hotdog-with-mobile-tensorflow-keras-react-native-ef03260747f3

Creating truly universal React component systems by Max Stoiber: https://buff.ly/2CPXHf6

Understanding Higher Order Components by Tom Coleman: https://medium.freecodecamp.org/understanding-higher-order-components-6ce359d761b

Animating the Virtual DOM by Sarah Drasner at React Europe 2017: https://www.youtube.com/watch?v=W5AdUcJDHo0

Build a Mini Netflix with React in 10 Minutes by Prosper Otemuyiwa: https://scotch.io/tutorials/build-a-mini-netflix-with-react-in-10-minutes?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

A React And Preact Progressive Web App Performance Case Study: Treebo by Addy Osmani: https://buff.ly/2CU60Xu

7 architectural attributes of a reliable React component by Dmitri Pavlutin: https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

What’s New With Server-Side Rendering in React 16 by Sasha Aickin: https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

8 Key React Component Decisions by Cory House: https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594

The 100% correct way to structure a React app (or why there’s no such thing) by David Gilbertson: https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed

How We Built Our React Native App by Siddharth Jain: https://medium.com/engineering-housing/how-we-built-our-react-native-app-3380a33811ac

You might (not) need a Server Side Rendering framework by Adrien Harnay: https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Setup Continuous Integration with React Native by Spencer Carli: https://medium.com/react-native-training/setup-continuous-integration-with-react-native-50ad2f6145f4

React Native meets iPhoneX by Raúl Gómez Acuña: https://blog.callstack.io/react-native-meets-iphonex-a0f5034f7a41

6 Simple ways to speed up your react native app by Atinder Singh: https://codeburst.io/6-simple-ways-to-speed-up-your-react-native-app-d5b775ab3f16

Network layer in React Native by Kureev Alexey: https://medium.com/dailyjs/network-layer-in-react-native-eec841f11861

For a high-quality, in-depth introduction to React, you can’t go past Canadian full-stack developer Wes Bos. Try his course here, and use the code SITEPOINT to get 25% off and to help support SitePoint.

This is a reference guide to help developers quickly figure out which lifecycle method will best fit a solution they’re currently working on in React.

constructor(props)

The constructor for a React component is the first method that gets called. This is where you should initiate state. You should ensure you execute super(props) first. Otherwise, bugs will crop up.

constructor(props) super(props); this.state = count: props.initialCount ;

componentWillMount()

This method is called just before component mounting and render method. Setting state here won’t trigger a re-render. This method sounds like a nice place to set the component’s initial state. However, React’s official guidelines recommend using the constructor() instead.

componentWillMount() // perform setState operations

render()

This is a mandatory method for all React components. It will be invoked when state changes, when the parent component causes it to re-render, or when component.forceUpdate() is called.

The render() method is where you put your JSX code. You can also return false or null if you don’t want to render anything. You can read values from this.prop and this.state, but you can’t call this.setState() (or call another function that does). You should also not directly interact with the DOM. Instead, use componentDidMount().

render() const message = this.state; return( <div> h1>List of Messages</h1> <MessageView message=message /> </div> )

componentDidMount()

This method is invoked right after the component has been mounted and render() has been called. Once a component mounts, it means you have access to the actual DOM nodes. This is a good place for performing network requests such as an API call. If you set state here, a re-render will be triggered.

componentDidMount = () => this.props.fetchContacts()

shouldComponentUpdate(nextProps, nextState)

This method is invoked just before render() whenever there are new props or state changes. The method should only return true or false. If you return false, this means the render function won’t be called. However, do note that:

this method isn’t called in the initial rendering

child components will still re-render if you return false

future versions may not enforce this directive, but instead use it as a hint.

This method has access to nextProps and nextState, which gives you an opportunity to compare them with the current props/state and determine if a re-render is necessary. This is a good place to implement performance optimization code.

shouldComponentUpdate(nextProps, nextState) // put performance optimization code here return true;

componentWillUpdate(nextProps, nextState)

This method is invoked just before render() and right after shouldComponentUpdate() returns true. It’s not called in the initial render. This method allows you to perform preparation actions before an update occurs, such as reseting cache values. You can’t use this.setState() here though. Instead, the official React guide recommends using componentWillReceiveProps().

componentWillUpdate(nextProps, nextState) // perform preparation tasks

componentWillReceiveProps(nextProps)

This method is invoked when a component receives new props after the initial rendering. You can use this method to update component state using this.setState() — for example, receiving a response from a network or API request.

This method may be triggered even if the props haven’t changed. This can be triggered from a parent component, causing the component to re-render. It’s recommended that you compare nextProps with current props to determine if a re-render is necessary.

componentWillReceiveProps = (nextProps) => // check if id has changed if (nextProps.contact._id !== this.props.contact._id) this.setState(contact)

componentDidUpdate(prevState, prevProps)

This method is invoked right after render(). However, it’s not called during the initial render. It also isn’t called if shouldComponentUpdate() returns false.

This is a good place to perform network requests and DOM manipulations. You may need to compare previous props/state to current ones to determine if the logic you placed here needs to run.

componentDidUpdate(prevState, prevProps) // perform DOM manipulations and network requests

componentWillUnmount()

This method is invoked just before a component is unmounted and destroyed. This is a good place to perform any necessary cleanup — such as removing listeners, revoking network requests, and invalidating timers. You can also perform DOM manipulations here.

componentWillUnmount() // perform cleanup actions

Recommended Courses

Wes Bos

A step-by-step training course to get you building real world React.js + Firebase apps and website components in a couple of afternoons. Use coupon code ‘SITEPOINT’ at checkout to get 25% off.

I write clean, readable and modular code. I love learning new technologies that bring efficiencies and increased productivity to my workflow. Currently am into React & Javascript stuff.

via JavaScript – SitePoint http://ift.tt/2xNVqLT