create-react-app is the easiest way to start a React application
create-react-app
It is a project designed to familiarize you with React immediately. It provides a ready-made React application launcher, so you can build your own applications without thinking about Webpack and Babel configuration.
It provides out-of-the-box features:
- Development server with hot reload
- Provide test environment with Jest
- Allow building React applications
- Prepare to use ES6+ syntax
- Bundle all your JavaScript and assets
- With CSS automatic prefix, SASS and CSS module support
- And more!
You first usenpx
, This is an easy way to download and execute Node.js commands without installation.npx
Withnpm
(Starting from version 5.2), if npm has not been installed, please download fromhttps://nodejs.org(Npm is installed with Node).
If you are not sure which version you are using, we recommend that you check if you need to update.
Tip: Check out my terminal tutorial at the following locationhttps://flaviocopes.com/macos-terminal/If you are not familiar
When you runnpx create-react-app <app-name>
,npx
willdownloadrecentcreate-react-app
Release it, run it, and then delete it from the system. This is great because your system will never have an outdated version, and every time you run it, you can get the latest and greatest code.
let us begin:
npx create-react-app todolist
This is when it finished running:
create-react-app
Created a file structure in the folder you told (todolist
In this case) and initialized aGitdatabase.
It's still inpackage.json
File, so you can start the application immediately by entering the folder and runningnpm start
.
In additionnpm start
,create-react-app
Some other commands have been added:
npm run build
: Build React application files in the following locationsbuild
Folder, ready to be deployed to the servernpm test
: Use the following command to run the test suitejokenpm eject
: From pop upcreate-react-app
Ejection is a decisioncreate-react-app
Enough has been done for you, but what you want to do is beyond its allowable scope.
sincecreate-react-app
It is a set of common denominator conventions and a limited number of options, which can guarantee that your needs will require some unique things at some point, and these things have exceededcreate-react-app
.
When it pops up, you will lose the ability to update automatically, but inTower of BabelwithWebpackConfiguration.
When ejected, the action is irreversible. You will get 2 new folders in the application directory,config
withscripts
. These contain all the configurations you need, and now you can start editing them.
Download mine for freeResponse Handbook
More response tutorials:
- A simple React application example: Get GitHub user information through API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to child components through React Router
- Create an application using Electron and React
- Tutorial: Create a spreadsheet with React
- Roadmap for learning React
- Learn how to use Redux
- Getting started with JSX
- Stylized components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- Reaction component
- Virtual DOM
- Reaction event
- Reaction state
- Reaction props
- Reaction fragment
- React Context API
- Reaction PropTypes
- Reaction Concept: Declarative
- React: How to display other components when clicked
- How to loop inside React JSX
- Props and status in React
- Should you use jQuery or React?
- How much JavaScript do I need to know to use React?
- Gatsby Introduction
- How to reference DOM elements in React
- One-way data flow in React
- React high-end components
- React to life cycle events
- Reaction concept: immutability
- Reaction concept: purity
- Introduction to React hooks
- Introduction to create-react-app
- Reaction concept: composition
- React: demo component and container component
- Code splitting in React
- Server-side rendering with React
- How to install React
- CSS in React
- Use SASS in React
- Processing forms in React
- Reaction strict mode
- Reaction portal
- React rendering props
- Test React components
- How to pass parameters to event handlers in React
- How to deal with errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- Reaction, how to transfer props to subcomponents
- How to get the value of an input element in React
- How to use useState React hook
- How to use useCallback React hook
- How to use useEffect React hook
- How to use useMemo React hook
- How to use useRef React hook
- How to use useContext React hook
- How to use useReducer React hook
- How to connect your React app to the backend of the same source
- Reaching the router tutorial
- How to use React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix `dangerouslySetInnerHTML` does not match the error in React
- How can I solve the problem of React login form status and browser auto-fill
- How to configure HTTPS in React application on localhost
- How to fix the "Component cannot be updated while rendering other components" error in React
- Can I use React hooks within the conditions?
- Using useState with objects: how to update
- How to move in code blocks using React and Tailwind
- React, focus on an item in React when added to the DOM
- Response, edit text on doubleclick