Comment Créer Une Application CRUD Avec FastAPI Et React

Dans ce didacticiel, vous allez créer une application CRUD avec FastAPI et React . Nous commencerons par échafauder une nouvelle application React avec la CLI Create React App avant de créer l'API RESTful backend avec FastAPI. Enfin, nous développerons les routes CRUD backend avec les composants frontaux React.

Application finale :

Terminer toutes les applications

Dépendances :

  • Réagir v18.1.0
  • Créer une application React v5.0.1
  • Noeud v18.2.0
  • npm v8.9.0
  • npx v8.9.0
  • FastAPI v0.78.0
  • Python v3.10

Avant de commencer ce didacticiel, vous devez vous familiariser avec le fonctionnement de React. Pour un rappel rapide sur React, consultez le guide des concepts principaux ou le didacticiel d'introduction à React .

Objectifs

À la fin de ce didacticiel, vous serez en mesure de :

  1. Développer une API RESTful avec Python et FastAPI
  2. Échafaudez un projet React avec Create React App
  3. Gérer les opérations d'état avec l'API React Context et les crochets
  4. Créer et afficher des composants React dans le navigateur
  5. Connecter une application React à un backend FastAPI

Qu'est-ce que FastAPI ?

FastAPI est un framework Web Python conçu pour créer des API backend rapides et efficaces. Il gère à la fois les opérations synchrones et asynchrones et dispose d'un support intégré pour la validation des données, l'authentification et la documentation interactive de l'API alimentée par OpenAPI.

Pour en savoir plus sur FastAPI, consultez les ressources suivantes :

  1. Documents officiels
  2. Tutoriels FastAPI

Qu'est-ce que React ?

React est une bibliothèque d'interface utilisateur JavaScript open source basée sur des composants, utilisée pour créer des applications frontales.

Pour en savoir plus, consultez le guide de démarrage de la documentation officielle.

Configuration de FastAPI

Commencez par créer un nouveau dossier pour contenir votre projet appelé "fastapi-react":

$ mkdir fastapi-react
$ cd fastapi-react

Dans le dossier "fastapi-react", créez un nouveau dossier pour héberger le backend :

$ mkdir backend
$ cd backend

Ensuite, créez et activez un environnement virtuel :

$ python3.10 -m venv venv
$ source venv/bin/activate
$ export PYTHONPATH=$PWD

N'hésitez pas à échanger venv et Pip contre Poetry ou Pipenv . Pour en savoir plus, consultez Environnements Python modernes .

Installez FastAPI :

(venv)$ pip install fastapi==0.78.0 uvicorn==0.17.6

Uvicorn est un serveur compatible ASGI (Asynchronous Server Gateway Interface) qui sera utilisé pour mettre en place l'API backend.

Ensuite, créez les fichiers et dossiers suivants dans le dossier "backend" :

└── backend
    ├── main.py
    └── app
        ├── __init__.py
        └── api.py

Dans le fichier main.py , définissez un point d'entrée pour exécuter l'application :

import uvicorn


if __name__ == "__main__":
    uvicorn.run("app.api:app", host="0.0.0.0", port=8000, reload=True)

Ici, nous avons demandé au fichier d'exécuter un serveur Uvicorn sur le port 8000 et de le recharger à chaque modification de fichier.

Avant de démarrer le serveur via le fichier de point d'entrée, créez une route de base dans backend/app/api.py :

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI()

origins = [
    "http://localhost:3000",
    "localhost:3000"
]


app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)


@app.get("/", tags=["root"])
async def read_root() -> dict:
    return {"message": "Welcome to your todo list."}

Pourquoi avons-nous besoin de CORSMiddleware ? Pour effectuer des requêtes cross-origin, c'est-à-dire des requêtes provenant d'un protocole, d'une adresse IP, d'un nom de domaine ou d'un port différents, vous devez activer le partage de ressources cross origin (CORS). Le module intégré de FastAPI CORSMiddlewaregère cela pour nous.

La configuration ci-dessus autorisera les requêtes cross-origin de notre domaine frontal et de notre port qui s'exécuteront à localhost:3000.

Pour en savoir plus sur la gestion de CORS dans FastAPI, consultez la documentation officielle .

Exécutez le fichier de point d'entrée depuis votre console :

(venv)$ python main.py

Accédez à http://localhost:8000 dans votre navigateur. Tu devrais voir:

{
  "message": "Welcome to your todo list."
}

Mise en place de React

Encore une fois, nous utiliserons l' outil CLI Create React App pour échafauder une nouvelle application React via npx .

Dans une nouvelle fenêtre de terminal, accédez au répertoire du projet, puis générez une nouvelle application React :

$ npx create-react-app@5.0.1 frontend
$ cd frontend

Si c'est la première fois que vous échafaudez une application React à l'aide de l'outil Créer une application React, consultez la documentation .

Pour simplifier les choses, supprimez tous les fichiers du dossier "src" sauf le fichier index.js . index.js est notre composant de base.

Ensuite, installez une bibliothèque de composants d'interface utilisateur appelée Chakra UI :

$ npm install @chakra-ui/react@2.0.2
$ npm install @emotion/react@11.9.0 @emotion/styled@11.8.1 emotion-theming@11.0.0

Après l'installation, créez un nouveau dossier appelé "components" dans le dossier "src", qui sera utilisé pour contenir les composants de l'application, ainsi que deux composants, Header.jsx et Todos.jsx :

$ cd src
$ mkdir components
$ cd components
$ touch {Header,Todos}.jsx

Nous allons commencer par le Headercomposant dans le fichier Header.jsx :

import React from "react";
import { Heading, Flex, Divider } from "@chakra-ui/react";

const Header = () => {
  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      padding="0.5rem"
      bg="gray.400"
    >
      <Flex align="center" mr={5}>
        <Heading as="h1" size="sm">Todos</Heading>
        <Divider />
      </Flex>
    </Flex>
  );
};

export default Header;

Après avoir importé React et les composants Heading , Flex et Divider de Chakra UI, nous avons défini un composant pour restituer un en-tête de base. Le composant est ensuite exporté pour être utilisé dans le composant de base.

Ensuite, réécrivons le composant de base dans index.js . Remplacez le code précédent par :

import React from "react";
import { render } from 'react-dom';
import { ChakraProvider } from "@chakra-ui/react";

import Header from "./components/Header";

function App() {
  return (
    <ChakraProvider>
      <Header />
    </ChakraProvider>
  )
}

const rootElement = document.getElementById("root")
render(<App />, rootElement)

ChakraProvider , importé de la bibliothèque Chakra UI, sert de composant parent pour les autres composants utilisant Chakra UI. Il fournit un thème à tous les composants enfants ( Headerdans ce cas) via l' API Context de React .

Démarrez votre application React depuis le terminal :

$ npm run start

Cela ouvrira l'application React dans votre navigateur par défaut à l' adresse http://localhost:3000 . Tu devrais voir:

Toutes les applications

Que construisons-nous ?

Pour le reste de ce didacticiel, vous allez créer une application todo CRUD pour créer, lire, mettre à jour et supprimer des todos. À la fin, votre application ressemblera à ceci :

Terminer toutes les applications

OBTENIR un itinéraire

Backend

Commencez par ajouter une liste de tâches à backend/app/api.py :

todos = [
    {
        "id": "1",
        "item": "Read a book."
    },
    {
        "id": "2",
        "item": "Cycle around town."
    }
]

La liste ci-dessus n'est que des données factices utilisées pour ce didacticiel. Les données représentent simplement la structure des tâches individuelles. N'hésitez pas à créer une base de données et à y stocker les tâches.

Ensuite, ajoutez le gestionnaire de route :

@app.get("/todo", tags=["todos"])
async def get_todos() -> dict:
    return { "data": todos }

Testez manuellement la nouvelle route sur http://localhost:8000/todo . Consultez également la documentation interactive sur http://localhost:8000/docs :

Documents d'application

L'extrémité avant

Dans le composant Todos.jsx , commencez par importer React, les crochets useState()et useEffect()et certains composants de l'interface utilisateur Chakra :

import React, { useEffect, useState } from "react";
import {
    Box,
    Button,
    Flex,
    Input,
    InputGroup,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    Stack,
    Text,
    useDisclosure
} from "@chakra-ui/react";

Le useStatecrochet est responsable de la gestion de l'état local de notre application tandis que le useEffectcrochet nous permet d'effectuer des opérations telles que la récupération de données.

For more on React Hooks, review the Primer on React Hooks tutorial and Introducing Hooks from the official docs.

Next, create a context for managing global state activities across all components:

const TodosContext = React.createContext({
  todos: [], fetchTodos: () => {}
})

In the code block above, we defined a context object via createContext that takes in two provider values: todos and fetchTodos. The fetchTodos function will be defined in the next code block.

Want to learn more about managing state with the React Context API? Check out the React Context API: Managing State with Ease article.

Next, add the Todos component:

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
}

Ici, nous avons créé un tableau de variables d'état vide todos, et une méthode d'état setTodos, afin que nous puissions mettre à jour la variable d'état. Ensuite, nous avons défini une fonction appelée fetchTodospour récupérer les tâches du backend de manière asynchrone et mettre à jour la todovariable d'état à la fin de la fonction.

Ensuite, dans le Todoscomposant, récupérez les tâches à l'aide de la fetchTodosfonction et restituez les données en parcourant la variable d'état todos :

useEffect(() => {
  fetchTodos()
}, [])

return (
  <TodosContext.Provider value={{todos, fetchTodos}}>
    <Stack spacing={5}>
      {todos.map((todo) => (
        <b>{todo.item}</b>
      ))}
    </Stack>
  </TodosContext.Provider>
)

Todos.jsx devrait maintenant ressembler à :

import React, { useEffect, useState } from "react";
import {
    Box,
    Button,
    Flex,
    Input,
    InputGroup,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    Stack,
    Text,
    useDisclosure
} from "@chakra-ui/react";

const TodosContext = React.createContext({
  todos: [], fetchTodos: () => {}
})

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
  useEffect(() => {
    fetchTodos()
  }, [])
  return (
    <TodosContext.Provider value={{todos, fetchTodos}}>
      <Stack spacing={5}>
        {todos.map((todo) => (
          <b>{todo.item}</b>
        ))}
      </Stack>
    </TodosContext.Provider>
  )
}

Importez le Todoscomposant dans le fichier index.js et affichez-le :

import React from "react";
import { render } from 'react-dom';
import { ChakraProvider } from "@chakra-ui/react";

import Header from "./components/Header";
import Todos from "./components/Todos";  // new

function App() {
  return (
    <ChakraProvider>
      <Header />
      <Todos />  {/* new */}
    </ChakraProvider>
  )
}

const rootElement = document.getElementById("root")
render(<App />, rootElement)

Votre application sur http://localhost:3000 devrait maintenant ressembler à ceci :

Toutes les applications

Try adding a new todo to the todos list in backend/app/api.py. Refresh the browser. You should see the new todo. With that, we're done wth the GET request for retrieving all todos.

POST Route

Backend

Start by adding a new route handler to handle POST requests for adding a new todo to backend/app/api.py:

@app.post("/todo", tags=["todos"])
async def add_todo(todo: dict) -> dict:
    todos.append(todo)
    return {
        "data": { "Todo added." }
    }

With the backend running, you can test the POST route in a new terminal tab using curl:

$ curl -X POST http://localhost:8000/todo -d \
    '{"id": "3", "item": "Buy some testdriven courses."}' \
    -H 'Content-Type: application/json'

You should see:

{
    "data: [
        "Todo added."
    ]"
}

You should also see the new todo in the response from the http://localhost:8000/todo endpoint as well as at http://localhost:3000.

As an exercise, implement a check to prevent adding duplicate todo items.

Frontend

Start by adding the shell for adding a new todo to frontend/src/components/Todos.jsx:

function AddTodo() {
  const [item, setItem] = React.useState("")
  const {todos, fetchTodos} = React.useContext(TodosContext)
}

Here, we created a new state variable that will hold the value from the form. We also retrieved the context values, todos and fetchTodos.

Next, add the functions for obtaining the input from the form and handling the form submission to AddTodo:

const handleInput = event  => {
  setItem(event.target.value)
}

const handleSubmit = (event) => {
  const newTodo = {
    "id": todos.length + 1,
    "item": item
  }

  fetch("http://localhost:8000/todo", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newTodo)
  }).then(fetchTodos)
}

In the handleSubmit function, we added a POST request and sent data to the server with the todo info. We then called fetchTodos to update todos.

Just after the handleSubmit function, return the form to be rendered:

return (
  <form onSubmit={handleSubmit}>
    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type="text"
        placeholder="Add a todo item"
        aria-label="Add a todo item"
        onChange={handleInput}
      />
    </InputGroup>
  </form>
)

In the code block above, we set the form onSubmit event listener to the handleSubmit function that we created earlier. The todo item value is also updated as the input value changes via the onChange listener.

The full AddTodo component should now look like:

function AddTodo() {
  const [item, setItem] = React.useState("")
  const {todos, fetchTodos} = React.useContext(TodosContext)

  const handleInput = event  => {
    setItem(event.target.value)
  }

  const handleSubmit = (event) => {
    const newTodo = {
      "id": todos.length + 1,
      "item": item
    }

    fetch("http://localhost:8000/todo", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newTodo)
    }).then(fetchTodos)
  }

  return (
    <form onSubmit={handleSubmit}>
      <InputGroup size="md">
        <Input
          pr="4.5rem"
          type="text"
          placeholder="Add a todo item"
          aria-label="Add a todo item"
          onChange={handleInput}
        />
      </InputGroup>
    </form>
  )
}

Next, add the AddTodo component to the Todos component like so:

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
  useEffect(() => {
    fetchTodos()
  }, [])
  return (
    <TodosContext.Provider value={{todos, fetchTodos}}>
      <AddTodo />  {/* new */}
      <Stack spacing={5}>
        {todos.map((todo) => (
          <b>{todo.item}</b>
        ))}
      </Stack>
    </TodosContext.Provider>
  )
}

The frontend application should look like this:

Toutes les applications

Test the form by adding a todo:

ajouter une nouvelle tâche

PUT Route

Backend

Add an update route:

@app.put("/todo/{id}", tags=["todos"])
async def update_todo(id: int, body: dict) -> dict:
    for todo in todos:
        if int(todo["id"]) == id:
            todo["item"] = body["item"]
            return {
                "data": f"Todo with id {id} has been updated."
            }

    return {
        "data": f"Todo with id {id} not found."
    }

So, we checked for the todo with an ID matching the one supplied and then, if found, updated the todo's item with the value from the request body.

Frontend

Start by defining the component UpdateTodo in frontend/src/components/Todos.jsx and passing two prop values, item and id to it:

function UpdateTodo({item, id}) {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const [todo, setTodo] = useState(item)
  const {fetchTodos} = React.useContext(TodosContext)
}

The state variables above are for the modal, which we will create shortly, and to hold the todo value to be updated. The fetchTodos context value is also imported for updating todos after the changes have been made.

Now, let's write the function responsible for sending PUT requests. In the UpdateTodo component body, just after the state and context variables, add the following:

const updateTodo = async () => {
  await fetch(`http://localhost:8000/todo/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ item: todo })
  })
  onClose()
  await fetchTodos()
}

In the asynchronous function above, a PUT request is sent to the backend and then the onClose() method is called to close the modal. fetchTodos() is then invoked.

Next, render the modal:

return (
  <>
    <Button h="1.5rem" size="sm" onClick={onOpen}>Update Todo</Button>
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay/>
      <ModalContent>
        <ModalHeader>Update Todo</ModalHeader>
        <ModalCloseButton/>
        <ModalBody>
          <InputGroup size="md">
            <Input
              pr="4.5rem"
              type="text"
              placeholder="Add a todo item"
              aria-label="Add a todo item"
              value={todo}
              onChange={event => setTodo(event.target.value)}
            />
          </InputGroup>
        </ModalBody>

        <ModalFooter>
          <Button h="1.5rem" size="sm" onClick={updateTodo}>Update Todo</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </>
)

In the above code, we created a modal using Chakra UI's Modal components. In the modal body, we listened for changes to the textbox and updated the state object, todo. Lastly, when the button "Update Todo" is clicked, the function updateTodo() is invoked and our todo is updated.

The full component should now look like:

function UpdateTodo({item, id}) {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const [todo, setTodo] = useState(item)
  const {fetchTodos} = React.useContext(TodosContext)

  const updateTodo = async () => {
    await fetch(`http://localhost:8000/todo/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ item: todo })
    })
    onClose()
    await fetchTodos()
  }

  return (
    <>
      <Button h="1.5rem" size="sm" onClick={onOpen}>Update Todo</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay/>
        <ModalContent>
          <ModalHeader>Update Todo</ModalHeader>
          <ModalCloseButton/>
          <ModalBody>
            <InputGroup size="md">
              <Input
                pr="4.5rem"
                type="text"
                placeholder="Add a todo item"
                aria-label="Add a todo item"
                value={todo}
                onChange={e => setTodo(e.target.value)}
              />
            </InputGroup>
          </ModalBody>

          <ModalFooter>
            <Button h="1.5rem" size="sm" onClick={updateTodo}>Update Todo</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

Avant d'ajouter le composant au Todoscomposant, ajoutons un composant d'assistance pour le rendu des tâches afin de nettoyer un peu les choses :

function TodoHelper({item, id, fetchTodos}) {
  return (
    <Box p={1} shadow="sm">
      <Flex justify="space-between">
        <Text mt={4} as="div">
          {item}
          <Flex align="end">
            <UpdateTodo item={item} id={id} fetchTodos={fetchTodos}/>
          </Flex>
        </Text>
      </Flex>
    </Box>
  )
}

Dans le composant ci-dessus, nous avons rendu la tâche transmise au composant et y avons attaché un bouton de mise à jour.

Remplacez le code dans le returnbloc du Todoscomposant :

return (
  <TodosContext.Provider value={{todos, fetchTodos}}>
    <AddTodo />
    <Stack spacing={5}>
      {
        todos.map((todo) => (
          <TodoHelper item={todo.item} id={todo.id} fetchTodos={fetchTodos} />
        ))
      }
    </Stack>
  </TodosContext.Provider>
)

Le navigateur devrait avoir une apparence rafraîchie :

Toutes les applications

Vérifiez que cela fonctionne :

Tout mettre à jour

SUPPRIMER l'itinéraire

Backend

Enfin, ajoutez la route de suppression :

@app.delete("/todo/{id}", tags=["todos"])
async def delete_todo(id: int) -> dict:
    for todo in todos:
        if int(todo["id"]) == id:
            todos.remove(todo)
            return {
                "data": f"Todo with id {id} has been removed."
            }

    return {
        "data": f"Todo with id {id} not found."
    }

L'extrémité avant

Écrivons un composant pour supprimer une tâche, qui sera utilisé dans le TodoHelpercomposant :

function DeleteTodo({id}) {
  const {fetchTodos} = React.useContext(TodosContext)

  const deleteTodo = async () => {
    await fetch(`http://localhost:8000/todo/${id}`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: { "id": id }
    })
    await fetchTodos()
  }

  return (
    <Button h="1.5rem" size="sm" onClick={deleteTodo}>Delete Todo</Button>
  )
}

Ici, nous avons commencé par invoquer la fetchTodosfonction à partir de l'objet d'état global. Ensuite, nous avons créé une fonction asynchrone qui envoie une requête DELETE au serveur, puis met à jour la liste des tâches en appelant à nouveau fetchTodos. Enfin, nous avons rendu un bouton qui, lorsqu'il est cliqué, déclenche deleteTodo().

Ensuite, ajoutez le DeleteTodocomposant au TodoHelper:

function TodoHelper({item, id, fetchTodos}) {
  return (
    <Box p={1} shadow="sm">
      <Flex justify="space-between">
        <Text mt={4} as="div">
          {item}
          <Flex align="end">
            <UpdateTodo item={item} id={id} fetchTodos={fetchTodos}/>
            <DeleteTodo id={id} fetchTodos={fetchTodos}/>  {/* new */}
          </Flex>
        </Text>
      </Flex>
    </Box>
  )
}

L'application client doit être mise à jour automatiquement :

Toutes les applications

Maintenant, testez le bouton de suppression :

Enlever tout

Conclusion

Ce tutoriel a couvert les bases de la configuration d'une application CRUD avec FastAPI et React.

Vérifiez votre compréhension en passant en revue les objectifs depuis le début de ce didacticiel. Vous pouvez trouver le code source dans le référentiel fastapi-react . Merci d'avoir lu.

Source :  https://testdrive.io

#api #fastapi #react 

What is GEEK

Buddha Community

Comment Créer Une Application CRUD Avec FastAPI Et React
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Comment Créer Une Application CRUD Avec FastAPI Et React

Dans ce didacticiel, vous allez créer une application CRUD avec FastAPI et React . Nous commencerons par échafauder une nouvelle application React avec la CLI Create React App avant de créer l'API RESTful backend avec FastAPI. Enfin, nous développerons les routes CRUD backend avec les composants frontaux React.

Application finale :

Terminer toutes les applications

Dépendances :

  • Réagir v18.1.0
  • Créer une application React v5.0.1
  • Noeud v18.2.0
  • npm v8.9.0
  • npx v8.9.0
  • FastAPI v0.78.0
  • Python v3.10

Avant de commencer ce didacticiel, vous devez vous familiariser avec le fonctionnement de React. Pour un rappel rapide sur React, consultez le guide des concepts principaux ou le didacticiel d'introduction à React .

Objectifs

À la fin de ce didacticiel, vous serez en mesure de :

  1. Développer une API RESTful avec Python et FastAPI
  2. Échafaudez un projet React avec Create React App
  3. Gérer les opérations d'état avec l'API React Context et les crochets
  4. Créer et afficher des composants React dans le navigateur
  5. Connecter une application React à un backend FastAPI

Qu'est-ce que FastAPI ?

FastAPI est un framework Web Python conçu pour créer des API backend rapides et efficaces. Il gère à la fois les opérations synchrones et asynchrones et dispose d'un support intégré pour la validation des données, l'authentification et la documentation interactive de l'API alimentée par OpenAPI.

Pour en savoir plus sur FastAPI, consultez les ressources suivantes :

  1. Documents officiels
  2. Tutoriels FastAPI

Qu'est-ce que React ?

React est une bibliothèque d'interface utilisateur JavaScript open source basée sur des composants, utilisée pour créer des applications frontales.

Pour en savoir plus, consultez le guide de démarrage de la documentation officielle.

Configuration de FastAPI

Commencez par créer un nouveau dossier pour contenir votre projet appelé "fastapi-react":

$ mkdir fastapi-react
$ cd fastapi-react

Dans le dossier "fastapi-react", créez un nouveau dossier pour héberger le backend :

$ mkdir backend
$ cd backend

Ensuite, créez et activez un environnement virtuel :

$ python3.10 -m venv venv
$ source venv/bin/activate
$ export PYTHONPATH=$PWD

N'hésitez pas à échanger venv et Pip contre Poetry ou Pipenv . Pour en savoir plus, consultez Environnements Python modernes .

Installez FastAPI :

(venv)$ pip install fastapi==0.78.0 uvicorn==0.17.6

Uvicorn est un serveur compatible ASGI (Asynchronous Server Gateway Interface) qui sera utilisé pour mettre en place l'API backend.

Ensuite, créez les fichiers et dossiers suivants dans le dossier "backend" :

└── backend
    ├── main.py
    └── app
        ├── __init__.py
        └── api.py

Dans le fichier main.py , définissez un point d'entrée pour exécuter l'application :

import uvicorn


if __name__ == "__main__":
    uvicorn.run("app.api:app", host="0.0.0.0", port=8000, reload=True)

Ici, nous avons demandé au fichier d'exécuter un serveur Uvicorn sur le port 8000 et de le recharger à chaque modification de fichier.

Avant de démarrer le serveur via le fichier de point d'entrée, créez une route de base dans backend/app/api.py :

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI()

origins = [
    "http://localhost:3000",
    "localhost:3000"
]


app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)


@app.get("/", tags=["root"])
async def read_root() -> dict:
    return {"message": "Welcome to your todo list."}

Pourquoi avons-nous besoin de CORSMiddleware ? Pour effectuer des requêtes cross-origin, c'est-à-dire des requêtes provenant d'un protocole, d'une adresse IP, d'un nom de domaine ou d'un port différents, vous devez activer le partage de ressources cross origin (CORS). Le module intégré de FastAPI CORSMiddlewaregère cela pour nous.

La configuration ci-dessus autorisera les requêtes cross-origin de notre domaine frontal et de notre port qui s'exécuteront à localhost:3000.

Pour en savoir plus sur la gestion de CORS dans FastAPI, consultez la documentation officielle .

Exécutez le fichier de point d'entrée depuis votre console :

(venv)$ python main.py

Accédez à http://localhost:8000 dans votre navigateur. Tu devrais voir:

{
  "message": "Welcome to your todo list."
}

Mise en place de React

Encore une fois, nous utiliserons l' outil CLI Create React App pour échafauder une nouvelle application React via npx .

Dans une nouvelle fenêtre de terminal, accédez au répertoire du projet, puis générez une nouvelle application React :

$ npx create-react-app@5.0.1 frontend
$ cd frontend

Si c'est la première fois que vous échafaudez une application React à l'aide de l'outil Créer une application React, consultez la documentation .

Pour simplifier les choses, supprimez tous les fichiers du dossier "src" sauf le fichier index.js . index.js est notre composant de base.

Ensuite, installez une bibliothèque de composants d'interface utilisateur appelée Chakra UI :

$ npm install @chakra-ui/react@2.0.2
$ npm install @emotion/react@11.9.0 @emotion/styled@11.8.1 emotion-theming@11.0.0

Après l'installation, créez un nouveau dossier appelé "components" dans le dossier "src", qui sera utilisé pour contenir les composants de l'application, ainsi que deux composants, Header.jsx et Todos.jsx :

$ cd src
$ mkdir components
$ cd components
$ touch {Header,Todos}.jsx

Nous allons commencer par le Headercomposant dans le fichier Header.jsx :

import React from "react";
import { Heading, Flex, Divider } from "@chakra-ui/react";

const Header = () => {
  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      padding="0.5rem"
      bg="gray.400"
    >
      <Flex align="center" mr={5}>
        <Heading as="h1" size="sm">Todos</Heading>
        <Divider />
      </Flex>
    </Flex>
  );
};

export default Header;

Après avoir importé React et les composants Heading , Flex et Divider de Chakra UI, nous avons défini un composant pour restituer un en-tête de base. Le composant est ensuite exporté pour être utilisé dans le composant de base.

Ensuite, réécrivons le composant de base dans index.js . Remplacez le code précédent par :

import React from "react";
import { render } from 'react-dom';
import { ChakraProvider } from "@chakra-ui/react";

import Header from "./components/Header";

function App() {
  return (
    <ChakraProvider>
      <Header />
    </ChakraProvider>
  )
}

const rootElement = document.getElementById("root")
render(<App />, rootElement)

ChakraProvider , importé de la bibliothèque Chakra UI, sert de composant parent pour les autres composants utilisant Chakra UI. Il fournit un thème à tous les composants enfants ( Headerdans ce cas) via l' API Context de React .

Démarrez votre application React depuis le terminal :

$ npm run start

Cela ouvrira l'application React dans votre navigateur par défaut à l' adresse http://localhost:3000 . Tu devrais voir:

Toutes les applications

Que construisons-nous ?

Pour le reste de ce didacticiel, vous allez créer une application todo CRUD pour créer, lire, mettre à jour et supprimer des todos. À la fin, votre application ressemblera à ceci :

Terminer toutes les applications

OBTENIR un itinéraire

Backend

Commencez par ajouter une liste de tâches à backend/app/api.py :

todos = [
    {
        "id": "1",
        "item": "Read a book."
    },
    {
        "id": "2",
        "item": "Cycle around town."
    }
]

La liste ci-dessus n'est que des données factices utilisées pour ce didacticiel. Les données représentent simplement la structure des tâches individuelles. N'hésitez pas à créer une base de données et à y stocker les tâches.

Ensuite, ajoutez le gestionnaire de route :

@app.get("/todo", tags=["todos"])
async def get_todos() -> dict:
    return { "data": todos }

Testez manuellement la nouvelle route sur http://localhost:8000/todo . Consultez également la documentation interactive sur http://localhost:8000/docs :

Documents d'application

L'extrémité avant

Dans le composant Todos.jsx , commencez par importer React, les crochets useState()et useEffect()et certains composants de l'interface utilisateur Chakra :

import React, { useEffect, useState } from "react";
import {
    Box,
    Button,
    Flex,
    Input,
    InputGroup,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    Stack,
    Text,
    useDisclosure
} from "@chakra-ui/react";

Le useStatecrochet est responsable de la gestion de l'état local de notre application tandis que le useEffectcrochet nous permet d'effectuer des opérations telles que la récupération de données.

For more on React Hooks, review the Primer on React Hooks tutorial and Introducing Hooks from the official docs.

Next, create a context for managing global state activities across all components:

const TodosContext = React.createContext({
  todos: [], fetchTodos: () => {}
})

In the code block above, we defined a context object via createContext that takes in two provider values: todos and fetchTodos. The fetchTodos function will be defined in the next code block.

Want to learn more about managing state with the React Context API? Check out the React Context API: Managing State with Ease article.

Next, add the Todos component:

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
}

Ici, nous avons créé un tableau de variables d'état vide todos, et une méthode d'état setTodos, afin que nous puissions mettre à jour la variable d'état. Ensuite, nous avons défini une fonction appelée fetchTodospour récupérer les tâches du backend de manière asynchrone et mettre à jour la todovariable d'état à la fin de la fonction.

Ensuite, dans le Todoscomposant, récupérez les tâches à l'aide de la fetchTodosfonction et restituez les données en parcourant la variable d'état todos :

useEffect(() => {
  fetchTodos()
}, [])

return (
  <TodosContext.Provider value={{todos, fetchTodos}}>
    <Stack spacing={5}>
      {todos.map((todo) => (
        <b>{todo.item}</b>
      ))}
    </Stack>
  </TodosContext.Provider>
)

Todos.jsx devrait maintenant ressembler à :

import React, { useEffect, useState } from "react";
import {
    Box,
    Button,
    Flex,
    Input,
    InputGroup,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    Stack,
    Text,
    useDisclosure
} from "@chakra-ui/react";

const TodosContext = React.createContext({
  todos: [], fetchTodos: () => {}
})

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
  useEffect(() => {
    fetchTodos()
  }, [])
  return (
    <TodosContext.Provider value={{todos, fetchTodos}}>
      <Stack spacing={5}>
        {todos.map((todo) => (
          <b>{todo.item}</b>
        ))}
      </Stack>
    </TodosContext.Provider>
  )
}

Importez le Todoscomposant dans le fichier index.js et affichez-le :

import React from "react";
import { render } from 'react-dom';
import { ChakraProvider } from "@chakra-ui/react";

import Header from "./components/Header";
import Todos from "./components/Todos";  // new

function App() {
  return (
    <ChakraProvider>
      <Header />
      <Todos />  {/* new */}
    </ChakraProvider>
  )
}

const rootElement = document.getElementById("root")
render(<App />, rootElement)

Votre application sur http://localhost:3000 devrait maintenant ressembler à ceci :

Toutes les applications

Try adding a new todo to the todos list in backend/app/api.py. Refresh the browser. You should see the new todo. With that, we're done wth the GET request for retrieving all todos.

POST Route

Backend

Start by adding a new route handler to handle POST requests for adding a new todo to backend/app/api.py:

@app.post("/todo", tags=["todos"])
async def add_todo(todo: dict) -> dict:
    todos.append(todo)
    return {
        "data": { "Todo added." }
    }

With the backend running, you can test the POST route in a new terminal tab using curl:

$ curl -X POST http://localhost:8000/todo -d \
    '{"id": "3", "item": "Buy some testdriven courses."}' \
    -H 'Content-Type: application/json'

You should see:

{
    "data: [
        "Todo added."
    ]"
}

You should also see the new todo in the response from the http://localhost:8000/todo endpoint as well as at http://localhost:3000.

As an exercise, implement a check to prevent adding duplicate todo items.

Frontend

Start by adding the shell for adding a new todo to frontend/src/components/Todos.jsx:

function AddTodo() {
  const [item, setItem] = React.useState("")
  const {todos, fetchTodos} = React.useContext(TodosContext)
}

Here, we created a new state variable that will hold the value from the form. We also retrieved the context values, todos and fetchTodos.

Next, add the functions for obtaining the input from the form and handling the form submission to AddTodo:

const handleInput = event  => {
  setItem(event.target.value)
}

const handleSubmit = (event) => {
  const newTodo = {
    "id": todos.length + 1,
    "item": item
  }

  fetch("http://localhost:8000/todo", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newTodo)
  }).then(fetchTodos)
}

In the handleSubmit function, we added a POST request and sent data to the server with the todo info. We then called fetchTodos to update todos.

Just after the handleSubmit function, return the form to be rendered:

return (
  <form onSubmit={handleSubmit}>
    <InputGroup size="md">
      <Input
        pr="4.5rem"
        type="text"
        placeholder="Add a todo item"
        aria-label="Add a todo item"
        onChange={handleInput}
      />
    </InputGroup>
  </form>
)

In the code block above, we set the form onSubmit event listener to the handleSubmit function that we created earlier. The todo item value is also updated as the input value changes via the onChange listener.

The full AddTodo component should now look like:

function AddTodo() {
  const [item, setItem] = React.useState("")
  const {todos, fetchTodos} = React.useContext(TodosContext)

  const handleInput = event  => {
    setItem(event.target.value)
  }

  const handleSubmit = (event) => {
    const newTodo = {
      "id": todos.length + 1,
      "item": item
    }

    fetch("http://localhost:8000/todo", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newTodo)
    }).then(fetchTodos)
  }

  return (
    <form onSubmit={handleSubmit}>
      <InputGroup size="md">
        <Input
          pr="4.5rem"
          type="text"
          placeholder="Add a todo item"
          aria-label="Add a todo item"
          onChange={handleInput}
        />
      </InputGroup>
    </form>
  )
}

Next, add the AddTodo component to the Todos component like so:

export default function Todos() {
  const [todos, setTodos] = useState([])
  const fetchTodos = async () => {
    const response = await fetch("http://localhost:8000/todo")
    const todos = await response.json()
    setTodos(todos.data)
  }
  useEffect(() => {
    fetchTodos()
  }, [])
  return (
    <TodosContext.Provider value={{todos, fetchTodos}}>
      <AddTodo />  {/* new */}
      <Stack spacing={5}>
        {todos.map((todo) => (
          <b>{todo.item}</b>
        ))}
      </Stack>
    </TodosContext.Provider>
  )
}

The frontend application should look like this:

Toutes les applications

Test the form by adding a todo:

ajouter une nouvelle tâche

PUT Route

Backend

Add an update route:

@app.put("/todo/{id}", tags=["todos"])
async def update_todo(id: int, body: dict) -> dict:
    for todo in todos:
        if int(todo["id"]) == id:
            todo["item"] = body["item"]
            return {
                "data": f"Todo with id {id} has been updated."
            }

    return {
        "data": f"Todo with id {id} not found."
    }

So, we checked for the todo with an ID matching the one supplied and then, if found, updated the todo's item with the value from the request body.

Frontend

Start by defining the component UpdateTodo in frontend/src/components/Todos.jsx and passing two prop values, item and id to it:

function UpdateTodo({item, id}) {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const [todo, setTodo] = useState(item)
  const {fetchTodos} = React.useContext(TodosContext)
}

The state variables above are for the modal, which we will create shortly, and to hold the todo value to be updated. The fetchTodos context value is also imported for updating todos after the changes have been made.

Now, let's write the function responsible for sending PUT requests. In the UpdateTodo component body, just after the state and context variables, add the following:

const updateTodo = async () => {
  await fetch(`http://localhost:8000/todo/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ item: todo })
  })
  onClose()
  await fetchTodos()
}

In the asynchronous function above, a PUT request is sent to the backend and then the onClose() method is called to close the modal. fetchTodos() is then invoked.

Next, render the modal:

return (
  <>
    <Button h="1.5rem" size="sm" onClick={onOpen}>Update Todo</Button>
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay/>
      <ModalContent>
        <ModalHeader>Update Todo</ModalHeader>
        <ModalCloseButton/>
        <ModalBody>
          <InputGroup size="md">
            <Input
              pr="4.5rem"
              type="text"
              placeholder="Add a todo item"
              aria-label="Add a todo item"
              value={todo}
              onChange={event => setTodo(event.target.value)}
            />
          </InputGroup>
        </ModalBody>

        <ModalFooter>
          <Button h="1.5rem" size="sm" onClick={updateTodo}>Update Todo</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </>
)

In the above code, we created a modal using Chakra UI's Modal components. In the modal body, we listened for changes to the textbox and updated the state object, todo. Lastly, when the button "Update Todo" is clicked, the function updateTodo() is invoked and our todo is updated.

The full component should now look like:

function UpdateTodo({item, id}) {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const [todo, setTodo] = useState(item)
  const {fetchTodos} = React.useContext(TodosContext)

  const updateTodo = async () => {
    await fetch(`http://localhost:8000/todo/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ item: todo })
    })
    onClose()
    await fetchTodos()
  }

  return (
    <>
      <Button h="1.5rem" size="sm" onClick={onOpen}>Update Todo</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay/>
        <ModalContent>
          <ModalHeader>Update Todo</ModalHeader>
          <ModalCloseButton/>
          <ModalBody>
            <InputGroup size="md">
              <Input
                pr="4.5rem"
                type="text"
                placeholder="Add a todo item"
                aria-label="Add a todo item"
                value={todo}
                onChange={e => setTodo(e.target.value)}
              />
            </InputGroup>
          </ModalBody>

          <ModalFooter>
            <Button h="1.5rem" size="sm" onClick={updateTodo}>Update Todo</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

Avant d'ajouter le composant au Todoscomposant, ajoutons un composant d'assistance pour le rendu des tâches afin de nettoyer un peu les choses :

function TodoHelper({item, id, fetchTodos}) {
  return (
    <Box p={1} shadow="sm">
      <Flex justify="space-between">
        <Text mt={4} as="div">
          {item}
          <Flex align="end">
            <UpdateTodo item={item} id={id} fetchTodos={fetchTodos}/>
          </Flex>
        </Text>
      </Flex>
    </Box>
  )
}

Dans le composant ci-dessus, nous avons rendu la tâche transmise au composant et y avons attaché un bouton de mise à jour.

Remplacez le code dans le returnbloc du Todoscomposant :

return (
  <TodosContext.Provider value={{todos, fetchTodos}}>
    <AddTodo />
    <Stack spacing={5}>
      {
        todos.map((todo) => (
          <TodoHelper item={todo.item} id={todo.id} fetchTodos={fetchTodos} />
        ))
      }
    </Stack>
  </TodosContext.Provider>
)

Le navigateur devrait avoir une apparence rafraîchie :

Toutes les applications

Vérifiez que cela fonctionne :

Tout mettre à jour

SUPPRIMER l'itinéraire

Backend

Enfin, ajoutez la route de suppression :

@app.delete("/todo/{id}", tags=["todos"])
async def delete_todo(id: int) -> dict:
    for todo in todos:
        if int(todo["id"]) == id:
            todos.remove(todo)
            return {
                "data": f"Todo with id {id} has been removed."
            }

    return {
        "data": f"Todo with id {id} not found."
    }

L'extrémité avant

Écrivons un composant pour supprimer une tâche, qui sera utilisé dans le TodoHelpercomposant :

function DeleteTodo({id}) {
  const {fetchTodos} = React.useContext(TodosContext)

  const deleteTodo = async () => {
    await fetch(`http://localhost:8000/todo/${id}`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: { "id": id }
    })
    await fetchTodos()
  }

  return (
    <Button h="1.5rem" size="sm" onClick={deleteTodo}>Delete Todo</Button>
  )
}

Ici, nous avons commencé par invoquer la fetchTodosfonction à partir de l'objet d'état global. Ensuite, nous avons créé une fonction asynchrone qui envoie une requête DELETE au serveur, puis met à jour la liste des tâches en appelant à nouveau fetchTodos. Enfin, nous avons rendu un bouton qui, lorsqu'il est cliqué, déclenche deleteTodo().

Ensuite, ajoutez le DeleteTodocomposant au TodoHelper:

function TodoHelper({item, id, fetchTodos}) {
  return (
    <Box p={1} shadow="sm">
      <Flex justify="space-between">
        <Text mt={4} as="div">
          {item}
          <Flex align="end">
            <UpdateTodo item={item} id={id} fetchTodos={fetchTodos}/>
            <DeleteTodo id={id} fetchTodos={fetchTodos}/>  {/* new */}
          </Flex>
        </Text>
      </Flex>
    </Box>
  )
}

L'application client doit être mise à jour automatiquement :

Toutes les applications

Maintenant, testez le bouton de suppression :

Enlever tout

Conclusion

Ce tutoriel a couvert les bases de la configuration d'une application CRUD avec FastAPI et React.

Vérifiez votre compréhension en passant en revue les objectifs depuis le début de ce didacticiel. Vous pouvez trouver le code source dans le référentiel fastapi-react . Merci d'avoir lu.

Source :  https://testdrive.io

#api #fastapi #react 

Asha  Beahan

Asha Beahan

1636485900

Comment Créer Un CRUD Avec React Et Firebase étape Par étape

Comment Créer Un CRUD Avec React Et Firebase étape Par étape

░ Projet démarrage → https://github.com/JustFS/react-crud-start\

#react-native #firebase #crud #react 

Mathew Rini

1615544450

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

  • React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
  • React.js and React Native have similar syntax and workflows, but their implementation is quite different.
  • React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
  • React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

  • United States- $120,000
  • Canada - $110,000
  • United Kingdom - $71,820
  • The Netherlands $49,095
  • Spain - $35,423.00
  • France - $44,284
  • Ukraine - $28,990
  • India - $9,843
  • Sweden - $55,173
  • Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

  • Conduct thorough candidate research, including portfolios and areas of expertise.
  • Before you sit down with your interviewing panel, do some homework.
  • Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

Franz  Becker

Franz Becker

1651604400

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate   

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

 

Hiring

Getting Started

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

 

React Starter Kit

React Static Boilerplate

ASP.NET Core Starter Kit

App typeIsomorphic (universal)Single-page applicationSingle-page application
Frontend
LanguageJavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)
LibrariesReact, History, Universal RouterReact, History, ReduxReact, History, Redux
RoutesImperative (functional)DeclarativeDeclarative, cross-stack
Backend
LanguageJavaScript (ES2015+, JSX)n/aC#, F#
LibrariesNode.js, Express, Sequelize,
GraphQL
n/aASP.NET Core, EF Core,
ASP.NET Identity
SSRYesn/an/a
Data APIGraphQLn/aWeb API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox  

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

  • GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
  • Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
  • Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react