Building Mobile Applications with React Native. A brief introduction.

Building Mobile Applications with #reactnative. A brief introduction.

  • If you open your App.js you’ll encounter something along the lines of: – Components are the core of React Native, every visual element of your app is a component.
  • This styling cheat sheet is very handy when you’re getting started to check on what properties are available when styling components, but for a complete description the go to place is the online React Native documentation.
  • There are many basic elements that React Native provides as starting points and building blocks for our components: Views, ScrollViews, Text, TextInput, Touchable components that respond to touch input, Image, etc… As your UI starts growing and you have the need to add more and more Native components you’ll start…
  • Props and State – These are important concepts that will bring functionality, customisation and the ability to reuse components throughout your application.
  • We’ve created a new component that makes use of props and state to render a few text elements to the screen of our app’s.

The number of mobile devices is estimated to cross the 5 billion [1] mark between 2018 and 2019. This is pushing the mobile application development market forward, with the ever increasing demand for…
Continue reading “Building Mobile Applications with React Native. A brief introduction.”

React: Re-render a Component On Route (or props) Change

React: Re-render a Component On Route (or props) Change #React #reactjs

  • /TableContainer”;const App = () = { – return ( – React.Fragment – Switch – Route exact path=”/subscribers” component={TableContainer} / – Route exact path=”/leads” component={TableContainer} / – /Switch – /React.Fragment – ); – };export default App;ReactDOM.render( – HashRouter – App / – /HashRouter, – )As you can see TableContainer is the…
  • /Table”; – import axios from “axios”;class TableContainer extends Component { – constructor() { – super();this.state = { – data: [], – loaded: false, – placeholder: “Loading…” – }; – }componentDidMount() { – }getData(pathname) { – axios – .
  • Seems like a good candidate for calling an API In fact the signature for the method means it is possible to read the new pathname workflow becomes clear: – call the API inside componentDidMount when the component mounts the first timecall the API again inside componentWillReceiveProps when the component is…
  • /Table”; – import axios from “axios”;class TableContainer extends Component { – constructor() { – super();this.state = { – data: [], – loaded: false, – placeholder: “Loading…” – }; – }componentDidMount() { – { – }getData(pathname) { – axios – .
  • Table data={data} / : p{placeholder}/p; – } – }export default TableContainer;Now the TableContainer component: – calls the corresponding endpoint on first mountcalls api/subscribers/ if Route changes to /subscriberscalls api/leads/ if Route changes to /leadsNeat!

It makes sense to have a single React component for calling the API endpoints depending on the location pathname. With the application in place I can see the expected data if I click either on /leads…
Continue reading “React: Re-render a Component On Route (or props) Change”

React: Re-render a Component On Route Change

  • In other words: reloading/refreshing the same React component when visiting a link.
  • It makes sense to have a single React component for calling the API endpoints depending on the location pathname.
  • As you can see TableContainer is the only React component for fetching data.
  • More about presentational and container components: writing React components – – It should call the appropriate endpoint whenever I click /subscribers or /leads.
  • A single React component can fetch the data from different endpoints depending on the location pathname.

A common scenario with React Router: re-render a component on route change
Continue reading “React: Re-render a Component On Route Change”

Just landed my PR addings docs about code splitting to the @reactjs docs

  • If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.
  • You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.
  • While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.
  • For that you will need Loadable wraps dynamic imports in a nice, React-friendly API for introducing code splitting into your app at a given component.
  • Here’s an example of how to setup route-based code splitting into your app using libraries like React Router and React Loadable.

Most React apps will have their files “bundled” using tools like
Webpack or Browserify.
Bundling is the process of following imported files and merging them into a
single file: a “bundle”. This bundle can then be included on a webpage to load
an entire app at once.
Continue reading “Just landed my PR addings docs about code splitting to the @reactjs docs”

Just landed my PR addings docs about code splitting to the @reactjs docs

  • If you’re using Create React App, Next.js, Gatsby, or a similar tool you will have a Webpack setup out of the box to bundle your app.
  • You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.
  • When Webpack comes across this syntax, it automatically start code-splitting your app.
  • You want to make sure you choose places that will split bundles evenly, but not be terribly interuptive to the users of your app.
  • Here’s an example of how to setup route-based code splitting into your app using libraries like React Router and React Loadable.

Most React apps will have their files “bundled” using tools like
Webpack or Browserify.
Bundling is the process of following imported files and merging them into a
single file: a “bundle”. This bundle can then be included on a webpage to load
an entire app at once.
Continue reading “Just landed my PR addings docs about code splitting to the @reactjs docs”

The 14-Point Checklist Every React Native Developer Needs In Their Toolkit

The 14-Point Checklist Every #reactnative Developer Needs In Their Toolkit

  • React Native has caught a lot of hype recently, yet the ecosystem still sort of a wild-west when it comes to tooling decisions (as with all things JavaScript).
  • If you’re just getting started with RN, or you are experienced and are about to start a new project, here are the tools I recommend that you add to your React Native repertoire: – – Thanks for checking out this article!

Supercharge your RN development with these tools!
Continue reading “The 14-Point Checklist Every React Native Developer Needs In Their Toolkit”

React Lifecycle Reference Guide — SitePoint

React Lifecycle reference guide:  #fdw #reactjs #lifecycle #guide #reference

  • constructor(props) { – super(props); – this.state = { – count: props.initialCount – method is called just before component mounting and render method.
  • This method sounds like a nice place to set the component’s initial state.
  • Instead, the official React guide recommends using nextState) { – // perform preparation 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.
  • You may need to compare previous props/state to current ones to determine if the logic you placed here needs to prevProps) { – // perform DOM manipulations and network method is invoked just before a component is unmounted and destroyed.

Michael Wanyoike presents a reference guide to help developers quickly figure out which lifecycle method will best fit a solution in React.
Continue reading “React Lifecycle Reference Guide — SitePoint”

5 Projects to Help You Learn React

  • Variations of this UI can be found all over the web – Twitter, Facebook, Pinterest, Airbnb, Redfin, and so on – and it serves as a solid building block for the sort of app where you want to display an image + some data.
  • It’s also good practice for breaking down a UI into React components.
  • You might notice that the “days” look a lot like social cards…

    For added practice, here are a few ways you could expand on the app:

    You can see how this app starts off simple, but can be expanded at will to increase the challenge and the learning.

  • Hacker Hunt is an aggregator of Hacker News stories with categories, but more importantly, it’s a good app to build for React practice.
  • This app will give you some practice with lists of components that are a little more complicated than todos.

Here are 5 projects that’ll be fun to build, and do not involve any todo lists.
Continue reading “5 Projects to Help You Learn React”

How to Be A JavaScript Developer – Ken Rogers – Medium

How to Be A JavaScript Developer  #meteor #javascript #webdevelopment #react #reactjs

  • But I’ve always found that the best way to learn web development is to just build things.Meteor is a great way to get started just building things.It’s become a little more complex since its early days, but with the right setup and direction, it can still be a great way to bootstrap reactive applications.I think it’s a fantastic way to get started learning JavaScript development, or branch out into a new framework if you’ve already been using JavaScript for a while.So I wanted to put together this little guide that will serve as a potential path to learning web development with Meteor and React.All of these are resources that I have personally used and have served me well in learning.
  • Learn ES2015This free walkthrough of ES2015 does a great job of introducing you to the basics and walking you through how to use all of the new shiny things.Step 2 — Learn MeteorAlright, now that you’re familiar with JavaScript and its new syntax and capabilities, it’s time to dive in to Meteor.The Meteor TutorialThe official tutorial from Meteor.
  • The Meteor GuideAfter you’ve been introduced to Meteor with the tutorial, dive in to the guide to learn how to structure your project, and to get some more in depth knowledge on the finer points of MeteorStep 3 — Learn ReactSo you’ve got a decent handle on Meteor, not let’s dive into React.The React DocsThe official React docs do a good job of introducing you to the concepts and how to think in a React-ish way.2.
  • It also comes with GitHub source code so you can use it as an example.Phase 2 — BuildStep 1 — Experiment with BaseNow that you’ve got a good grasp on how to develop using Meteor and React, it’s time to start building things.Base is a Meteor boilerplate project to help you bootstrap your Meteor projects.It’s built with React and also uses React Router.In my opinion, downloading Base and digging into it, hacking on it, and using to as the starting point for your own project is one of the best ways to learn development with Meteor.By digging into Base, you’ll get an idea of best practices when building things with Meteor and React, and you’ll be able to use it as a template for building projects.Using the books and courses from the Learn phase as your foundation, you’ll be able to understand how Base is put together and how it all works.Really take the time to dig into every different component and figure out how everything is working.
  • Resist the urge to bounce around from framework to framework, constantly switching to whatever seems coolest.Instead, find problems that need to be solved, figure out a way to solve them with web applications, and then find the proper tool for the job.One of the most important skills for a professional developer is being able to build usable applications that solve real problems for real people.If you can find examples of those out in the wild, and build up a portfolio of yourself solving those with web apps, you’ll be indispensable.So now that you know the basics of JavaScript development with Meteor and React, I want you to get out there and start using that knowledge to solve real problems.Share that knowledge and those solutions with others.

A few years ago, I stumbled on a video of somebody making a responsive, real-time web app using something called Meteor. If you haven’t seen it yet, I recommend giving it a watch. It was pretty…
Continue reading “How to Be A JavaScript Developer – Ken Rogers – Medium”

Adding react to your node app – Tyler Swayne – Medium

Adding react to your node app  #react #expressjs #sailsjs #node #javascript #reactjs

  • Instead, I’d like to talk about how to start using it; specifically, in an mvc (or MVC-ish) node app, or really any node application that uses the server to fetch data and render a view with a templating engine.A little while ago, I decided to learn a front-end framework.
  • From what I had read about react at the time, it has the benefit of being potentially light weight, “just the V in MVC”, and after reading more I decided that would be a great solution – add react to my app to get all of the flashy functionality I wanted, learn a front end framework, huzzah!Learning the bones of react was actually a relatively quick and easy experience.
  • I still didn’t quite understand webpack or babel, I didn’t know how to go about passing server-side data to my react component (at least elegantly), and even getting to this point took me a lot longer than I’d like to admit.Soon after all of this I was presented with the opportunity to add react to one of our apps at my real job.
  • I settled on React on Rails (the app was a rails app) and it took me minutes to generate a webpack config, write a small component, add a line of code to my view, and have my react component rendering with server side data.
  • I have used react-helper in a handful of my projects now and it really is a simple solution to adding react to a node app and a big time saver.

React is great, we all agree, so I won’t ramble on about why to use it (I don’t think “we” as developers have ever “all agreed” on anything). Instead, I’d like to talk about how to start using it…
Continue reading “Adding react to your node app – Tyler Swayne – Medium”