What is React?
Before you start your React project ensure you have:
We'll be using
create-react-app from Facebook to scaffold our application. To install create-react-app globally:
npm i -g create-react-app
Then to scaffold you first project run:
npx create-react-app <your-project-name>
npx is a tool for executing
npm packages and comes with
npm >= 5.2
Now, to start the application navigate into your project directory and run
This will launch a development server and will allow you to open the new React application by going to http://localhost:3000/ in your browser.
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and Webpack, but you don't need to know anything about them for now. When you are ready to deploy to production, running
npm run build will create an optimized build of your app in the build folder.
After creation, your project should look like this:
<your-project-name>/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg
The part that interests us is the
<div id="root"></div>. This is where our React application will go. The entire root div will simply be replaced with the contents of our React application. Everything else will remain unchanged.
This is the file that bootstraps the entire React application. And by the way, all of our React source code will go into the
src directory. The line that does the magic is:
ReactDOM.render(<App />, document.getElementById('root'));