Create
React App was established by developers at Facebook as a tool that allowed you
to build React Apps with minimal configuration as it creates most of the
boilerplate code needed to get you ready and coursing. This tool has simplified
the rather intimidating and time-consuming task of developing an active react
app. Create React App v2. And v3. have evolved over the last 2 years. In this
article, you will discover the new updates and features added since the release
of the Create React App tool.
·
Babel 7 is the latest Babel update
which has incorporated new react features such as fragments and has become
compatible with CRA v2.
·
CRA v2. And CRA v3. have updated to Jest 23 and Jest
24 respectively. This introduces some thrilling new features such as
Typescript Support, Improved assertion messages, etc.
·
Webpack 4
is an intuitively quick new version and supports a bug-free experience
modulating bundles.
·
Hooks Supported React apps have changed the way components are written allowing the use of
stateful logic in functional components. This permits you to write purer
components and enhance the optimization of your applications. They are functions that allow you to use React features only available
for classes (like state handling) in functional components. There are two rules for using hooks, the first is to use
hooks at the top level of your functional component, never inside loops,
conditions, or nested functions. The second rule is that only call hooks from
functional components, don’t call hooks from regular JavaScript functions.
·
Typescript Linting has been introduced in the newer versions for projects
making use of Typescript. A list of rules enforced has been released in the
guide to assist you to check for your project’s compatibility.
·
Lighter CSS bundles can be created with CSS modules. You can target modern
browser clients specifically in the browser list specification of your package.
·
Runtime Error Overlaypops up whenever there is an uncaught error in your
application.
·
Browser list configuration allows you to configure a set of browser versions to
change the build output in order to produce a compatible code and support
specified browser versions. You can specify separate lists for production and
development. The production build will target browsers which cover 99.5% of
global usage, while the development build will target only the last two
versions of Google Chrome.
·
Absolute imports with jsconfig.json and tsconfig.json for JavaScript
projects allowing a direct path for files.
·
Post CSS
is a great tool with over 200 custom plugins. This further widens the horizon
for you by increasing code readability, utilizing stylelint, offering a
powerful grid system, etc.
·
SVG Tags
which could otherwise get long and confusing are now redeemed in the newer
versions of React App with cleaner looking lines, richer color and the option
to change your images into code.
·
Yarn PlugN’Play is experimental but a very useful tool in getting rid
of the node_modules. Installs ran using PlugN’Play are up to 70% faster than
the regular ones.
With create-react-app,
a couple of positive steps have been taken towards the improvement of the overall
React development experience as well as the quality of applications. React has
an exciting future and this is yet another indicator of more good things to
come.
No comments:
Post a Comment