Migrating to React’s New Context API – kentcdodds

📝 Article => Migrating to React’s New Context API by @kentcdodds  | #ReactJS

  • Because of this significant change, I’m making an update to my advanced component patterns course on Egghead.io to use the new API rather than the old one.
  • The Old Context APIHere’s the version of the implementation with the old context API: – const TOGGLE_CONTEXT = ‘__toggle__’ – function ToggleOn({children}, context) { – const {on} = context[TOGGLE_CONTEXT] – return on ?
  • null : = { – [TOGGLE_CONTEXT]: ToggleButton(props, context) { – const {on, toggle} = context[TOGGLE_CONTEXT] – return ( – Switch on={on} onClick={toggle} {…props} / – ) – } – ToggleButton.contextTypes = { – [TOGGLE_CONTEXT]: Toggle extends React.Component { – static On = ToggleOn – static Off = ToggleOff – static…
  • on}), – () = ) – getChildContext() { – return { – [TOGGLE_CONTEXT]: { – on: this.state.on, – toggle: this.toggle, – }, – } – } – render() { – return div{this.props.children}/div – } – }With the old API, you had to specify a string for what context your component…
  • Here’s my new version of this same exercise: – const ToggleContext = React.createContext({ – on: false, – toggle: () = {}, – })class Toggle extends React.Component { – static On = ({children}) = ( – ToggleContext.Consumer – {({on}) = (on ?

With the recent release of React 16.3.0 came an official context API. You can learn more about the why and how behind this API from my previous blog post: “React’s ⚛️ new Context API”. Because of…
Continue reading “Migrating to React’s New Context API – kentcdodds”

So you want to learn React.js? – EdgeCoders

So you want to learn React.js?

☞ 

#Redux #javascript

  • This is a good thing, React is a library that does one thing really well, but it’s not the answer to everything.
  • This is not counting the tools and other libraries that complete React like for example, Redux or Relay.
  • Refreshing your knowledge on JavaScript first would not hurt, specially because you need to learn ES2015, not because React depends on it (it does not), but because it’s a much better language, and most of the examples, courses, and tutorials you’ll find use the modern JavaScript syntax.
  • The recommended tool is Babel.jsReact ecosystem libraries: Since React is just the UI language, you’ll need tools to complete the picture and go beyond even MVC.
  • I’ll give you two things to focus on, just forget everything else you encounter and learn these two first once you’re done with React itself: react-router and redux.Right after getting comfortable with the raw concepts of React itself, build a React Native app.

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to…
Continue reading “So you want to learn React.js? – EdgeCoders”

How to build a server-rendered React app with Next & Express

  • Next, open up your package.json and replace your script section with this: – Run the npm run dev command, you should get an error like : – next Couldn’t find a `pages` directory.
  • Please create one under the project rootThis is because Next uses the pages directory and the files in them to map its routes.
  • Look at this route below, This helps us to achieve clean URLs as discussed in the paragraph above: – By default, it’s easy to use query strings in Next, but as usual, you want to keep your URLs clean, so you opt for something like: /p/2 rather than /p?id=2.
  • In the code above, we use the popular express routing to define such routes, then we pass the page that should be loaded and the id as a query param to the main Next app.
  • First, create a file called next.config.js in the root of your app and add the following content: – Note: In the setup above, only the index page would be exported as it is the only route we have specified in the PathMap.What if we want to add more pages?

How to build a server-rendered React with Next & Express (plus discussion on why you server-side rendering and customer server APIs.
Continue reading “How to build a server-rendered React app with Next & Express”

Snapshot Tests in React Using Jest

  • Today we’re talking about snapshot tests using Jest.
  • When writing snapshot tests using jest, you should basically just follow the next template: – – You use to create a component with desired props, transform it to JSON and then check if it matches a snapshot.
  • Here’s a more concrete example – let’s say we have a dummy component called , for which we want to write a snapshot test: – – For our Input component, it can look something like this: – – To run the test, you just need to type command in terminal….
  • Output snapshot file will be created, and when running the test next time, jest will compare that output snapshot file to our updated component.
  • Keep in mind that all of these output snapshot files should be committed alongside the modules they are covering and their tests, as they are part of the test.

Continue reading “Snapshot Tests in React Using Jest”

React Native Mobile Apps (iOS and Android)

React Native Mobile Apps (IOS And Android) – The Practical Guide
  

#ReactNative

  • React Native Mobile Apps (iOS and Android) – Use React Native and your React knowledge and take your web development skills to build native iOS and Android Apps – – Mobile applications are one of the best ways to engage with users – no wonder everyone wants to build one!
  • Wouldn’t it be great if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that?
  • No need to learn Java, Android, Swift, ObjectiveC or anything of that – React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS.
  • I’ll teach you all you need to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive really deep into the React Native ecosystem.
  • You’ll learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to animate React Native apps, how to navigate around, use maps and the camera and so much more!

React Native Mobile Apps- The Practical Guide- Use React Native and your React knowledge and take your web development skills to build native iOS and Android Apps
Continue reading “React Native Mobile Apps (iOS and Android)”

React Higher-Order Component Patterns in TypeScript

  • An example might be a HOC which enforces that styles are set for a component via the style prop, a simple example of this being the following withBlueBackground HOC, which we’ll use throughout this article, and, as the name suggests, ensures the background colour is blue for the wrapped component:Note:…
  • : React.CSSProperties; name: string;}The type variable P is then used to specify the props for the unwrapped component to be passed into the HOC:UnwrappedComponent: is just an alias for React.StatelessComponentP | React.ComponentP, which would allow either a stateless functional component or a class component to be passed into the HOC.Object.assign()…
  • You will also face this same issue if you want to destructure the props using object rest:In terms of usage, the HOC can then be used as if it were a plain JavaScript HOC, with the added bonus that the wrapped component is statically typed:Pattern #2: Adding PropsSome HOCs add props…
  • : React.CSSProperties; name: string;}This will be more useful when additional props are injected, and ones which aren’t standard React props such as style.As for the HOC’s own props (WithBlueBackgroundProps) these are combined with the wrapped component’s props using a type intersection operator () :class WithBlueBackground extends React.Component P WithBlueBackgroundProps { …}This…
  • To demonstrate this with the withBlueBackground HOC, we will change it to require a component passed in that accepts a backgroundColor prop rather than setting the colour via style:Given we changed HelloProps to extend InjectedBlueBackgroundProps in pattern #2, no changes will need to be made to it, but the Hello…

Higher-order components (HOCs) in React are a powerful tool for code reuse between components. However, a common complaint of developers using TypeScript is that they are difficult to set types for…
Continue reading “React Higher-Order Component Patterns in TypeScript”

Simple SVG Dial in #react @CodePen @greensock @reactjs #svg #ui (might be useful!)

Simple SVG Dial in #react @CodePen  @greensock @reactjs #svg #ui (might be useful!)

  • You can apply CSS to your Pen from any stylesheet on the web.
  • Just put a URL to it here and we’ll apply it, in the order you have them, before the CSS in the Pen itself.
  • If the stylesheet you link to has the file extension of a preprocessor, we’ll attempt to process it before applying.
  • You can also link to another Pen here, and we’ll pull the CSS from that Pen and include it.
  • If it’s using a matching preprocessor, we’ll combine the code before preprocessing, so you can use the linked Pen as a true dependency.


Continue reading “Simple SVG Dial in #react @CodePen @greensock @reactjs #svg #ui (might be useful!)”

Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation

Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation

  • So to start let’s start with the basic file structure layout:I have created a folder I’m going to be doing all my work in called appInside it I have a config folder and a views folder with a index.js file as well.You can call your folders whatever you want, but…
  • /app/index.
  • js file.Our App.js file should look like:import App from ‘.
  • /app/index’;export default App;As always, we want to export it so our root level index.js can import it.Our index.js on the root level should look like this:import { AppRegistry } from ‘react-native’;import App from () = App);This is best practice if you want to set up any kind of server/database or…

No offense, but all of the other React-Native navigation articles I’ve found on Medium don’t work. So I took it upon myself to figure it out, and write a better, smarter, easier way for navigation…
Continue reading “Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation”

MERN v3.0 is underway 🎉 – Hashnode

  • MERN v3.0 is underway 🎉It’s been a little over a year since we at Hashnode made our boilerplate code available to the community.
  • We have been humbled by the traction which MERN has gotten over the years.
  • Little did we know that our small little side project would become the go-to solution to get started with the MERN stack for the community.
  • While retrospecting our open-source contributions, the need for a new version of MERN came to light, as highlighted by the numerous issues and PR’s that have been raised over the past year to update the repository.It is 2018, and a lot has changed in the React landscape.
  • xMoving from React Router v2 to v4Out of the box Yarn supportUpgrade to Webpack 3 and move to babel-preset-envBring base Node version to v8.x LTS, for all that async-await goodness 😋Have a simpler workflow so that you can start your project(s) with much more ease!You can track the progress and…

It’s been a little over a year since we at Hashnode made our boilerplate code available to the community. We have been humbled by the traction which MERN has gotten over the years. Little did we know…
Continue reading “MERN v3.0 is underway 🎉 – Hashnode”

Testing responsive grid design using CSS flex in @preactjs (@reactjs). Link:

Testing responsive grid design using CSS flex in @preactjs (@reactjs). Link:

  • You can apply CSS to your Pen from any stylesheet on the web.
  • Just put a URL to it here and we’ll apply it, in the order you have them, before the CSS in the Pen itself.
  • If the stylesheet you link to has the file extension of a preprocessor, we’ll attempt to process it before applying.
  • You can also link to another Pen here, and we’ll pull the CSS from that Pen and include it.
  • If it’s using a matching preprocessor, we’ll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Built in Preact.js….
Continue reading “Testing responsive grid design using CSS flex in @preactjs (@reactjs). Link:”