Microservices with Docker, Flask, and React

  • To connect the client to the server, add a method to the class: – – We’ll use Axios to manage the AJAX call: – – You should now have: – – To connect this to Flask, open a new terminal window, navigate to the flask-microservices-users, activate the virtual environment, and…
  • Kill the Create React App server, and then run: – – We still need to call the method, which we can do in the : – – Run the server – via – and then within Chrome DevTools, open the JavaScript Console.
  • What would happen if the AJAX request took longer than expected and the component was mounted before it was complete?
  • Finally, update the method to display the data returned from the AJAX call to the end user: – – Let’s create a new component for the users list.
  • Add a new file to that folder called UsersList.jsx: – – Why did we use a functional component here rather than a class-based component?

If you’re new to React, review the Quick Start and the excellent Why did we build React? blog post. You may also want to step through the Intro to React tutorial to learn more about Babel and Webpack.
Continue reading “Microservices with Docker, Flask, and React”

Create React App with an Express Backend

Create #ReactJS App with an Express Backend:  by @dceddia #JavaScript

  • In this post we’ll set up a React app alongside an Express backend app, and wire up the UI to fetch some data from the backend.
  • Note the variable: this Express app will default to port 3000, and Create React App will also default to port 3000.
  • First things first, make sure you have installed if you don’t already:

    Then, from inside the folder, create the React app:

    This is the key change that will let the React app talk to the Express backend (or any backend).

  • Inside the React app’s folder ( ), open up (make sure it’s not Express’ package.json – it should have things like “react” and “react-scripts” in it).
  • At this point 2 servers are running: Express (on port 3001) and Create React App’s Webpack dev server (on port 3000).

Learn how to forward API requests from Create React App to any backend with the proxy setting.
Continue reading “Create React App with an Express Backend”

Why I love Create React App – Valerii Sorokobatko – Medium

So many reasons to 💕 Create React App:  #ReactJS #JavaScript #frontend

  • Awesome Create React App – A collection of awesome things regarding Create React App ecosystem.
  • Also there is the Create React App feature request with implemented Pull Request – Support different env configs .
  • But if I had already ejected application – I will have to migrate back to Create React App.
  • Change webpack config – add plugins and change entry point
  • Create React App doesn’t support decorator syntax at the moment.

Before Create React App I always copy-paste webpack config and other *rc files from previous applications to each new application or even playground. Create React App provides simple cli command to…
Continue reading “Why I love Create React App – Valerii Sorokobatko – Medium”

How To Add Redux To Create React App

How To Add #Redux To Create React App  #reactjs #webdev #javascript

  • Create React App : Create React apps with no build configuration.
  • import React from ‘react’; import ReactDOM from ‘react-dom’; import App from ‘.
  • How To Add Redux To Create React App
  • We are going to have two components: a shelf component that displays a list of items on the shelf and a cart component that displays items we currently have in our cart.
  • The app will be a simple shopping cart that allows us to add items from the shelf.

This tutorial will show you how we can add Redux to the Create React App starter project. We’ll be using community best practices to structure our application
Continue reading “How To Add Redux To Create React App”

Adding create-react-app scripts to an existing project

  • I love create-react-app , I’ve used it to scaffold every new React app and React experiment I’ve worked on since it was released.
  • 04 December 2016 on React , Create React App
  • Running npm start and npm build now runs the react-scripts and can build and serve the project perfectly.
  • I could change the id in the html but I changed document.querySelector(‘#app’) to #root in my index.js where I mount the app, since the point was to have it conform to the Create React App standards all my new.
  • “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test –env=jsdom”, “eject”: “react-scripts eject”

I love create-react-app, I’ve used it to scaffold every new React app and React experiment I’ve worked on since it was released.
Continue reading “Adding create-react-app scripts to an existing project”

AJAX Requests in React: How and Where to Fetch Data

AJAX requests with #reactjs and axios

  • To fetch the data from the server, you’ll need an HTTP library.
  • React simply renders components, using data from only two places: props and state .
  • So to use some data from the server, you need to get that data into your components’ props or state.
  • First: React itself doesn’t have any allegiance to any particular way of fetching data.
  • The component’s state is updated by calling this.setState with the new array of posts.

First: React itself doesn’t have any allegiance to any particular way of fetching data. In fact, as far as React is concerned, it doesn’t even know there’s a “server” in the picture at all.
Continue reading “AJAX Requests in React: How and Where to Fetch Data”

WebStorm 2016.3 EAP, 163.4396: Create React app

  • Create React App is an officially recommended way to create new React apps.
  • WebStorm 2016.3 EAP, 163.4396: Create React app
  • Then to start your new project, double click on the start task in the npm tasks tool window to run it.
  • Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app.
  • WebStorm 2016.3 EAP, 163.3094 : Integration with Flow; PostCSS support; Smarter Rename for TypeScript; More features in Angular CLI integration; Grouped generated files in the Project view; Option to generate an .editorconfig file; Code style option for arrow functions.

WebStorm 2016.3 EAP build (163.4396) is now available! You can download it here. Unfortunately, there’re no patch-updates available this time.
Continue reading “WebStorm 2016.3 EAP, 163.4396: Create React app”