React Native Cheatsheet

Bases & syntaxe

Composant Functionnal React Native

const App = () => {
  return <Text>Bonjour, React Native!</Text>;
};

Utilisez les composants fonctionnels pour créer des composants réutilisables et performants.

StyleSheet

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Créez des styles CSS avec React Native pour gérer l'apparence visuelle de votre application.

Structures de données

State & Props

class App extends Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  render() {
    return (
      <View>
        <Text>{this.state.count}</Text>
        <Button title="Increment" onPress={this.increment} />
      </View>
    );
  }
}

Utilisez state et props pour gérer l'état local et la communication entre les composants.

Hooks

const App = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};

Utilisez les hooks pour gérer l'état et d'autres fonctionnalités React dans des composants functionnels.

Fonctions & methodes essentielles

useEffect

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

Utilisez useEffect pour effectuer des opérations de side-effect, comme les appels API.

useCallback & useMemo

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Utilisez useCallback et useMemo pour optimiser les performances en évitant les recalculs et les re-rendus inutiles.

Patterns courants

Navigation

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Utilisez la navigation pour gérer les différents écrans de votre application.

Context

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value=user: 'John Doe'>
      <ChildComponent />
    </MyContext.Provider>
  );
}

Utilisez le context pour partager des données entre les composants sans avoir à passer des props de manière explicite.

Operations avancées

Asynchronous Code with Async/Await

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error(error);
  }
};

Utilisez async/await pour gérer les appels API de manière plus simple et lisible.

Animations

const [animationValue, setAnimationValue] = useState(new Animated.Value(0));

Animated.timing(animationValue, {
  toValue: 1,
  duration: 500,
}).start();

Utilisez les animations pour rendre votre application plus dynamique et engageante.

Debugging & outils

Redux DevTools

import { createStore } from 'redux';
import { Provider, useSelector } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(rootReducer, composeWithDevTools());

function App() {
  return (
    <Provider store={store}>
      {/* Application components */}
    </Provider>
  );
}

Utilisez Redux DevTools pour déboguer et visualiser l'état de votre application Redux.

Chrome DevTools

console.log('This is a debug message');

Utilisez Chrome DevTools pour déboguer le JavaScript de votre application React Native.