create-react-easy v1.0.2

Please use this library just for beginning of your project!!!

This is Heading

create-react-easy is a react cli for dealing with your templates. When you install this package, it will bring everything ready, such as react-router-dom, useContext and even useReducer. Just type and get everything ready.

Installation

Use the node package manager npm to install create-react-easy.

There are two ways. If you are planning to make your job easy while working with routes, just type this command:

npx create-react-easy app-name "route"

If you are going to make easy working with context use:

npx create-react-easy app-name "context"

if you do not put your app-name, it will automatically take the name of your current folder. or you can run:

npx create-react-easy ./ "context"

Usage of route

After installation, on the component everything is ready for you, just put your path and element and start your work.

    // Here everything is ready, just need to usage !!!
    // Just change path names and elements then just work on.

    function App() {
        return (
          <>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/login" element={<Login />} />
              <Route path="*" element={<Error />} />
            </Routes>
          </>
        );
}

Usage of context

There are two important files to use context, context.js and current file that you are working on, it can be Home or any other component. On the constext.js file everything is ready for you. Your job is just to create and export any value from context.

Example: context.js

    import React, { useContext } from 'react';

    const AppContext = React.createContext();


    export const AppProvider = ({ children }) => {

        // Text - 1
        const home = "Home"

        return <AppContext.Provider value={{

            // export all elements
            home

        }}>
            {children}
        </AppContext.Provider>
    }

    export const useGlobalContext = () => {
        return useContext(AppContext);
    }

In Above we created home value that is equal to "Home" and then exported it. And now, we have access to home from any file. In order to have access to need to also follow this instraction:

Example

    import React from 'react'

    // importing our useGlobalContext from context.js

    import { useGlobalContext } from '../context/context'

    const Home = () => {

        // Having access to home

        const { home } = useGlobalContext();

        return (

            // using the home value 

            <div>{home}</div>

        )
    }

export default Home

Contributing

Pull request are welcome. For major chnages, please open an issue first to discuss what you would like to change.

fazliddin_fayziev

https://github.com/FazliddinFayziev