More

    React CLI (create-react-app)

    What is Create React App?

    Create React App is a new supported way to create a one-page React application. It offers a modern build set-up without any configuration.

    To install the global package, write the following command:

    npm install -g create-react-app

    Node.js 4.x or high

    Getting Started With The Server

    First, we’ll run the npm start to launch the development server. The browser pane will open on its own with the app’s URL that you’ve created:

    Create React App makes the use of Babel as well as webpack under the hood. The console output programming is to be minimal to help us to focus on the problems:

    The Lint warnings displayed in the console because ESLint is also integrated:

    Production Building

    To build an optimized bundle, we need to run npm run build:

    The assets also include content hashes for caching as well as it is lessened.

    Single Build Dependency:

    The package.json males up only of the single build dependency along with few other scripts:

    By updating the single dependency of Babel, Webpack and ESLint are also taken care of to a stable compatible version to get them all.

    Zero Configuration Files or Folder Structure:

    The tool will generate only the files that are there to build our apps. The build settings gets configured from before. Yet, some features are missing like that of testing. It is an intentional limitation so there is a possibility that it might not work for everybody:

    Zero Lock-in:

    The feature of “ejecting” gives you the ability to leave the Create React App setup anytime you want to. . As the days, Create React App is becoming more compelling and so giving the users very less of a reason to eject out of it. While it is still maintaining no configuration.

     

    React’s Backstory:

    React has been one of the oldest libraries. It has embraced the transpiring of Javascript.

    This phenomenon came to be as the JavaScript fatigue as termed by Eric Clemmons.

    But the hassle doesn’t mean that the tools are not useful. But the fact remains that it’s very frustrating to spend your days setting up all the tools. Now for a project when someone wanted to learn React, it is quite a work. To give users a good beginner’s experience React decided to work on a curated set of tools. It will work under a single command-line experience. And the answer to this endeavor was to React CLI. The React CLI was an experiment by React and time has made us known of its success.

    Create React App Pros and Cons

    In practice, we should refrain from building custom webpack configurations. Instead of that, we should try to use Create-react-app to build our applications.

    Some important features Extraordinary support for CSS modules. Many developers all around the world use SASS. We can prefix our vendor using auto prefixes and the CSS file in the bundle will be lessened. Supports the code splitting by making the use of dynamic. Static type checkers like Flow and TypeScript ease the drop-in support. Supports custom environment variables using .env files. There’s also opt-in support for PWAs It also provides support for testing by making the use of Jest.

    Pros:

    There’s no need to break ourselves into the configuration. Instead, we can focus on building the app.

    It provides a lot of common things out of the box saving our time and energy.

    Updating to a newer version is easy.

    Cons:

    Create React App provides for a very opinionated option for building a React app which is not favored by many.

    It is of no use if you have an existing application in progress where you might switch to React halfway through. So it is only helpful if you’re building an application from scratch on the React app.

    Implementation

    Creating an app:

    We are going to need a Node version greater than 8.10 on our local machine we want to develop on. We can use nvm for Mac operating system and Linux. Also nvm-windows for easy switching of the Node versions between different projects

    Selecting a template:

    We can now start a new app from a template by adding –template[template-name] to the command for creation. If we don’t select any template then the project gets created with React’s base template. We should know that templates are always named in the format cra-template[template-name]. But we need to provide the [template-name] to the command for creation.

    Creating a TypeScript app:

    We can create a TypeScript app by using the templates provided by React. So to use React’s TypeScript template, add –template typescript to the command for creation.

    Selecting a Package Manager:

    When we are creating a new application, the CLI would by default to use Yarn for installing. But if we have Yarn installed but still want to use npm, we can add –use-npm to make the CLI use npm instead of Yarn.

    The Output:

    Using and running any of the above commands will create a directory named my-app in the present folder. There are no compilation or configuration folder structures. There are only the files that we need to build our application. Once the installation is over, we are free to open our project folder.

    Scripts:

    Inside our created project, we can always run some built-in commands.

    npm-start or yarn-start: This runs the app in its development model. Next, we open http://localhost:3000 in our browser. This site will reload if we make changes to our code. Then we can see the build errors and the warnings from lint in the console.

    npm-test or yarn-test: This command runs the test watcher in an interactive mode. This runs tests about the files that will change since the last commit by default.

    npm-build or Yarn-build. The command for building the app will be there for production to the build folder. This is useful for bundling to React in the production mode. Also, it optimizes the build for best performances.

    Conclusion

    React CLI (Create React App) is a great try by React. Trying to make the learning process of new developers less frustrating. Due to the overwhelming number of tools that are present today, it becomes a bit irritating. The simple command-line approach of the React CLI is what makes it more attractive. Since its start, there have been many reasons why it was only preferred at the beginner level. But after so much development, React CLI (Create React App) has become essential for React Developers.

     

    Recent Articles

    Next JS Development Service – Features, Pros, Cons, FAQ

    Fundamentally, we believe it is the single most critical benefit in a rapidly evolving digital environment. Since it allows us to swiftly...

    React JS Learning Worth?

    What is the guideline to React JS Learning? There are several clear talents you must master if you want to make a career change...

    React JS vs React Native – Features, Pros & Cons

    Do you have trouble deciding between React JS vs react native for your development process? Do you need a solid web development framework or...

    Next js vs React: Who Wins The Battle

    Next js vs React: Who Wins The Battle Are you a programmer or in charge of your firm's digital strategy? Do you want to build...

    How can artificial intelligence (AI) help an employee’s work performance and proactivity?

    Artificial intelligence can assist human labor by doing inefficient jobs. Human employees may focus on more challenging work while robots and artificial intelligence power...

    Related Stories

    8 Comments

    Leave A Reply

    Please enter your comment!
    Please enter your name here