Create React App is one of the best ways to start building a new single-page application in React.
Firstly, you’ll need to have Node >= 8.10 and npm >= 5.6 on the computer. To install Node, follow this link.
To check Node version, run this command:
node -v
To create a project, navigate to the directory where you want to store the project and run:
npx create-react-app my-app
Inside my-app directory, we can run several commands:
npm start
Starts the development server.
npm build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
Start the app by:
cd my-app
npm start
Once we’ve change directories into the app, run ls -a to list the content including hidden files:
. .git README.md package.json src
.. .gitignore node_modules public yarn.lock
Important files in React app:
/node_modules folder contains dependencies and sub-dependencies of packages used by the current React app
If a /node_modules folder doesn’t exist when we download a repository from Github, we can run npm install to get it.
/public folder contains all our public files that will be served directly to the browser including index.html file
.gitignore: standard git file to determine which files and directories to ignore when committing code
/src folder contains all our React components.
App.js: a component
index.js: render App component to the DOM
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
<React.StrictMode/> means React does an additional check during development and will give warnings in the console if there’s anything wrong.
package.json: lists all the dependencies of the application and outlines all the settings for the React app
name: name of your app
version: the current version
"private": true: a setting to avoid accidentally publishing your app as a public package within the npm ecosystem.
dependencies: all the required node modules and versions required for the application.
scripts specifies aliases we can use to access some of the react-scripts commands
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
Inside the project, run npm start or yarn start to begin the development server
Open http://localhost:3000 to view it in the browser. The page will automatically reload if we make any changes to the code.
We can edit src/App.js to make any changes. Save to reload.
For example, return “Hello World!” to the browser:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<div className="content">
<h1>Hello World!</h1>
</div>
</div>
);
}
export default App;
Some other commands:
npm test or yarn test: Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. -npm run build or yarn build: Builds the app for production to the build folder.Facebook created a Chrome extension called React Developer Tools to help with debugging React Apps
To open the React Developer Tools, first open Chrome DevTools (View > Developer > Developer Tools) and then select the “React” tab on the right.
You can modify rendered React components such as changing component values, calling methods, and testing interaction between components.