Close Menu

react

Welcome to the documentation for React.

Get Started

To get started with React, you will need to have Node.js installed on your computer. If you don’t have it yet, you can download it from the official Node.js website.

Once you have Node.js installed, you can create a new React project using npx create-react-app. Open your terminal and navigate to the directory where you want to create your project. Then, run the following command:

npx create-react-app <project-name>

This command will set up a new React project with the necessary files and dependencies. It may take a few minutes to complete. Once the command finishes, navigate into the newly created project directory:

cd <project-name>

You can now start the development server using the following command:

npm start

This command will start the server and open your React application in your default web browser.

Components

React is based on the concept of reusable components. Components are independent and reusable code blocks that can be combined to build larger and more complex interfaces.

To create a new component, you can use the function or class syntax. In both cases, the component will receive props as its input and should return the JSX that represents its output.

Here’s an example of a simple functional component:

import React, { useState } from 'react';

function WelcomeMessage({ name }) {
  return <p>Hello, { name }</p>;
}

export default WelcomeMessage;

To use this component, you can import it and render it inside another component:

import React from 'react';
import WelcomeMessage from './WelcomeMessage';

function App() {
  return <div>
    <WelcomeMessage name={'John'} />
  <div>;
}

export default App;

Components can also have state by using the useState hook. This allows you to manage and update values within a component.

Here’s an example of a component with state:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return <div>
    <p>Count: { count }</p>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  <div>;
}

export default Counter;

Components can also receive and handle user input through event handlers, such as onClick or onChange.

Now you have a basic understanding of creating components in React. You can start building more complex interfaces by combining and nesting components as needed.

State Management

Managing application state can become complex as your React application grows. To simplify this task, you can use state management libraries like Redux or MobX.

These libraries provide a centralized way of managing and updating application state, making it easier to track changes and manage data flow.

Here’s an example of using Redux for state management:

First, you need to install the necessary dependencies. Open your terminal and navigate to your project directory. Then, run the following command:

npm install redux react-redux

Next, you can create a Redux store to hold your application state:

import React, ReactDOM from 'react';
import Redux, { createStore, combineReducers } from 'redux';
import ReactRedux, { Provider, connect } from 'react-redux';

const initialState = {
  count: 0,
};

function countReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const rootReducer = combineReducers{
  counter: countReducer,
};

const store = createStore(rootReducer, initialState);

function App() {
  return <Provider store={store}>
    <CounterContainer />
  <Provider>;
}

const mapStateToProps = (state) => { count: state.count }