More

    Create React App: A Complete guide for Beginners

     

    Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react apps and learning react. Create React App installs all the packages and modules required for building a react app and lets you use the newest Javascript features. In a more straightforward way, it configures all the prerequisites for you, all you need is Node.js 8.1 or higher and npm 5.6 or a higher version.

    Get Started quickly

    Initially, you will need to install the Create React App on your terminal, for this you’ll have to type

    npm install -g create-react-app

    Previously if you have installed Create React App, then it is recommended that you uninstall it using the below command

    – npm uninstall -g create-react-app.

    This will make sure that the latest version of npx is being used

    npx create-react-app my-app

    This command will create a react Project in the directory. ‘my-app’ is the name of the project or file. This creates a folder with your file name, where you can navigate and start creating the app.

    After creating the project use,

    cd my-app

    npm start

    These commands will initialize the project and will open the localhost in your browser. (http://localhost:3000/) In the beginning, the localhost is set to preview a default page that welcomes you to the React app.

    To start working on the project you, create a file that can build in the directory with the command,

    npm run build

    Zero configurations

    No specific configuration is necessary for creating a react app. It automatically installs the tools like webpack and Bable. Such that you need not go through a complicated process for installing them. Just create a project with the help of the above commands and, you are all set to create a react app

    Creating a react app

    To create an application, you can use nvm-windows or nvm (for Mac or Linux). With these, you can also switch between node versions in projects. There are several methods for creating the application; you may choose one according to your comfort:

    1) npm

    npm init react-app my-app

    This command will start the build procedure and download all the dependencies and base code.

    Note: the npm init is available from version npm 6+.

    2) npx

    npx create-react-app my-app

    npx commands are available from version 5.2+ to higher versions; for the older versions, there are different instructions to be followed.

    3) yarn

    yarn create react-app my-app

    This command’ yarn create’ is available in yarn 0.25+.

    Pick a template for your project

    In Create React App, you can use templates to start creating a stunning app instead of beginning from zero. You can append a template by the creation command line

    –template [template-name]

    Templates syntax is written in the format of cra-template-[template-name]. in that, only the template-name has to be provided by you.

    You can get a list of a wide majority of templates on npm, by searching for “cra-template-*”.

    This consists of templates for any kind of react applications. You can get the template-name from the website which you can use for your react application.

    These templates can provide a specific base structure for the application you are creating. Also, you can edit the templates according to your needs.

    When you do not select any template and start coding then Create React App provides you with a default template that is utilized for building the interface.

    However, choosing a template is much more convenient as it significantly reduces the coding length. With a predesigned template, you can design an app that could have taken several hours without it.

    Building a Typescript App.

    Create React is the quickest way to design a Typescript application. For building this application, you can use templates to make your job easy.

    npx create-react-app my-typescript-app –typescript

    This command tells the npm module to create a new Typescript application. Here, npx create-react-app is the name of the npm package, and my-typescript-app –typescript is the name of the file which is created in the project directory.

    This command will install all the required dependencies that will be used in the project.

    After this you need to rename the .js/ .jsx files to .ts/ .tsx and you are ready to code the app. You can change the names with this below command:

    mv src/index.js src/index.ts

    > Next, by “npm start” command, you can begin the development. Also, you can use templates to make this straightforward.

    npx create-react-app my-app –template typescript

    This command will append the template to your project. Writing ‘–template typescript‘ keyword in the creation command will do the job for you.

    If you already have built a project and you want to add typescript, this can be done by following a different approach.

    Package manager selection

    You can select npm or yarn as our package manager for a specific project. While creating a new project, CLI uses Yarn for installing the dependencies.

    But if you want to use the npm package manager, then you can change the manager by appending the command ‘–use-npm’ in the original creation command.

    For instance,

    npx create-react-app my-app –use-npm

    The output of the file creation. After creating the project file in the directory by using the above methods, a new folder called ‘my-app’ will show up.

    This folder will contain the initial structure of the app and all the transitive dependencies. The program structure will look like this:

    “my-app

    ├── README.md

    ├── node_modules

    ├── package.json

    ├── .gitignore

    ├── public

    │   ├── favicon.ico

    │   ├── index.html

    │   ├── logo192.png

    │   ├── logo512.png

    │   ├── manifest.json

    │   └── robots.txt

    └── src

    ├── App.css

    ├── App.js

    ├── App.test.js

    ├── index.css

    ├── index.js

    ├── logo.svg

    └── serviceWorker.js”

    The structure of the project consists of the main three folders

        • public,
        • src,
        • root folders.

    Public folder: Most of the data in the public folder is from the web browser. The browser you are using can access the folder for necessary information. It has the assets that are integrated into the react app with less hard work.

    Src folder: This folder consists of all the crucial components of the app. This is the place where the majority of the coding is done; components are created inside the src folder.

    Root folder: Root folders are mentioned at the top of the structure. They consist of the configuration files that are used while building the react application. ‘node_modules’ and ‘package.json’ are the root folders in this project. The majority of the configuration files are stored in the package.json folder.

    With the use of Create React App, complicated procedure and coding is avoided. The file thus created is also well arranged, and you can begin with the app after the installation is completed.

    With this command, you can open the project

    cd my-app

    Scripts

    Some built-in commands can be run in the created project. For executing any script in create react, you will have to follow a syntax:

    npm run script_name

    In the syntax npm run is the keyword and the further is followed by the name of the script. Some specific commands can also be executed without mentioning the ‘run’ part from the syntax.

    npm start

    (or)

    yarn start

    This command runs the app in the development mode and launches the localhost in the browser window with the URL “http://localhost:3000”. Also, this command initializes the webpack and Bable for the project.

    More significantly, this command compiles all the data of the code that includes error checking, compiling for Sass, and building a Javascript package for the coding part.

    This Javascript package is then loaded in the public/index.html file and then to the browser.

    The changes made in the code will be updated in the DOM, and the page will reload immediately.

    In the console you are using, you will be able to see the build errors and lint warnings.

    Npm test

    (or)

    yarn test

    This command runs the test watcher. Jest is the test watcher in Create react app that is launched in an interactive mode.

    When the code is executed, Jest only tests the files that have been changed since the last test run. This feature increased optimization and speed while testing.

    This command is one of the codes that does not require the run part for execution. You can disable this function and force Jest to run tests on every file by pressing “a” in the watch mode.

    npm run build

    (or)

    yarn build

    This is also a CLI command that runs the custom scripts created in the file package.json. The app in the build folder is utilized for building the app.

    It arranges the app for production mode and optimizes it for the best utility. The files mentioned in the build app are hashes, and your react app is now ready to be deployed on distribution platforms.

    Conclusion

    ‘Create react app’ is the most convenient way for building a React app with the most minimal experience with React. It has a very minimal setup procedure and coding. With the use of templates and design tools, a developer can get extensive flexibility for developing a React app. Also, it has various other features like hot reloading, component-based programming, code reusability. These functionalities make Create React app one of the simplest tools for building a react app.

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here